From 2c1b39fb30ab72e1699914f56d67b92e4ca0bded Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 24 Apr 2024 20:14:22 -0500 Subject: [PATCH] Clear local state when editing photos --- src/app/admin/photos/page.tsx | 6 ++++++ src/app/layout.tsx | 6 +++--- src/components/FormWithConfirm.tsx | 3 +++ src/photo/cache.ts | 2 +- src/photo/form/PhotoForm.tsx | 4 ++++ src/state/SWRConfigClient.tsx | 2 +- src/state/useSwrClear.ts | 11 +++++++++++ 7 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 src/state/useSwrClear.ts diff --git a/src/app/admin/photos/page.tsx b/src/app/admin/photos/page.tsx index dd3df34a..d562c2c9 100644 --- a/src/app/admin/photos/page.tsx +++ b/src/app/admin/photos/page.tsx @@ -34,6 +34,7 @@ import MoreComponentsFromSearchParams from import { getPhotos } from '@/services/vercel-postgres'; import PhotoDate from '@/photo/PhotoDate'; import { revalidatePath } from 'next/cache'; +import useSwrClear from '@/state/useSwrClear'; const DEBUG_PHOTO_BLOBS = false; @@ -54,6 +55,8 @@ export default async function AdminPhotosPage({ const showMorePhotos = count > photos.length; + const clearSwr = useSwrClear(); + return ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 389b0f3c..4b4d4bd4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,7 +12,7 @@ import { ThemeProvider } from 'next-themes'; import Nav from '@/site/Nav'; import Footer from '@/site/Footer'; import CommandK from '@/site/CommandK'; -import SWRConfigClient from '../state/SWRConfigClient'; +import SwrConfigClient from '../state/SwrConfigClient'; import '../site/globals.css'; import '../site/sonner.css'; @@ -73,7 +73,7 @@ export default function RootLayout({ > - +
- + diff --git a/src/components/FormWithConfirm.tsx b/src/components/FormWithConfirm.tsx index c2e542bc..07450dcc 100644 --- a/src/components/FormWithConfirm.tsx +++ b/src/components/FormWithConfirm.tsx @@ -5,10 +5,12 @@ import { ReactNode } from 'react'; export default function FormWithConfirm({ action, confirmText, + onSubmit, children, }: { action: (data: FormData) => Promise confirmText: string + onSubmit?: () => void children: ReactNode }) { return ( @@ -19,6 +21,7 @@ export default function FormWithConfirm({ e.preventDefault(); } else { e.currentTarget.requestSubmit(); + onSubmit?.(); } }} > diff --git a/src/photo/cache.ts b/src/photo/cache.ts index 1c2ccc7d..e1417ec3 100644 --- a/src/photo/cache.ts +++ b/src/photo/cache.ts @@ -119,7 +119,7 @@ export const revalidatePhoto = (photoId: string) => { // Paths revalidatePath(pathForPhoto(photoId), 'layout'); revalidatePath(PATH_ROOT); - revalidatePath(PATH_GRID); + revalidatePath(PATH_GRID); revalidatePath(PREFIX_TAG, 'layout'); revalidatePath(PREFIX_CAMERA, 'layout'); revalidatePath(PREFIX_FILM_SIMULATION, 'layout'); diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index 865b66f6..fdf3e23a 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -29,6 +29,7 @@ import Spinner from '@/components/Spinner'; import { getNextImageUrlForRequest } from '@/services/next-image'; import useDelay from '@/utility/useDelay'; import usePreventNavigation from '@/utility/usePreventNavigation'; +import useSwrClear from '@/state/useSwrClear'; const THUMBNAIL_SIZE = 300; @@ -214,6 +215,8 @@ export default function PhotoForm({ } }; + const clearSwr = useSwrClear(); + return (
{debugBlur && blurError && @@ -366,6 +369,7 @@ export default function PhotoForm({ {type === 'create' ? 'Create' : 'Update'} diff --git a/src/state/SWRConfigClient.tsx b/src/state/SWRConfigClient.tsx index 08b92a04..26142c8d 100644 --- a/src/state/SWRConfigClient.tsx +++ b/src/state/SWRConfigClient.tsx @@ -2,7 +2,7 @@ import { SWRConfig } from 'swr'; -export default function SWRConfigClient({ +export default function SwrConfigClient({ children, }: { children: React.ReactNode diff --git a/src/state/useSwrClear.ts b/src/state/useSwrClear.ts new file mode 100644 index 00000000..3cb9b7fe --- /dev/null +++ b/src/state/useSwrClear.ts @@ -0,0 +1,11 @@ +import { useCallback } from 'react'; +import { useSWRConfig } from 'swr'; + +export default function useSwrClear() { + const { mutate } = useSWRConfig(); + return useCallback(() => mutate( + _key => false, + undefined, + { revalidate: false }, + ), [mutate]); +}