Add cache keys to photos

src/admin/AdminPhotoMenuClient.tsx

@@ -10,6 +10,7 @@ import { usePathname } from 'next/navigation';
 import { BiTrash } from 'react-icons/bi';
 import MoreMenu from '@/components/MoreMenu';
 import { useAppState } from '@/state/AppState';
+import { useSWRConfig } from 'swr';
 
 export default function AdminPhotoMenuClient({
   photo,
@@ -24,6 +25,8 @@ export default function AdminPhotoMenuClient({
   const shouldRedirectFav = isPathFavs(path) && isFav;
   const shouldRedirectDelete = pathForPhoto(photo.id) === path;
 
+  const { mutate } = useSWRConfig();
+
   return (
     isUserSignedIn
       ? <MoreMenu {...{
@@ -46,7 +49,9 @@ export default function AdminPhotoMenuClient({
             action: () => toggleFavoritePhotoAction(
               photo.id,
               shouldRedirectFav,
-            ),
+            ).then(() => {
+              if (photo.cacheKey) { mutate( photo.cacheKey ); }
+            }),             
           }, {
             label: 'Delete',
             icon: <BiTrash

src/photo/InfinitePhotoScroll.tsx

@@ -15,7 +15,7 @@ export default function InfinitePhotoScroll({
   itemsPerPage = 12,
   prefetch = true,
   triggerOnView = true,
-  debug,
+  debug = true,
 }: {
   key?: string
   initialOffset?: number
@@ -34,6 +34,7 @@ export default function InfinitePhotoScroll({
     return getPhotosAction(
       initialOffset + offset * itemsPerPage,
       itemsPerPage,
+      key,
     );
   }, [initialOffset, itemsPerPage, debug]);
 

src/photo/actions.tsx

@@ -220,5 +220,14 @@ export async function getPhotoItemsAction(query: string) {
     : [];
 }
 
-export const getPhotosAction = async (offset: number, limit: number) =>
-  getPhotosCachedCached({ offset, limit });
+export const getPhotosAction = async (
+  offset: number,
+  limit: number,
+  cacheKey: string,
+) =>
+  getPhotosCachedCached({ offset, limit }).then(photos =>
+    photos.map(photo => ({
+      ...photo,
+      cacheKey,
+    }))
+  );

src/photo/index.ts

@@ -64,6 +64,7 @@ export interface PhotoDbInsert extends PhotoExif {
   hidden?: boolean
   takenAt: string
   takenAtNaive: string
+  cacheKey?: string
 }
 
 // Raw db response
@@ -83,6 +84,7 @@ export interface Photo extends PhotoDb {
   exposureTimeFormatted?: string
   exposureCompensationFormatted?: string
   takenAtNaiveFormatted: string
+  cacheKey?: string
 }
 
 export const parsePhotoFromDb = (photoDbRaw: PhotoDb): Photo => {