From e7c372285233f3e03db6612e70bee108d6548f76 Mon Sep 17 00:00:00 2001
From: Shivansh Saxena <112249407+ShivanshPlays@users.noreply.github.com>
Date: Fri, 8 Nov 2024 01:14:20 +0530
Subject: [PATCH] bookmarkFE: added global state and frontend  modifications to
 implement the feature (#516)

* bookmark schema and server actions

* added testing API for bookmark

* half baked

* bookmarkFE: added global state and modifications to implement the feature
---
 .../user/bookmarks/GETBYUSER_bookmark.ts      |  22 ++-
 .../(routes)/(mainNavPages)/[userId]/page.tsx |  76 +++++-----
 .../app/(routes)/(mainNavPages)/food/page.tsx |   4 +-
 .../(routes)/(mainNavPages)/for-sale/page.tsx |   1 +
 .../(routes)/(mainNavPages)/house/page.tsx    |   1 +
 scruter-nextjs/app/(routes)/layout.tsx        |   9 +-
 scruter-nextjs/components/listingCardFE.tsx   |  53 ++++++-
 .../context/UserBookmarkProvider.tsx          | 133 ++++++++++++++++++
 scruter-nextjs/lib/providers.tsx              |   1 +
 9 files changed, 246 insertions(+), 54 deletions(-)
 create mode 100644 scruter-nextjs/context/UserBookmarkProvider.tsx

diff --git a/scruter-nextjs/actions/user/bookmarks/GETBYUSER_bookmark.ts b/scruter-nextjs/actions/user/bookmarks/GETBYUSER_bookmark.ts
index b8f9637b..a28fad0c 100644
--- a/scruter-nextjs/actions/user/bookmarks/GETBYUSER_bookmark.ts
+++ b/scruter-nextjs/actions/user/bookmarks/GETBYUSER_bookmark.ts
@@ -1,22 +1,34 @@
 'use server';
 
 import prismadb from '@/lib/prismadb';
-import { Bookmark } from '@prisma/client';
+import { Bookmark, Image, Listing } from '@prisma/client';
+
+// Interface for the Bookmark with Listing and Images
+export interface BookmarkWithListing extends Bookmark {
+  listing: Listing & {
+    images: Image[]; // Assuming images is an array of strings (URLs)
+  };
+}
 
 export async function getBookmarksByUser({
   userId,
 }: {
   userId: string;
-}): Promise<{ success: boolean; error?: string; data?: Bookmark[] }> {
+}): Promise<{ success: boolean; error?: string; data?: BookmarkWithListing[] }> {
   try {
+    // Fetch bookmarks including related listing data and images
     const bookmarks = await prismadb.bookmark.findMany({
       where: { userId },
       include: {
-        listing: true, // Include related listing details
+        listing: {
+          include: {
+            images: true, // Include the images field from the listing
+          },
+        },
       },
     });
-
-    return { success: true, data: bookmarks };
+    // console.log(bookmarks)
+    return { success: true, data: bookmarks as BookmarkWithListing[] };
   } catch (error) {
     console.error('[GET_BOOKMARKS_BY_USER_ERROR]', error);
     return { success: false, error: 'Error fetching bookmarks' };
diff --git a/scruter-nextjs/app/(routes)/(mainNavPages)/[userId]/page.tsx b/scruter-nextjs/app/(routes)/(mainNavPages)/[userId]/page.tsx
index 679694e2..c7da558e 100644
--- a/scruter-nextjs/app/(routes)/(mainNavPages)/[userId]/page.tsx
+++ b/scruter-nextjs/app/(routes)/(mainNavPages)/[userId]/page.tsx
@@ -6,11 +6,14 @@ import { Bookmark, Delete, Edit, Mail, Text, Trash, User } from 'lucide-react';
 import { getuserById } from '@/actions/user/userGET';
 import toast from 'react-hot-toast';
 import { User as UserType } from '@prisma/client';
+import { useBookmark } from '@/context/UserBookmarkProvider';
 
 export default function UserProfile() {
   const { data: session } = useSession();
   const [user, setUser] = useState<UserType | null>(null);
-  const [bookmarks, setBookmarks] = useState([]);
+
+  const { bookmarks, fetchBookmarks, removeFromBookmarks, loading, error } =
+    useBookmark();
 
   useEffect(() => {
     if (session) {
@@ -29,31 +32,21 @@ export default function UserProfile() {
         }
       };
       fetchUserData();
+
+      fetchBookmarks(session.user.id);
     }
-  }, [session]);
+  }, []);
 
-  const dummyBookmarks = [
-    {
-      id: '1',
-      name: 'Spicy Fried Chicken',
-      price: 25,
-      description: 'A delicious spicy fried chicken dish',
-      images: ['/seed/food1a.jpeg'],
-    },
-    {
-      id: '2',
-      name: 'Pizza',
-      price: 15,
-      description: 'A large Pizza',
-      images: ['/seed/food2a.jpg'],
-    },
-  ];
+ 
 
-  console.log(user);
+  // if(!loading&&bookmarks.length>0){
+  //   console.log('BOOKMARKSSSSSSS' + bookmarks[0].listing);
+  // }
+  
   return (
     <div className="flex flex-col items-center py-8 px-4 md:px-10 lg:px-20">
       {/* User Info Section */}
-      {user && (
+      {user && user.id && (
         <>
           <Card className="w-full max-w-7xl p-6 mb-8 shadow-md border border-gray-200 rounded-md">
             <CardHeader className="flex items-center">
@@ -76,36 +69,42 @@ export default function UserProfile() {
               </div>
             </CardHeader>
           </Card>
-          <div className="w-full max-w-7xl">
-            <h2 className="text-2xl font-bold mb-4 flex items-center">
-              <Bookmark className="h-6 w-6 text-gray-600 mr-2" />
-              Bookmarked Listings
-            </h2>
-            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {dummyBookmarks.map(listing => (
+
+          {loading && (
+            <div>Loading Bookmarks....</div>
+          )}
+          {!loading &&  (
+            
+            <div className="w-full max-w-7xl">
+              <h2 className="text-2xl font-bold mb-4 flex items-center">
+                <Bookmark className="h-6 w-6 text-gray-600 mr-2" />
+                Bookmarked Listings
+              </h2>
+              <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {bookmarks.length>0 && bookmarks.map(bookmark => (
                 <Card
-                  key={listing.id}
+                  key={bookmark.id}
                   className="shadow-md border border-gray-200 rounded-md"
                 >
                   <CardHeader className="p-3">
                     <CardTitle className="text-lg font-semibold">
-                      {listing.name}
+                      {bookmark.listing.name}
                     </CardTitle>
                     <p className="text-sm text-gray-600 truncate">
-                      {listing.description}
+                      {bookmark.listing.description}
                     </p>
                   </CardHeader>
                   <CardContent className="p-3">
                     <img
-                      src={listing.images[0]}
+                      src={bookmark.listing.images[0].url}
                       className="h-32 w-full object-cover rounded-md mb-2"
-                      alt={listing.name}
+                      alt={bookmark.listing.name}
                     />
-                    <p className="text-gray-700 font-bold">${listing.price}</p>
+                    <p className="text-gray-700 font-bold">${bookmark.listing.price}</p>
 
-                    {/* Delete Button */}
+            
                     <button
-                      //   onClick={() => deleteBookmark(listing.id)}
+                        onClick={() => removeFromBookmarks(user.id , bookmark.listing.id)}
                       className="mt-4 bg-red-500 text-white py-1 px-3 rounded-md hover:bg-red-600 transition duration-200"
                     >
                       <Trash className="h-5 w-5" />
@@ -113,14 +112,15 @@ export default function UserProfile() {
                   </CardContent>
                 </Card>
               ))}
-            </div>
+              </div>
 
-            {dummyBookmarks.length === 0 && (
+              {bookmarks.length === 0 && (
               <p className="text-center text-gray-500 mt-4">
                 No bookmarks yet.
               </p>
             )}
-          </div>
+            </div>
+          )}
         </>
       )}
     </div>
diff --git a/scruter-nextjs/app/(routes)/(mainNavPages)/food/page.tsx b/scruter-nextjs/app/(routes)/(mainNavPages)/food/page.tsx
index bab36215..de891e3b 100644
--- a/scruter-nextjs/app/(routes)/(mainNavPages)/food/page.tsx
+++ b/scruter-nextjs/app/(routes)/(mainNavPages)/food/page.tsx
@@ -5,7 +5,6 @@ import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons'; // Import FontAwesomeIcon
 import { GetAllListing, ListingWithImages } from '@/actions/seller/listing';
-import { Listing } from '@prisma/client';
 import toast, { Toaster } from 'react-hot-toast';
 import ListingCardFE from '@/components/listingCardFE';
 
@@ -15,6 +14,8 @@ const FoodPage: React.FC = () => {
   const [query, setQuery] = useState('');
   const [sort, setSort] = useState<"" | "asc" | "desc" | undefined>('');
 
+ 
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -132,6 +133,7 @@ const FoodPage: React.FC = () => {
           ) : (
             foodItems.map(food => (
               <ListingCardFE
+                id={food.id}
                 key={food.id}
                 name={food.name}
                 price={food.price}
diff --git a/scruter-nextjs/app/(routes)/(mainNavPages)/for-sale/page.tsx b/scruter-nextjs/app/(routes)/(mainNavPages)/for-sale/page.tsx
index 2d65ad57..2c58d86b 100644
--- a/scruter-nextjs/app/(routes)/(mainNavPages)/for-sale/page.tsx
+++ b/scruter-nextjs/app/(routes)/(mainNavPages)/for-sale/page.tsx
@@ -129,6 +129,7 @@ const ForSalePage: React.FC = () => {
           ) : (
             items.map(item => (
               <ListingCardFE
+                id={item.id}
                 key={item.id}
                 name={item.name}
                 price={item.price}
diff --git a/scruter-nextjs/app/(routes)/(mainNavPages)/house/page.tsx b/scruter-nextjs/app/(routes)/(mainNavPages)/house/page.tsx
index 2b8da2b5..dcaca9dc 100644
--- a/scruter-nextjs/app/(routes)/(mainNavPages)/house/page.tsx
+++ b/scruter-nextjs/app/(routes)/(mainNavPages)/house/page.tsx
@@ -130,6 +130,7 @@ const HousePage: React.FC = () => {
           ) : (
             houses.map(house => (
               <ListingCardFE
+                id={house.id}
                 key={house.id}
                 name={house.name}
                 price={house.price}
diff --git a/scruter-nextjs/app/(routes)/layout.tsx b/scruter-nextjs/app/(routes)/layout.tsx
index 9b0cdbf6..561ac40c 100644
--- a/scruter-nextjs/app/(routes)/layout.tsx
+++ b/scruter-nextjs/app/(routes)/layout.tsx
@@ -1,5 +1,6 @@
 import Navbar from '@/components/common/navbar';
 import Footer from '@/components/common/footer';
+import { BookmarkProvider } from '@/context/UserBookmarkProvider';
 
 export default function RootLayout({
   children,
@@ -8,9 +9,11 @@ export default function RootLayout({
 }>) {
   return (
     <>
-      <Navbar />
-      {children}
-      <Footer />
+      <BookmarkProvider>
+        <Navbar />
+        {children}
+        <Footer />
+      </BookmarkProvider>
     </>
   );
 }
diff --git a/scruter-nextjs/components/listingCardFE.tsx b/scruter-nextjs/components/listingCardFE.tsx
index 359e5bf7..1c296302 100644
--- a/scruter-nextjs/components/listingCardFE.tsx
+++ b/scruter-nextjs/components/listingCardFE.tsx
@@ -1,5 +1,6 @@
 'use client';
-import React from 'react';
+
+import React, { useEffect, useState } from 'react';
 import { Image as ImageInterface } from '@prisma/client';
 import {
   Carousel,
@@ -8,22 +9,46 @@ import {
 } from '@/components/ui/carousel';
 import Image from 'next/image';
 import Autoplay from 'embla-carousel-autoplay';
-import { Button } from '@/components/ui/button'; // Importing the Button component from Shadcn
-import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { useBookmark } from '@/context/UserBookmarkProvider';
+import { useSession } from 'next-auth/react';
 
 interface ListingCardProps {
+  id: string;
   name: string;
   price: number;
   description: string;
-  images: ImageInterface[]; 
+  images: ImageInterface[];
 }
 
 const ListingCardFE: React.FC<ListingCardProps> = ({
+  id,
   name,
   price,
   description,
   images,
 }) => {
+  const { addToBookmarks, isBookmarked } = useBookmark();
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  // State to track if the listing is bookmarked
+  const [isAlreadyBookmarked, setIsAlreadyBookmarked] = useState<boolean>(false);
+
+  // Check if the listing is bookmarked when the component mounts
+  useEffect(() => {
+    const checkBookmarkStatus = async () => {
+      if (userId) {
+        const bookmarked = await isBookmarked(userId, id);
+        setIsAlreadyBookmarked(bookmarked);
+      }
+    };
+
+    if (userId && id) {
+      checkBookmarkStatus();
+    }
+  }, []); // Only rerun when userId or id changes
+
   return (
     <div className="bg-white overflow-hidden shadow-lg rounded-lg">
       <Carousel
@@ -61,9 +86,23 @@ const ListingCardFE: React.FC<ListingCardProps> = ({
           <Button variant="outline" className="text-blue-600">
             Add
           </Button>
-          <Button variant="outline" className="text-red-600">
-            Bookmark
-          </Button>
+          {userId && session.data?.user.role === 'user' && !isAlreadyBookmarked && (
+            <Button
+              onClick={() => {
+                addToBookmarks(userId, id);
+                setIsAlreadyBookmarked(true); // Update the state to reflect the bookmark status
+              }}
+              variant="outline"
+              className="text-red-600"
+            >
+              Bookmark
+            </Button>
+          )}
+          {userId && session.data?.user.role === 'user' && isAlreadyBookmarked && (
+            <Button variant="outline" className="text-green-600">
+              Bookmarked
+            </Button>
+          )}
         </div>
       </div>
     </div>
diff --git a/scruter-nextjs/context/UserBookmarkProvider.tsx b/scruter-nextjs/context/UserBookmarkProvider.tsx
new file mode 100644
index 00000000..ad405757
--- /dev/null
+++ b/scruter-nextjs/context/UserBookmarkProvider.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { createBookmark } from "@/actions/user/bookmarks/CREATE_bookmark";
+import { deleteBookmark } from "@/actions/user/bookmarks/DELETE_bookmark";
+import { checkBookmarkExists } from "@/actions/user/bookmarks/EXISTS_bookmark";
+import { BookmarkWithListing, getBookmarksByUser } from "@/actions/user/bookmarks/GETBYUSER_bookmark";
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+
+
+type BookmarkContextType = {
+  bookmarks: BookmarkWithListing[];
+  loading: boolean;
+  error: string | null;
+  fetchBookmarks: (userId: string) => Promise<void>;
+  addToBookmarks: (userId: string, listingId: string) => Promise<void>;
+  removeFromBookmarks: (userId: string, listingId: string) => Promise<void>;
+  isBookmarked: (userId: string, listingId: string) => Promise<boolean>;
+};
+
+// Create context with an initial value of null
+const BookmarkContext = createContext<BookmarkContextType | null>(null);
+
+export function BookmarkProvider({ children }: { children: React.ReactNode }) {
+  const [bookmarks, setBookmarks] = useState<BookmarkWithListing[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch all bookmarks for a specific user
+  const fetchBookmarks = async (userId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await getBookmarksByUser({ userId });
+      if (response.success) {
+        console.log(response.data)
+
+        if(!response.data){
+          return
+        }
+        setBookmarks(response.data);
+      } else {
+        setError(response.error || "Unknown error");
+      }
+    } catch (err) {
+      console.error("[BOOKMARK_FETCH_ERROR]", err);
+      setError("Error fetching bookmarks");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Add a bookmark
+  const addToBookmarks = async (userId: string, listingId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await createBookmark({ userId, listingId });
+      if (response.success && response.data) {
+        setBookmarks((prev) => [...prev, response.data as BookmarkWithListing]);
+      } else {
+        setError(response.error || "Unknown error");
+      }
+    } catch (err) {
+      console.error("[BOOKMARK_ADD_ERROR]", err);
+      setError("Error adding bookmark");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Remove a bookmark
+  const removeFromBookmarks = async (userId: string, listingId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await deleteBookmark({ userId, listingId });
+      if (response.success && response.data) {
+        setBookmarks((prev) =>
+          prev.filter((bookmark) => bookmark.listingId !== listingId)
+        );
+      } else {
+        setError(response.error || "Unknown error");
+      }
+    } catch (err) {
+      console.error("[BOOKMARK_REMOVE_ERROR]", err);
+      setError("Error removing bookmark");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Check if a bookmark exists
+  const isBookmarked = async (userId: string, listingId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await checkBookmarkExists({ userId, listingId });
+      return response.success && response.exists;
+    } catch (err) {
+      console.error("[BOOKMARK_CHECK_ERROR]", err);
+      setError("Error checking bookmark");
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <BookmarkContext.Provider
+      value={{
+        bookmarks,
+        loading,
+        error,
+        fetchBookmarks,
+        addToBookmarks,
+        removeFromBookmarks,
+        isBookmarked,
+      }}
+    >
+      {children}
+    </BookmarkContext.Provider>
+  );
+}
+
+// Custom hook for accessing the Bookmark context
+export function useBookmark() {
+  const context = useContext(BookmarkContext);
+  if (!context) {
+    throw new Error("useBookmark must be used within a BookmarkProvider");
+  }
+  return context;
+}
diff --git a/scruter-nextjs/lib/providers.tsx b/scruter-nextjs/lib/providers.tsx
index ef3b581a..be387f3c 100644
--- a/scruter-nextjs/lib/providers.tsx
+++ b/scruter-nextjs/lib/providers.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { SessionProvider } from 'next-auth/react';
 import { GlobalListingProvider } from '@/context/GlobalListingProvider';
+import { BookmarkProvider } from '@/context/UserBookmarkProvider';
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
   return (