From faabafd96fe4b9d1367d72f5f608d819e9125554 Mon Sep 17 00:00:00 2001
From: Nazire <restinpeacejonsnow@gmail.com>
Date: Wed, 15 May 2024 14:44:28 +0300
Subject: [PATCH] added bookmarks page

---
 frontend/src/routes/bookmarks.tsx | 49 +++++++++++++++++++++++++++++++
 frontend/src/routes/index.tsx     |  5 ++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/routes/bookmarks.tsx

diff --git a/frontend/src/routes/bookmarks.tsx b/frontend/src/routes/bookmarks.tsx
new file mode 100644
index 00000000..a364412b
--- /dev/null
+++ b/frontend/src/routes/bookmarks.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Recipe } from "../components/Recipe";
+import { FullscreenLoading } from "../components/FullscreenLoading";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { AlertCircle, Filter } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useGetMe } from "../services/api/semanticBrowseComponents";
+import { renderError } from "../services/api/semanticBrowseFetcher";
+
+// Inside the Bookmarks component
+export const Bookmarks = () => {
+  const navigate = useNavigate();
+  const { data: bookmarksData, isLoading, error } = useGetMe({});
+
+  if (isLoading) {
+    return <FullscreenLoading overlay />;
+  }
+
+  if (error) {
+    return (
+      <div className="container flex flex-col gap-2 py-8">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{renderError(error)}</AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container flex flex-col gap-2 py-8">
+      <div className="mt-4 flex justify-between items-center">
+      <h1 className="text-2xl font-bold text-center">Bookmarks</h1>
+        <p>{bookmarksData?.data?.bookmarks && (
+            <span className="text-gray-500"> {bookmarksData.data?.bookmarks.length} recipes</span>
+            )}</p>
+      </div>
+      <div className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        {bookmarksData?.data?.bookmarks?.map((recipe) => (
+          <Recipe
+            key={recipe.id}
+            recipe={recipe}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 8b0abdf1..5a3e88e5 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -6,6 +6,7 @@ import { signout } from "../services/auth";
 import { Search } from "./search";
 import { Feed } from "./feed";
 import { NavbarLayout } from "../components/NavbarLayout";
+import { Bookmarks } from "./bookmarks";
 
 export const routes: RouteObject[] = [
   {
@@ -24,6 +25,10 @@ export const routes: RouteObject[] = [
     path: "/feed",
     Component: Feed,
   },
+  {
+    path: "/bookmarks",
+    Component: Bookmarks,
+  },
   {
     index: true,
     Component: IndexRoute,