Added Bookmark state to the Recoil store

src/app/(main)/(pages)/bookmark/page.tsx

@@ -1,6 +1,6 @@
 import { Content, CourseContent, VideoProgress } from '@prisma/client';
 import BookmarkView from '@/components/bookmark/BookmarkView';
-import { getBookmarkDataWithContent } from '@/db/bookmark';
+import { getBookmarkData, getBookmarkDataWithContent } from '@/db/bookmark';
 
 export type TWatchHistory = VideoProgress & {
   content: Content & {
@@ -11,7 +11,7 @@ export type TWatchHistory = VideoProgress & {
 
 export default async function BookmarksPage() {
   const bookmarkData = await getBookmarkDataWithContent();
-
+  const bookmarks= await getBookmarkData();
   return (
     <main className="flex flex-col gap-4 pb-16 pt-8">
       <div className="flex flex-col justify-between gap-2 md:flex-row">
@@ -20,7 +20,7 @@ export default async function BookmarksPage() {
         </h1>
       </div>
       <div className="flex h-full flex-col gap-4 rounded-2xl py-4">
-        <BookmarkView bookmarkData={bookmarkData} />
+        <BookmarkView bookmarkData={bookmarkData} initialBookmarks={bookmarks}/>
       </div>
     </main>
   );

src/app/courses/[courseId]/layout.tsx

@@ -1,6 +1,7 @@
 import { QueryParams } from '@/actions/types';
 import { FilterContent } from '@/components/FilterContent';
 import { Sidebar } from '@/components/Sidebar';
+import { getBookmarkData } from '@/db/bookmark';
 import { getFullCourseContent } from '@/db/course';
 import { authOptions } from '@/lib/auth';
 import { getPurchases } from '@/utiles/appx';
@@ -12,7 +13,6 @@ type CheckAccessReturn = 'yes' | 'no' | 'error';
 
 const checkAccess = async (courseId: string): Promise<CheckAccessReturn> => {
   const session = await getServerSession(authOptions);
-
   if (!session?.user) {
     return 'no';
   }
@@ -37,7 +37,7 @@ const Layout = async ({
 }) => {
   const courseId = params.courseId;
   const hasAccess = await checkAccess(courseId);
-
+  const bookmarks = await getBookmarkData();
   if (hasAccess === 'no') {
     redirect('/api/auth/signin');
   }
@@ -51,7 +51,7 @@ const Layout = async ({
     <div className="relative flex min-h-screen flex-col py-24">
       <div className="flex justify-between items-center">
         <div className="2/3">
-          <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
+          <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} initialBookmarks={bookmarks}/>
         </div>
         <div>
           <FilterContent />

src/components/Sidebar.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/accordion';
 import { Play, File, X, Menu } from 'lucide-react';
 import { FullCourseContent } from '@/db/course';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
@@ -19,6 +19,8 @@ import { Button } from './ui/button';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FilterContent } from './FilterContent';
 import { selectFilter } from '@/store/atoms/filterContent';
+import { Bookmark } from '@prisma/client';
+import { bookmarksState } from '@/store/atoms/bookmark';
 const sidebarVariants = {
   open: {
     width: '100%',
@@ -37,9 +39,11 @@ const sidebarVariants = {
 export function Sidebar({
   courseId,
   fullCourseContent,
+  initialBookmarks
 }: {
   fullCourseContent: FullCourseContent[];
   courseId: string;
+  initialBookmarks:Bookmark[]
 }) {
   const pathName = usePathname();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
@@ -52,6 +56,12 @@ export function Sidebar({
   const closeSidebar = () => setSidebarOpen(false);
   const currentfilter = useRecoilValue(selectFilter);
 
+  const setBookmarks = useSetRecoilState(bookmarksState);
+
+  useEffect(() => {
+    setBookmarks(initialBookmarks); 
+  }, [initialBookmarks, setBookmarks]);
+
   const findPathToContent = useCallback(
     (
       contents: FullCourseContent[],

src/components/bookmark/BookmarkList.tsx

@@ -3,12 +3,22 @@
 import { TBookmarkWithContent } from '@/actions/bookmark/types';
 import { useRouter } from 'next/navigation';
 import { ContentCard } from '../ContentCard';
+import { useEffect } from 'react';
+import { bookmarksState } from '@/store/atoms/bookmark';
+import { useSetRecoilState } from 'recoil';
+import { Bookmark } from '@prisma/client';
 
 const BookmarkList = ({
   bookmarkData,
+  initialBookmarks
 }: {
   bookmarkData: TBookmarkWithContent[] | { error: string };
+  initialBookmarks: Bookmark[]
 }) => {
+  const setBookmarks = useSetRecoilState(bookmarksState);
+  useEffect(() => {
+    setBookmarks(initialBookmarks); 
+  }, [initialBookmarks, setBookmarks]);
   const router = useRouter();
   if ('error' in bookmarkData) {
     return (

src/components/bookmark/BookmarkView.tsx

@@ -1,11 +1,14 @@
 import BookmarkList from './BookmarkList';
 import { TBookmarkWithContent } from '@/actions/bookmark/types';
 import NoBookmark from './NoBookmark';
+import { Bookmark } from '@prisma/client';
 
 const BookmarkView = ({
   bookmarkData,
+  initialBookmarks
 }: {
   bookmarkData: TBookmarkWithContent[] | null | { error: string };
+  initialBookmarks: Bookmark[] 
 }) => {
   return (
     <>
@@ -14,7 +17,7 @@ const BookmarkView = ({
       !bookmarkData.length ? (
         <NoBookmark />
       ) : (
-        <BookmarkList bookmarkData={bookmarkData} />
+        <BookmarkList bookmarkData={bookmarkData} initialBookmarks={initialBookmarks}/>
       )}
     </>
   );

src/hooks/useBookmark.tsx

@@ -1,13 +1,17 @@
 import { Bookmark } from '@prisma/client';
-import { MouseEvent, useState } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 import { useAction } from './useAction';
 import { createBookmark, deleteBookmark } from '@/actions/bookmark';
 import { toast } from 'sonner';
 import Link from 'next/link';
+import { bookmarksState } from '@/store/atoms/bookmark';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 export const useBookmark = (bookmark: Bookmark | null, contentId: number) => {
-  const [addedBookmark, setAddedBookmark] = useState<Bookmark | null>(bookmark);
+  const bookmarks = useRecoilValue(bookmarksState); 
+  const setBookmarks = useSetRecoilState(bookmarksState);
   const [isDisabled, setIsDisabled] = useState(false);
+  const existingBookmark = bookmarks.find((b) => b.contentId === contentId) || null;
   const { execute: executeCreateBookmark } = useAction(createBookmark, {
     onSuccess: (data: Bookmark) => {
       toast(
@@ -26,7 +30,7 @@ export const useBookmark = (bookmark: Bookmark | null, contentId: number) => {
         </div>,
         { duration: 3000 },
       );
-      setAddedBookmark(data);
+      setBookmarks( (prev)=>[...prev,data])
     },
     onError: (error) => {
       toast.error(error);
@@ -40,6 +44,7 @@ export const useBookmark = (bookmark: Bookmark | null, contentId: number) => {
         </div>,
         { duration: 3000 },
       );
+      setBookmarks((prev) => prev.filter((b: { contentId: number; }) => b.contentId !== contentId)); // Remove from state
     },
     onError: (error) => {
       toast.error(error);
@@ -53,11 +58,11 @@ export const useBookmark = (bookmark: Bookmark | null, contentId: number) => {
 
     try {
       setIsDisabled(true);
-      if (addedBookmark) {
+      if (existingBookmark) {
         await executeDeleteBookmark({
-          id: addedBookmark.id,
+          id: existingBookmark.id,
         });
-        setAddedBookmark(null);
+        setBookmarks((prev) => prev.filter((b: { contentId: number; }) => b.contentId !== contentId)); // Remove from state
       } else {
         await executeCreateBookmark({
           contentId,
@@ -71,5 +76,5 @@ export const useBookmark = (bookmark: Bookmark | null, contentId: number) => {
     return false;
   };
 
-  return { addedBookmark, handleBookmark, isDisabled };
+  return { addedBookmark:existingBookmark, handleBookmark, isDisabled };
 };

src/store/atoms/bookmark.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { Bookmark } from '@prisma/client';
+
+export const bookmarksState = atom<Bookmark[] >({
+  key: 'bookmarksState',
+  default: [],
+});