diff options
Diffstat (limited to '')
4 files changed, 19 insertions, 8 deletions
diff --git a/apps/browser-extension/src/components/BookmarkLists.tsx b/apps/browser-extension/src/components/BookmarkLists.tsx index 1d70d257..8debef5c 100644 --- a/apps/browser-extension/src/components/BookmarkLists.tsx +++ b/apps/browser-extension/src/components/BookmarkLists.tsx @@ -1,3 +1,4 @@ +import { useQuery } from "@tanstack/react-query"; import { X } from "lucide-react"; import { @@ -5,15 +6,18 @@ import { useRemoveBookmarkFromList, } from "@karakeep/shared-react/hooks/lists"; -import { api } from "../utils/trpc"; +import { useTRPC } from "../utils/trpc"; import { Button } from "./ui/button"; export default function BookmarkLists({ bookmarkId }: { bookmarkId: string }) { + const api = useTRPC(); const { data: allLists } = useBookmarkLists(); const { mutate: deleteFromList } = useRemoveBookmarkFromList(); - const { data: lists } = api.lists.getListsOfBookmark.useQuery({ bookmarkId }); + const { data: lists } = useQuery( + api.lists.getListsOfBookmark.queryOptions({ bookmarkId }), + ); if (!lists || !allLists) { return null; } diff --git a/apps/browser-extension/src/components/ListsSelector.tsx b/apps/browser-extension/src/components/ListsSelector.tsx index 86c151d1..b27e866a 100644 --- a/apps/browser-extension/src/components/ListsSelector.tsx +++ b/apps/browser-extension/src/components/ListsSelector.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { useQuery } from "@tanstack/react-query"; import { useSet } from "@uidotdev/usehooks"; import { Check, ChevronsUpDown } from "lucide-react"; @@ -9,7 +10,7 @@ import { } from "@karakeep/shared-react/hooks/lists"; import { cn } from "../utils/css"; -import { api } from "../utils/trpc"; +import { useTRPC } from "../utils/trpc"; import { Button } from "./ui/button"; import { Command, @@ -23,14 +24,17 @@ import { DynamicPopoverContent } from "./ui/dynamic-popover"; import { Popover, PopoverTrigger } from "./ui/popover"; export function ListsSelector({ bookmarkId }: { bookmarkId: string }) { + const api = useTRPC(); const currentlyUpdating = useSet<string>(); const [open, setOpen] = React.useState(false); const { mutate: addToList } = useAddBookmarkToList(); const { mutate: removeFromList } = useRemoveBookmarkFromList(); - const { data: existingLists } = api.lists.getListsOfBookmark.useQuery({ - bookmarkId, - }); + const { data: existingLists } = useQuery( + api.lists.getListsOfBookmark.queryOptions({ + bookmarkId, + }), + ); const { data: allLists } = useBookmarkLists(); diff --git a/apps/browser-extension/src/components/NoteEditor.tsx b/apps/browser-extension/src/components/NoteEditor.tsx index 15f1515b..fb94f83b 100644 --- a/apps/browser-extension/src/components/NoteEditor.tsx +++ b/apps/browser-extension/src/components/NoteEditor.tsx @@ -55,6 +55,7 @@ export function NoteEditor({ bookmarkId }: { bookmarkId: string }) { return ( <div className="flex flex-col gap-2"> <Textarea + autoFocus className="h-32 w-full overflow-auto rounded bg-background p-2 text-sm text-gray-400 dark:text-gray-300" value={noteValue} placeholder="Write some notes ..." diff --git a/apps/browser-extension/src/components/TagsSelector.tsx b/apps/browser-extension/src/components/TagsSelector.tsx index ce404ac8..30cdcafc 100644 --- a/apps/browser-extension/src/components/TagsSelector.tsx +++ b/apps/browser-extension/src/components/TagsSelector.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { useQuery } from "@tanstack/react-query"; import { useSet } from "@uidotdev/usehooks"; import { Check, ChevronsUpDown, Plus } from "lucide-react"; @@ -8,7 +9,7 @@ import { } from "@karakeep/shared-react/hooks/bookmarks"; import { cn } from "../utils/css"; -import { api } from "../utils/trpc"; +import { useTRPC } from "../utils/trpc"; import { Button } from "./ui/button"; import { Command, @@ -22,7 +23,8 @@ import { DynamicPopoverContent } from "./ui/dynamic-popover"; import { Popover, PopoverTrigger } from "./ui/popover"; export function TagsSelector({ bookmarkId }: { bookmarkId: string }) { - const { data: allTags } = api.tags.list.useQuery({}); + const api = useTRPC(); + const { data: allTags } = useQuery(api.tags.list.queryOptions({})); const { data: bookmark } = useAutoRefreshingBookmarkQuery({ bookmarkId }); const existingTagIds = new Set(bookmark?.tags.map((t) => t.id) ?? []); |