refactor(BookmarkButton.tsx): remove serverAction prop and use create…

…OccurrenceBookmark and removeOccurrenceBookmark directly feat(occurrenceActions.ts): add revalidation of occurrence path when creating or removing a bookmark to keep data up to date chore(page.tsx): remove unused imports and update BookmarkButton props to match new implementation
icoretech · May 27, 2023 · bc0739a · bc0739a
1 parent 1af7008
commit bc0739a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/app/occurrences/[occurrence_id]/page.tsx b/app/occurrences/[occurrence_id]/page.tsx
@@ -1,4 +1,3 @@
-import { createOccurrenceBookmark, removeOccurrenceBookmark } from '@/app/_actions';
 import Breadcrumbs from '@/components/Breadcrumbs';
 import OccurrenceCounterLabel from '@/components/CounterLabel';
 import EnvironmentLabel from '@/components/EnvironmentLabel';
@@ -105,11 +104,7 @@ export default async function Occurrence({
                 </div>
                 <div className="ml-3">
                   <div className="flex items-center space-x-3">
-                    <BookmarkButton
-                      serverAction={isBookmarked ? removeOccurrenceBookmark : createOccurrenceBookmark}
-                      isBookmarked={isBookmarked}
-                      occurrenceId={occurrence.id}
-                    />
+                    <BookmarkButton isBookmarked={isBookmarked} occurrenceId={occurrence.id} />
 
                     <h3 className="text-sm font-semibold text-indigo-400">
                       <Link href={`/notices/${occurrence.notice_id}`}>{occurrence.notice.kind}</Link>

diff --git a/components/occurrence/BookmarkButton.tsx b/components/occurrence/BookmarkButton.tsx
@@ -1,16 +1,17 @@
 'use client';
 
+import { createOccurrenceBookmark, removeOccurrenceBookmark } from '@/app/_actions';
 import { useState } from 'react';
 import { BsBookmarkPlus, BsBookmarkStarFill } from 'react-icons/bs';
 
 interface BookmarkButtonProps {
   occurrenceId: string;
   isBookmarked: boolean;
-  serverAction: (occurrenceId: string) => Promise<void>;
 }
 
-export default function BookmarkButton({ occurrenceId, isBookmarked, serverAction }: BookmarkButtonProps) {
+export default function BookmarkButton({ occurrenceId, isBookmarked }: BookmarkButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const serverAction = isBookmarked ? removeOccurrenceBookmark : createOccurrenceBookmark;
 
   const handleToggleBookmark = () => {
     serverAction(occurrenceId);
@@ -35,7 +36,7 @@ export default function BookmarkButton({ occurrenceId, isBookmarked, serverActio
       {isBookmarked ? (
         <>
           {isHovered ? (
-            <BsBookmarkPlus className="h-5 w-5 text-indigo-400" aria-hidden="true" />
+            <BsBookmarkPlus className="h-5 w-5 text-indigo-200" aria-hidden="true" />
           ) : (
             <BsBookmarkStarFill className="h-5 w-5 text-indigo-400" aria-hidden="true" />
           )}
@@ -45,7 +46,7 @@ export default function BookmarkButton({ occurrenceId, isBookmarked, serverActio
           {isHovered ? (
             <BsBookmarkStarFill className="h-5 w-5 text-indigo-400" aria-hidden="true" />
           ) : (
-            <BsBookmarkPlus className="h-5 w-5 text-indigo-400" aria-hidden="true" />
+            <BsBookmarkPlus className="h-5 w-5 text-indigo-200" aria-hidden="true" />
           )}
         </>
       )}

diff --git a/lib/actions/occurrenceActions.ts b/lib/actions/occurrenceActions.ts
@@ -62,6 +62,7 @@ export async function createOccurrenceBookmark(occurrenceId: string) {
   });
 
   revalidatePath('/bookmarks')
+  revalidatePath(`/occurrences/${occurrenceId}`)
 }
 
 export async function removeOccurrenceBookmark(occurrenceId: string) {
@@ -77,4 +78,5 @@ export async function removeOccurrenceBookmark(occurrenceId: string) {
   });
 
   revalidatePath('/bookmarks')
+  revalidatePath(`/occurrences/${occurrenceId}`)
 }