strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clear local state when editing photos

Browse Source
This commit is contained in:
Sam Becker 2024-04-24 20:14:22 -05:00
parent d20d1b5f73
commit 2c1b39fb30
7 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/admin/photos/page.tsx
View File

@ -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 (
<SiteGrid
contentMain={
@ -127,6 +130,7 @@ export default async function AdminPhotosPage({
`for "${titleForPhoto(photo)}" from source file? ` +
'This action cannot be undone.'
}
onSubmit={clearSwr}
>
<input type="hidden" name="id" value={photo.id} />
<SubmitButtonWithStatus
@ -134,11 +138,13 @@ export default async function AdminPhotosPage({
onFormSubmitToastMessage={`
"${titleForPhoto(photo)}" EXIF data synced
`}
onSubmit={clearSwr}
/>
</FormWithConfirm>
<FormWithConfirm
action={deletePhotoFormAction}
confirmText={deleteConfirmationTextForPhoto(photo)}
onSubmit={clearSwr}
>
<input type="hidden" name="id" value={photo.id} />
<input type="hidden" name="url" value={photo.url} />

6
src/app/layout.tsx
View File

@ -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({
>
<body className={ibmPlexMono.variable}>
<AppStateProvider>
<SWRConfigClient>
<SwrConfigClient>
<MoreComponentsProvider>
<ThemeProvider attribute="class">
<main className={clsx(
@ -92,7 +92,7 @@ export default function RootLayout({
<CommandK />
</ThemeProvider>
</MoreComponentsProvider>
</SWRConfigClient>
</SwrConfigClient>
<Analytics debug={false} />
<SpeedInsights debug={false} />
<PhotoEscapeHandler />

3
src/components/FormWithConfirm.tsx
View File

@ -5,10 +5,12 @@ import { ReactNode } from 'react';
export default function FormWithConfirm({
action,
confirmText,
onSubmit,
children,
}: {
action: (data: FormData) => Promise<void>
confirmText: string
onSubmit?: () => void
children: ReactNode
}) {
return (
@ -19,6 +21,7 @@ export default function FormWithConfirm({
e.preventDefault();
} else {
e.currentTarget.requestSubmit();
onSubmit?.();
}
}}
>

2
src/photo/cache.ts
View File

@ -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');

4
src/photo/form/PhotoForm.tsx
View File

@ -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 (
<div className="space-y-8 max-w-[38rem] relative">
{debugBlur && blurError &&
@ -366,6 +369,7 @@ export default function PhotoForm({
<SubmitButtonWithStatus
disabled={!canFormBeSubmitted}
onFormStatusChange={onFormStatusChange}
onSubmit={clearSwr}
primary
>
{type === 'create' ? 'Create' : 'Update'}

2
src/state/SWRConfigClient.tsx
View File

@ -2,7 +2,7 @@
import { SWRConfig } from 'swr';
export default function SWRConfigClient({
export default function SwrConfigClient({
children,
}: {
children: React.ReactNode

11
src/state/useSwrClear.ts Normal file
View File

@ -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]);
}