refactor: Migrating to trpc instead of next's route handers

3 files changed, 37 insertions, 27 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
index f99c1655..e8ecec35 100644
--- a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
@@ -3,13 +3,13 @@
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import APIClient from "@/lib/api";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useForm, SubmitErrorHandler } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
 
 const formSchema = z.object({
   url: z.string().url({ message: "The link must be a valid URL" }),
@@ -23,9 +23,10 @@ export default function AddLink() {
   });
 
   async function onSubmit(value: z.infer<typeof formSchema>) {
-    const [_resp, error] = await APIClient.bookmarkLink(value.url);
-    if (error) {
-      toast({ description: error.message, variant: "destructive" });
+    try {
+      await api.bookmarks.bookmarkLink.mutate({ url: value.url, type: "link" });
+    } catch (e) {
+      toast({ description: "Something went wrong", variant: "destructive" });
       return;
     }
     router.refresh();
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index 15ce64c7..4496d820 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useToast } from "@/components/ui/use-toast";
-import APIClient from "@/lib/api";
+import { api } from "@/lib/trpc";
 import { ZBookmark, ZUpdateBookmarksRequest } from "@/lib/types/api/bookmarks";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
@@ -19,36 +19,37 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const linkId = bookmark.id;
 
   const unbookmarkLink = async () => {
-    const [_, error] = await APIClient.deleteBookmark(linkId);
+    try {
+      await api.bookmarks.deleteBookmark.mutate({
+        bookmarkId: linkId,
+      });
 
-    if (error) {
+      toast({
+        description: "The bookmark has been deleted!",
+      });
+    } catch (e) {
       toast({
         variant: "destructive",
         title: "Something went wrong",
         description: "There was a problem with your request.",
       });
-    } else {
-      toast({
-        description: "The bookmark has been deleted!",
-      });
     }
 
     router.refresh();
   };
 
   const updateBookmark = async (req: ZUpdateBookmarksRequest) => {
-    const [_, error] = await APIClient.updateBookmark(linkId, req);
-
-    if (error) {
+    try {
+      await api.bookmarks.updateBookmark.mutate(req);
+      toast({
+        description: "The bookmark has been updated!",
+      });
+    } catch (e) {
       toast({
         variant: "destructive",
         title: "Something went wrong",
         description: "There was a problem with your request.",
       });
-    } else {
-      toast({
-        description: "The bookmark has been updated!",
-      });
     }
 
     router.refresh();
@@ -63,13 +64,20 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
         <DropdownMenuItem
-          onClick={() => updateBookmark({ favourited: !bookmark.favourited })}
+          onClick={() =>
+            updateBookmark({
+              bookmarkId: linkId,
+              favourited: !bookmark.favourited,
+            })
+          }
         >
           <Star className="mr-2 size-4" />
           <span>{bookmark.favourited ? "Un-favourite" : "Favourite"}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
-          onClick={() => updateBookmark({ archived: !bookmark.archived })}
+          onClick={() =>
+            updateBookmark({ bookmarkId: linkId, archived: !bookmark.archived })
+          }
         >
           <Archive className="mr-2 size-4" />
           <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
diff --git a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
index 6a9ffe1b..d7e3f1f3 100644
--- a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
@@ -1,25 +1,26 @@
 import { redirect } from "next/navigation";
 import BookmarksGrid from "./BookmarksGrid";
-import { authOptions } from "@/lib/auth";
-import { getServerSession } from "next-auth";
-import { getBookmarks } from "@/lib/services/bookmarks";
 import { ZGetBookmarksRequest } from "@/lib/types/api/bookmarks";
+import { api } from "@/server/api/client";
+import { getServerAuthSession } from "@/server/auth";
 
 export default async function Bookmarks({
   favourited,
   archived,
   title,
 }: ZGetBookmarksRequest & { title: string }) {
-  const session = await getServerSession(authOptions);
+  const session = await getServerAuthSession();
   if (!session) {
     redirect("/");
   }
-  const bookmarks = await getBookmarks(session.user.id, {
+
+  // TODO: Migrate to a server side call in trpc instead
+  const bookmarks = await api.bookmarks.getBookmarks({
     favourited,
     archived,
   });
 
-  if (bookmarks.length == 0) {
+  if (bookmarks.bookmarks.length == 0) {
     // TODO: This needs to be polished
     return (
       <>
@@ -32,7 +33,7 @@ export default async function Bookmarks({
   return (
     <>
       <div className="container pb-4 text-2xl">{title}</div>
-      <BookmarksGrid bookmarks={bookmarks} />
+      <BookmarksGrid bookmarks={bookmarks.bookmarks} />
     </>
   );
 }