aboutsummaryrefslogtreecommitdiffstats
path: root/apps/browser-extension
diff options
context:
space:
mode:
Diffstat (limited to 'apps/browser-extension')
-rw-r--r--apps/browser-extension/package.json6
-rw-r--r--apps/browser-extension/src/OptionsPage.tsx22
-rw-r--r--apps/browser-extension/src/SavePage.tsx38
-rw-r--r--apps/browser-extension/src/SignInPage.tsx32
-rw-r--r--apps/browser-extension/src/components/BookmarkLists.tsx8
-rw-r--r--apps/browser-extension/src/components/ListsSelector.tsx12
-rw-r--r--apps/browser-extension/src/components/TagsSelector.tsx6
-rw-r--r--apps/browser-extension/src/utils/providers.tsx6
-rw-r--r--apps/browser-extension/src/utils/trpc.ts4
9 files changed, 80 insertions, 54 deletions
diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json
index d2a699c3..575bb8b7 100644
--- a/apps/browser-extension/package.json
+++ b/apps/browser-extension/package.json
@@ -24,9 +24,9 @@
"@tanstack/query-async-storage-persister": "5.90.2",
"@tanstack/react-query": "5.90.2",
"@tanstack/react-query-persist-client": "5.90.2",
- "@trpc/client": "^11.4.3",
- "@trpc/react-query": "^11.4.3",
- "@trpc/server": "^11.4.3",
+ "@trpc/client": "^11.9.0",
+ "@trpc/server": "^11.9.0",
+ "@trpc/tanstack-react-query": "^11.9.0",
"@uidotdev/usehooks": "^2.4.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
index cac32eff..1b1dc8b6 100644
--- a/apps/browser-extension/src/OptionsPage.tsx
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -1,4 +1,5 @@
import React, { useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { Button } from "./components/ui/button";
@@ -17,27 +18,32 @@ import usePluginSettings, {
DEFAULT_BADGE_CACHE_EXPIRE_MS,
} from "./utils/settings";
import { useTheme } from "./utils/ThemeProvider";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
export default function OptionsPage() {
+ const api = useTRPC();
+ const queryClient = useQueryClient();
const navigate = useNavigate();
const { settings, setSettings } = usePluginSettings();
const { setTheme, theme } = useTheme();
- const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery(
- undefined,
- {
+ const { data: whoami, error: whoAmIError } = useQuery(
+ api.users.whoami.queryOptions(undefined, {
enabled: settings.address != "",
- },
+ }),
);
- const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+ const { mutate: deleteKey } = useMutation(
+ api.apiKeys.revoke.mutationOptions(),
+ );
- const invalidateWhoami = api.useUtils().users.whoami.refetch;
+ const invalidateWhoami = () => {
+ queryClient.refetchQueries(api.users.whoami.queryFilter());
+ };
useEffect(() => {
invalidateWhoami();
- }, [settings, invalidateWhoami]);
+ }, [settings]);
let loggedInMessage: React.ReactNode;
if (whoAmIError) {
diff --git a/apps/browser-extension/src/SavePage.tsx b/apps/browser-extension/src/SavePage.tsx
index b4b9ce95..5f55e164 100644
--- a/apps/browser-extension/src/SavePage.tsx
+++ b/apps/browser-extension/src/SavePage.tsx
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
import { Navigate } from "react-router-dom";
import {
@@ -9,33 +10,36 @@ import {
import { NEW_BOOKMARK_REQUEST_KEY_NAME } from "./background/protocol";
import Spinner from "./Spinner";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
import { MessageType } from "./utils/type";
import { isHttpUrl } from "./utils/url";
export default function SavePage() {
+ const api = useTRPC();
const [error, setError] = useState<string | undefined>(undefined);
const {
data,
mutate: createBookmark,
status,
- } = api.bookmarks.createBookmark.useMutation({
- onError: (e) => {
- setError("Something went wrong: " + e.message);
- },
- onSuccess: async () => {
- // After successful creation, update badge cache and notify background
- const [currentTab] = await chrome.tabs.query({
- active: true,
- lastFocusedWindow: true,
- });
- await chrome.runtime.sendMessage({
- type: MessageType.BOOKMARK_REFRESH_BADGE,
- currentTab: currentTab,
- });
- },
- });
+ } = useMutation(
+ api.bookmarks.createBookmark.mutationOptions({
+ onError: (e) => {
+ setError("Something went wrong: " + e.message);
+ },
+ onSuccess: async () => {
+ // After successful creation, update badge cache and notify background
+ const [currentTab] = await chrome.tabs.query({
+ active: true,
+ lastFocusedWindow: true,
+ });
+ await chrome.runtime.sendMessage({
+ type: MessageType.BOOKMARK_REFRESH_BADGE,
+ currentTab: currentTab,
+ });
+ },
+ }),
+ );
useEffect(() => {
async function getNewBookmarkRequestFromBackgroundScriptIfAny(): Promise<ZNewBookmarkRequest | null> {
const { [NEW_BOOKMARK_REQUEST_KEY_NAME]: req } =
diff --git a/apps/browser-extension/src/SignInPage.tsx b/apps/browser-extension/src/SignInPage.tsx
index 6cf8b35d..8a7229b6 100644
--- a/apps/browser-extension/src/SignInPage.tsx
+++ b/apps/browser-extension/src/SignInPage.tsx
@@ -1,11 +1,12 @@
import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { Button } from "./components/ui/button";
import { Input } from "./components/ui/input";
import Logo from "./Logo";
import usePluginSettings from "./utils/settings";
-import { api } from "./utils/trpc";
+import { useTRPC } from "./utils/trpc";
const enum LoginState {
NONE = "NONE",
@@ -14,6 +15,7 @@ const enum LoginState {
}
export default function SignInPage() {
+ const api = useTRPC();
const navigate = useNavigate();
const { settings, setSettings } = usePluginSettings();
@@ -21,23 +23,27 @@ export default function SignInPage() {
mutate: login,
error: usernamePasswordError,
isPending: userNamePasswordRequestIsPending,
- } = api.apiKeys.exchange.useMutation({
- onSuccess: (resp) => {
- setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
- navigate("/options");
- },
- });
+ } = useMutation(
+ api.apiKeys.exchange.mutationOptions({
+ onSuccess: (resp) => {
+ setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
+ navigate("/options");
+ },
+ }),
+ );
const {
mutate: validateApiKey,
error: apiKeyValidationError,
isPending: apiKeyValueRequestIsPending,
- } = api.apiKeys.validate.useMutation({
- onSuccess: () => {
- setSettings((s) => ({ ...s, apiKey: apiKeyFormData.apiKey }));
- navigate("/options");
- },
- });
+ } = useMutation(
+ api.apiKeys.validate.mutationOptions({
+ onSuccess: () => {
+ setSettings((s) => ({ ...s, apiKey: apiKeyFormData.apiKey }));
+ navigate("/options");
+ },
+ }),
+ );
const [lastLoginAttemptSource, setLastLoginAttemptSource] =
useState<LoginState>(LoginState.NONE);
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/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) ?? []);
diff --git a/apps/browser-extension/src/utils/providers.tsx b/apps/browser-extension/src/utils/providers.tsx
index 86489d6d..4c09084d 100644
--- a/apps/browser-extension/src/utils/providers.tsx
+++ b/apps/browser-extension/src/utils/providers.tsx
@@ -1,4 +1,4 @@
-import { TRPCProvider } from "@karakeep/shared-react/providers/trpc-provider";
+import { TRPCSettingsProvider } from "@karakeep/shared-react/providers/trpc-provider";
import usePluginSettings from "./settings";
import { ThemeProvider } from "./ThemeProvider";
@@ -7,8 +7,8 @@ export function Providers({ children }: { children: React.ReactNode }) {
const { settings } = usePluginSettings();
return (
- <TRPCProvider settings={settings}>
+ <TRPCSettingsProvider settings={settings}>
<ThemeProvider>{children}</ThemeProvider>
- </TRPCProvider>
+ </TRPCSettingsProvider>
);
}
diff --git a/apps/browser-extension/src/utils/trpc.ts b/apps/browser-extension/src/utils/trpc.ts
index b3215d9d..73fe68c5 100644
--- a/apps/browser-extension/src/utils/trpc.ts
+++ b/apps/browser-extension/src/utils/trpc.ts
@@ -1,7 +1,7 @@
import { QueryClient } from "@tanstack/react-query";
import { persistQueryClient } from "@tanstack/react-query-persist-client";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
+import { createTRPCContext } from "@trpc/tanstack-react-query";
import superjson from "superjson";
import type { AppRouter } from "@karakeep/trpc/routers/_app";
@@ -9,7 +9,7 @@ import type { AppRouter } from "@karakeep/trpc/routers/_app";
import { getPluginSettings } from "./settings";
import { createChromeStorage } from "./storagePersister";
-export const api = createTRPCReact<AppRouter>();
+export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();
let apiClient: ReturnType<typeof createTRPCClient<AppRouter>> | null = null;
let queryClient: QueryClient | null = null;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-11 03:50:42 +0000