Merge remote-tracking branch 'upstream/main'

apps/browser-extension/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hoarder/trpc": "workspace:^0.1.0",
+    "@hoarder/shared-react": "workspace:^0.1.0",
     "@tanstack/react-query": "^5.24.8",
     "@trpc/client": "11.0.0-next-beta.308",
     "@trpc/next": "11.0.0-next-beta.308",

apps/browser-extension/src/BookmarkSavedPage.tsx

@@ -2,24 +2,24 @@ import { useState } from "react";
 import { ArrowUpRightFromSquare, Trash } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
+import { useDeleteBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+
 import Spinner from "./Spinner";
 import usePluginSettings from "./utils/settings";
-import { api } from "./utils/trpc";
 
 export default function BookmarkSavedPage() {
   const { bookmarkId } = useParams();
   const navigate = useNavigate();
   const [error, setError] = useState("");
 
-  const { mutate: deleteBookmark, isPending } =
-    api.bookmarks.deleteBookmark.useMutation({
-      onSuccess: () => {
-        navigate("/bookmarkdeleted");
-      },
-      onError: (e) => {
-        setError(e.message);
-      },
-    });
+  const { mutate: deleteBookmark, isPending } = useDeleteBookmark({
+    onSuccess: () => {
+      navigate("/bookmarkdeleted");
+    },
+    onError: (e) => {
+      setError(e.message);
+    },
+  });
 
   const { settings } = usePluginSettings();
 

apps/browser-extension/src/OptionsPage.tsx

@@ -17,6 +17,8 @@ export default function OptionsPage() {
     },
   );
 
+  const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+
   const invalidateWhoami = api.useUtils().users.whoami.refetch;
 
   useEffect(() => {
@@ -39,7 +41,10 @@ export default function OptionsPage() {
   }
 
   const onLogout = () => {
-    setSettings((s) => ({ ...s, apiKey: "" }));
+    if (settings.apiKeyId) {
+      deleteKey({ id: settings.apiKeyId });
+    }
+    setSettings((s) => ({ ...s, apiKey: "", apiKeyId: undefined }));
     invalidateWhoami();
     navigate("/notconfigured");
   };

apps/browser-extension/src/SignInPage.tsx

@@ -15,7 +15,7 @@ export default function SignInPage() {
     isPending,
   } = api.apiKeys.exchange.useMutation({
     onSuccess: (resp) => {
-      setSettings((s) => ({ ...s, apiKey: resp.key }));
+      setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
       navigate("/options");
     },
   });

apps/browser-extension/src/utils/providers.tsx

@@ -1,47 +1,9 @@
-import { useEffect, useState } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink } from "@trpc/client";
-import superjson from "superjson";
+import { TRPCProvider } from "@hoarder/shared-react/providers/trpc-provider";
 
-import usePluginSettings, { getPluginSettings } from "./settings";
-import { api } from "./trpc";
-
-function getTRPCClient(address: string) {
-  return api.createClient({
-    links: [
-      httpBatchLink({
-        url: `${address}/api/trpc`,
-        async headers() {
-          const settings = await getPluginSettings();
-          return {
-            Authorization: `Bearer ${settings.apiKey}`,
-          };
-        },
-        transformer: superjson,
-      }),
-    ],
-  });
-}
+import usePluginSettings from "./settings";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const { settings } = usePluginSettings();
-  const [queryClient] = useState(() => new QueryClient());
-
-  const [trpcClient, setTrpcClient] = useState<
-    ReturnType<typeof getTRPCClient>
-  >(getTRPCClient(settings.address));
-
-  useEffect(() => {
-    setTrpcClient(getTRPCClient(settings.address));
-  }, [settings.address]);
 
-  return (
-    <api.Provider
-      key={settings.address}
-      client={trpcClient}
-      queryClient={queryClient}
-    >
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </api.Provider>
-  );
+  return <TRPCProvider settings={settings}>{children}</TRPCProvider>;
 }

apps/browser-extension/src/utils/settings.ts

@@ -2,6 +2,7 @@ import { useChromeStorageSync } from "use-chrome-storage";
 
 export interface Settings {
   apiKey: string;
+  apiKeyId?: string;
   address: string;
 }
 

apps/mobile/app/signin.tsx

@@ -22,7 +22,7 @@ export default function Signin() {
 
   const { mutate: login, isPending } = api.apiKeys.exchange.useMutation({
     onSuccess: (resp) => {
-      setSettings({ ...settings, apiKey: resp.key });
+      setSettings({ ...settings, apiKey: resp.key, apiKeyId: resp.id });
     },
     onError: (e) => {
       if (e.data?.code === "UNAUTHORIZED") {

apps/mobile/components/bookmarks/BookmarkCard.tsx

@@ -17,6 +17,10 @@ import { MenuView } from "@react-native-menu/menu";
 import { Ellipsis, Star } from "lucide-react-native";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import {
+  useDeleteBookmark,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks/bookmarks";
 
 import { Divider } from "../ui/Divider";
 import { Skeleton } from "../ui/Skeleton";
@@ -45,7 +49,6 @@ export function isBookmarkStillLoading(bookmark: ZBookmark) {
 
 function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
-  const apiUtils = api.useUtils();
 
   const onError = () => {
     toast({
@@ -56,37 +59,27 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   };
 
   const { mutate: deleteBookmark, isPending: isDeletionPending } =
-    api.bookmarks.deleteBookmark.useMutation({
+    useDeleteBookmark({
       onSuccess: () => {
         toast({
           message: "The bookmark has been deleted!",
           showProgress: false,
         });
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });
 
-  const { mutate: favouriteBookmark, variables } =
-    api.bookmarks.updateBookmark.useMutation({
-      onSuccess: () => {
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
-      },
-      onError,
-    });
+  const { mutate: favouriteBookmark, variables } = useUpdateBookmark({
+    onError,
+  });
 
   const { mutate: archiveBookmark, isPending: isArchivePending } =
-    api.bookmarks.updateBookmark.useMutation({
+    useUpdateBookmark({
       onSuccess: (resp) => {
         toast({
           message: `The bookmark has been ${resp.archived ? "archived" : "un-archived"}!`,
           showProgress: false,
         });
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
-        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });

apps/mobile/lib/providers.tsx

@@ -1,52 +1,11 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { ToastProvider } from "@/components/ui/Toast";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink } from "@trpc/client";
-import superjson from "superjson";
 
-import type { Settings } from "./settings";
-import useAppSettings from "./settings";
-import { api } from "./trpc";
-
-function getTRPCClient(settings: Settings) {
-  return api.createClient({
-    links: [
-      httpBatchLink({
-        url: `${settings.address}/api/trpc`,
-        headers() {
-          return {
-            Authorization: settings?.apiKey
-              ? `Bearer ${settings.apiKey}`
-              : undefined,
-          };
-        },
-        transformer: superjson,
-      }),
-    ],
-  });
-}
-
-function TrpcProvider({
-  children,
-  settings,
-}: {
-  settings: Settings;
-  children: React.ReactNode;
-}) {
-  const queryClient = useMemo(() => new QueryClient(), [settings]);
-
-  const trpcClient = useMemo(() => getTRPCClient(settings), [settings]);
+import { TRPCProvider } from "@hoarder/shared-react/providers/trpc-provider";
 
-  return (
-    <api.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        <ToastProvider>{children}</ToastProvider>
-      </QueryClientProvider>
-    </api.Provider>
-  );
-}
+import useAppSettings from "./settings";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const { settings, isLoading, load } = useAppSettings();
@@ -62,9 +21,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <SafeAreaProvider>
-      <TrpcProvider settings={settings}>
+      <TRPCProvider settings={settings}>
         <ToastProvider>{children}</ToastProvider>
-      </TrpcProvider>
+      </TRPCProvider>
     </SafeAreaProvider>
   );
 }

apps/mobile/lib/session.ts

@@ -1,12 +1,18 @@
 import { useCallback } from "react";
 
 import useAppSettings from "./settings";
+import { api } from "./trpc";
 
 export function useSession() {
   const { settings, setSettings } = useAppSettings();
 
+  const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+
   const logout = useCallback(() => {
-    setSettings({ ...settings, apiKey: undefined });
+    if (settings.apiKeyId) {
+      deleteKey({ id: settings.apiKeyId });
+    }
+    setSettings({ ...settings, apiKey: undefined, apiKeyId: undefined });
   }, [settings, setSettings]);
 
   return {

apps/mobile/lib/settings.ts

@@ -5,6 +5,7 @@ const SETTING_NAME = "settings";
 
 export interface Settings {
   apiKey?: string;
+  apiKeyId?: string;
   address: string;
 }
 

apps/mobile/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hoarder/trpc": "workspace:^0.1.0",
+    "@hoarder/shared-react": "workspace:^0.1.0",
     "@react-native-menu/menu": "^0.9.1",
     "@tanstack/react-query": "^5.24.8",
     "class-variance-authority": "^0.7.0",

apps/web/app/dashboard/archive/page.tsx

@@ -14,6 +14,7 @@ export default async function ArchivedBookmarkPage() {
       }
       query={{ archived: true }}
       showDivider={true}
+      showEditorCard={true}
     />
   );
 }

apps/web/app/dashboard/bookmarks/page.tsx

@@ -1,23 +1,20 @@
 import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import TopNav from "@/components/dashboard/bookmarks/TopNav";
-import UploadDropzone from "@/components/dashboard/UploadDropzone";
 import { Separator } from "@/components/ui/separator";
 
 export default async function BookmarksPage() {
   return (
     <div>
-      <UploadDropzone>
-        <TopNav />
-        <Separator />
-        <div className="my-4 flex-1">
-          <Bookmarks
-            header={<p className="text-2xl">Bookmarks</p>}
-            query={{ archived: false }}
-            showEditorCard={true}
-          />
-        </div>
-      </UploadDropzone>
+      <TopNav />
+      <Separator />
+      <div className="my-4 flex-1">
+        <Bookmarks
+          header={<p className="text-2xl">Bookmarks</p>}
+          query={{ archived: false }}
+          showEditorCard={true}
+        />
+      </div>
     </div>
   );
 }

apps/web/app/dashboard/favourites/page.tsx

@@ -6,6 +6,7 @@ export default async function FavouritesBookmarkPage() {
       header={<p className="text-2xl">⭐️ Favourites</p>}
       query={{ favourited: true }}
       showDivider={true}
+      showEditorCard={true}
     />
   );
 }

apps/web/app/dashboard/layout.tsx

@@ -21,7 +21,7 @@ export default async function Dashboard({
           <MobileSidebar />
           <Separator />
         </div>
-        <div className="container p-4">{children}</div>
+        <div className="container min-h-screen p-4">{children}</div>
       </main>
     </div>
   );