From 6febe13b3f4ad4eff3f205ece445b3577255bf41 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 16 Feb 2024 20:33:00 +0000
Subject: Migrating to react query for client side queries

---
 .../app/dashboard/bookmarks/components/AddLink.tsx | 26 +++---
 .../bookmarks/components/BookmarkOptions.tsx       | 92 +++++++++++-----------
 .../dashboard/settings/components/AddApiKey.tsx    | 18 +++--
 .../dashboard/settings/components/DeleteApiKey.tsx | 24 +++---
 packages/web/app/layout.tsx                        |  7 +-
 packages/web/lib/providers.tsx                     | 33 ++++++++
 packages/web/lib/trpc.tsx                          | 19 +----
 packages/web/package.json                          |  3 +
 8 files changed, 128 insertions(+), 94 deletions(-)
 create mode 100644 packages/web/lib/providers.tsx

(limited to 'packages/web')

diff --git a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
index e8ecec35..34f043e7 100644
--- a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
@@ -17,21 +17,19 @@ const formSchema = z.object({
 
 export default function AddLink() {
   const router = useRouter();
+  const bookmarkLinkMutator = api.bookmarks.bookmarkLink.useMutation({
+    onSuccess: () => {
+      router.refresh();
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
-  async function onSubmit(value: z.infer<typeof formSchema>) {
-    try {
-      await api.bookmarks.bookmarkLink.mutate({ url: value.url, type: "link" });
-    } catch (e) {
-      toast({ description: "Something went wrong", variant: "destructive" });
-      return;
-    }
-    router.refresh();
-  }
-
   const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
     toast({
       description: Object.values(errors)
@@ -43,7 +41,13 @@ export default function AddLink() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit, onError)}>
+      <form
+        onSubmit={form.handleSubmit(
+          (value) =>
+            bookmarkLinkMutator.mutate({ url: value.url, type: "link" }),
+          onError,
+        )}
+      >
         <div className="container flex w-full items-center space-x-2 py-4">
           <FormField
             control={form.control}
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index 4123dc36..1360f966 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -18,61 +18,45 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const router = useRouter();
   const linkId = bookmark.id;
 
-  const unbookmarkLink = async () => {
-    try {
-      await api.bookmarks.deleteBookmark.mutate({
-        bookmarkId: linkId,
-      });
-
+  const onError = () => {
+    toast({
+      variant: "destructive",
+      title: "Something went wrong",
+      description: "There was a problem with your request.",
+    });
+  };
+  const onSettled = () => {
+    router.refresh();
+  };
+  const deleteBookmarkMutator = api.bookmarks.deleteBookmark.useMutation({
+    onSuccess: () => {
       toast({
         description: "The bookmark has been deleted!",
       });
-    } catch (e) {
-      toast({
-        variant: "destructive",
-        title: "Something went wrong",
-        description: "There was a problem with your request.",
-      });
-    }
-
-    router.refresh();
-  };
+    },
+    onError,
+    onSettled,
+  });
 
-  const updateBookmark = async (req: ZUpdateBookmarksRequest) => {
-    try {
-      await api.bookmarks.updateBookmark.mutate(req);
+  const updateBookmarkMutator = api.bookmarks.updateBookmark.useMutation({
+    onSuccess: () => {
       toast({
         description: "The bookmark has been updated!",
       });
-    } catch (e) {
-      toast({
-        variant: "destructive",
-        title: "Something went wrong",
-        description: "There was a problem with your request.",
-      });
-    }
+    },
+    onError,
+    onSettled,
+  });
 
-    router.refresh();
-  };
-
-  const crawlBookmark = async () => {
-    try {
-      await api.bookmarks.recrawlBookmark.mutate({
-        bookmarkId: linkId,
-      });
+  const crawlBookmarkMutator = api.bookmarks.recrawlBookmark.useMutation({
+    onSuccess: () => {
       toast({
         description: "Re-fetch has been enqueued!",
       });
-    } catch (e) {
-      toast({
-        variant: "destructive",
-        title: "Something went wrong",
-        description: "There was a problem with your request.",
-      });
-    }
-
-    router.refresh();
-  };
+    },
+    onError,
+    onSettled,
+  });
 
   return (
     <DropdownMenu>
@@ -84,7 +68,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
       <DropdownMenuContent className="w-fit">
         <DropdownMenuItem
           onClick={() =>
-            updateBookmark({
+            updateBookmarkMutator.mutate({
               bookmarkId: linkId,
               favourited: !bookmark.favourited,
             })
@@ -95,17 +79,29 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() =>
-            updateBookmark({ bookmarkId: linkId, archived: !bookmark.archived })
+            updateBookmarkMutator.mutate({
+              bookmarkId: linkId,
+              archived: !bookmark.archived,
+            })
           }
         >
           <Archive className="mr-2 size-4" />
           <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={crawlBookmark}>
+        <DropdownMenuItem
+          onClick={() =>
+            crawlBookmarkMutator.mutate({ bookmarkId: bookmark.id })
+          }
+        >
           <RotateCw className="mr-2 size-4" />
           <span>Refresh</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="text-destructive" onClick={unbookmarkLink}>
+        <DropdownMenuItem
+          className="text-destructive"
+          onClick={() =>
+            deleteBookmarkMutator.mutate({ bookmarkId: bookmark.id })
+          }
+        >
           <Trash2 className="mr-2 size-4" />
           <span>Delete</span>
         </DropdownMenuItem>
diff --git a/packages/web/app/dashboard/settings/components/AddApiKey.tsx b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
index f4f2894c..c438f4b1 100644
--- a/packages/web/app/dashboard/settings/components/AddApiKey.tsx
+++ b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
@@ -53,20 +53,22 @@ function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
     name: z.string(),
   });
   const router = useRouter();
+  const mutator = api.apiKeys.create.useMutation({
+    onSuccess: (resp) => {
+      onSuccess(resp.key);
+      router.refresh();
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
   async function onSubmit(value: z.infer<typeof formSchema>) {
-    try {
-      const resp = await api.apiKeys.create.mutate({ name: value.name });
-      onSuccess(resp.key);
-    } catch (e) {
-      toast({ description: "Something went wrong", variant: "destructive" });
-      return;
-    }
-    router.refresh();
+    mutator.mutate({ name: value.name });
   }
 
   const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
diff --git a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx b/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
index 715b7a2c..bc3e3c92 100644
--- a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
+++ b/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
@@ -13,9 +13,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { api } from "@/lib/trpc";
 import { useRouter } from "next/navigation";
 import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
 
 export default function DeleteApiKey({
   name,
@@ -25,13 +25,15 @@ export default function DeleteApiKey({
   id: string;
 }) {
   const router = useRouter();
-  const deleteKey = async () => {
-    await api.apiKeys.revoke.mutate({ id });
-    toast({
-      description: "Key was successfully deleted",
-    });
-    router.refresh();
-  };
+  const mutator = api.apiKeys.revoke.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "Key was successfully deleted",
+      });
+      router.refresh();
+    },
+  });
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -54,7 +56,11 @@ export default function DeleteApiKey({
             </Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button type="button" variant="destructive" onClick={deleteKey}>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => mutator.mutate({ id })}
+            >
               Delete
             </Button>
           </DialogClose>
diff --git a/packages/web/app/layout.tsx b/packages/web/app/layout.tsx
index a2d34046..f1971b20 100644
--- a/packages/web/app/layout.tsx
+++ b/packages/web/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import React from "react";
 import { Toaster } from "@/components/ui/toaster";
+import Providers from "@/lib/providers";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,7 +21,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        {children}
+        <Providers>
+          {children}
+          <ReactQueryDevtools initialIsOpen={false} />
+        </Providers>
         <Toaster />
       </body>
     </html>
diff --git a/packages/web/lib/providers.tsx b/packages/web/lib/providers.tsx
new file mode 100644
index 00000000..e81645dd
--- /dev/null
+++ b/packages/web/lib/providers.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { api } from "./trpc";
+import { loggerLink } from "@trpc/client";
+import { httpBatchLink } from "@trpc/client";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === "development" ||
+            (op.direction === "down" && op.result instanceof Error),
+        }),
+        httpBatchLink({
+          // TODO: Change this to be a full URL exposed as a client side setting
+          url: `/api/trpc`,
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}
diff --git a/packages/web/lib/trpc.tsx b/packages/web/lib/trpc.tsx
index 540c6ab5..aa246047 100644
--- a/packages/web/lib/trpc.tsx
+++ b/packages/web/lib/trpc.tsx
@@ -1,20 +1,5 @@
 "use client";
-import { httpBatchLink } from "@trpc/client";
 import type { AppRouter } from "@/server/api/routers/_app";
+import { createTRPCReact } from "@trpc/react-query";
 
-import { loggerLink } from "@trpc/client";
-import { createTRPCClient } from "@trpc/client";
-
-export const api = createTRPCClient<AppRouter>({
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        process.env.NODE_ENV === "development" ||
-        (op.direction === "down" && op.result instanceof Error),
-    }),
-    httpBatchLink({
-      // TODO: Change this to be a full URL exposed as a client side setting
-      url: `/api/trpc`,
-    }),
-  ],
-});
+export const api = createTRPCReact<AppRouter>();
diff --git a/packages/web/package.json b/packages/web/package.json
index d66a3fe7..997e4042 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -20,8 +20,11 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@remember/db": "0.1.0",
+    "@tanstack/react-query": "^5.20.5",
+    "@tanstack/react-query-devtools": "^5.21.0",
     "@trpc/client": "11.0.0-next-beta.274",
     "@trpc/next": "11.0.0-next-beta.274",
+    "@trpc/react-query": "^11.0.0-next-beta.289",
     "@trpc/server": "11.0.0-next-beta.274",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
-- 
cgit v1.2.3-70-g09d2