Refactor delete photo buttons

src/admin/AdminPhotosTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Photo, deleteConfirmationTextForPhoto, titleForPhoto } from '@/photo';
+import { Photo, titleForPhoto } from '@/photo';
 import AdminTable from './AdminTable';
 import { Fragment } from 'react';
 import PhotoSmall from '@/photo/PhotoSmall';
@@ -9,13 +9,11 @@ import { pathForAdminPhotoEdit, pathForPhoto } from '@/site/paths';
 import Link from 'next/link';
 import { AiOutlineEyeInvisible } from 'react-icons/ai';
 import PhotoDate from '@/photo/PhotoDate';
-import FormWithConfirm from '@/components/FormWithConfirm';
 import EditButton from './EditButton';
-import DeleteButton from './DeleteButton';
-import { deletePhotoFormAction } from '@/photo/actions';
 import { useAppState } from '@/state/AppState';
 import { RevalidatePhoto } from '@/photo/InfinitePhotoScroll';
 import PhotoSyncButton from './PhotoSyncButton';
+import DeletePhotoButton from './DeletePhotoButton';
 
 export default function AdminPhotosTable({
   photos,
@@ -113,15 +111,10 @@ export default function AdminPhotosTable({
               shouldToast
             />
             {canDelete &&
-              <FormWithConfirm
+              <DeletePhotoButton
-                action={deletePhotoFormAction}
+                photo={photo}
-                confirmText={deleteConfirmationTextForPhoto(photo)}
+                onDelete={() => revalidatePhoto?.(photo.id, true)}
-                onSubmit={() => revalidatePhoto?.(photo.id, true)}
+              />}
-              >
-                <input type="hidden" name="id" value={photo.id} />
-                <input type="hidden" name="url" value={photo.url} />
-                <DeleteButton clearLocalState />
-              </FormWithConfirm>}
           </div>
         </Fragment>)}
     </AdminTable>

src/admin/AdminTagTable.tsx

@@ -2,7 +2,7 @@ import FormWithConfirm from '@/components/FormWithConfirm';
 import { deletePhotoTagGloballyAction } from '@/photo/actions';
 import AdminTable from '@/admin/AdminTable';
 import { Fragment } from 'react';
-import DeleteButton from '@/admin/DeleteButton';
+import DeleteFormButton from '@/admin/DeleteFormButton';
 import { photoQuantityText } from '@/photo';
 import { Tags, formatTag, sortTagsObject } from '@/tag';
 import EditButton from '@/admin/EditButton';
@@ -34,7 +34,7 @@ export default function AdminTagTable({
                 `Are you sure you want to remove "${formatTag(tag)}" from ${photoQuantityText(count, false).toLowerCase()}?`}
             >
               <input type="hidden" name="tag" value={tag} />
-              <DeleteButton clearLocalState />
+              <DeleteFormButton clearLocalState />
             </FormWithConfirm>
           </div>
         </Fragment>)}

src/admin/AdminUploadsTable.tsx

@@ -9,7 +9,7 @@ import { pathForAdminUploadUrl } from '@/site/paths';
 import AddButton from './AddButton';
 import FormWithConfirm from '@/components/FormWithConfirm';
 import { deleteBlobPhotoAction } from '@/photo/actions';
-import DeleteButton from './DeleteButton';
+import DeleteFormButton from './DeleteFormButton';
 import { UrlAddStatus } from './AdminUploadsClient';
 import ResponsiveDate from '@/components/ResponsiveDate';
 
@@ -102,7 +102,7 @@ export default function AdminUploadsTable({
                       value={url}
                       readOnly
                     />
-                    <DeleteButton />
+                    <DeleteFormButton />
                   </FormWithConfirm>
                 </>}
             </span>

src/admin/DeleteFormButton.tsx

@@ -6,7 +6,7 @@ import { clsx } from 'clsx/lite';
 import { ComponentProps, useCallback } from 'react';
 import { BiTrash } from 'react-icons/bi';
 
-export default function DeleteButton (
+export default function DeleteFormButton (
   props: ComponentProps<typeof SubmitButtonWithStatus> & {
     clearLocalState?: boolean
   }

src/admin/DeletePhotoButton.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { deleteConfirmationTextForPhoto, Photo, titleForPhoto } from '@/photo';
+import DeletePhotosButton from './DeletePhotosButton';
+import { ComponentProps } from 'react';
+
+export default function DeletePhotoButton({
+  photo,
+  ...rest
+}: {
+  photo: Photo
+} & ComponentProps<typeof DeletePhotosButton>) {
+  return (
+    <DeletePhotosButton
+      {...rest}
+      photoIds={[photo.id]}
+      confirmText={deleteConfirmationTextForPhoto(photo)}
+      toastText={`"${titleForPhoto(photo)}" deleted`}
+    />
+  );
+}

src/admin/DeletePhotosButton.tsx

@@ -3,6 +3,7 @@
 import LoaderButton from '@/components/primitives/LoaderButton';
 import { photoQuantityText } from '@/photo';
 import { deletePhotosAction } from '@/photo/actions';
+import { useAppState } from '@/state/AppState';
 import { toastSuccess, toastWarning } from '@/toast';
 import { clsx } from 'clsx/lite';
 import { ComponentProps, useState } from 'react';
@@ -11,16 +12,23 @@ import { BiTrash } from 'react-icons/bi';
 export default function DeletePhotosButton({
   photoIds = [],
   onDelete,
+  clearLocalState = true,
   className,
+  confirmText,
+  toastText,
   ...rest
 }: {
   photoIds?: string[]
   onDelete?: () => void
+  clearLocalState?: boolean
+  toastText?: string
 } & ComponentProps<typeof LoaderButton>) {
   const [isLoading, setIsLoading] = useState(false);
 
   const photosText = photoQuantityText(photoIds.length, false);
 
+  const { invalidateSwr, registerAdminUpdate } = useAppState();
+
   return (
     <LoaderButton
       {...rest}
@@ -37,12 +45,16 @@ export default function DeletePhotosButton({
       )}
       isLoading={isLoading}
       // eslint-disable-next-line max-len
-      confirmText={`Are you sure you want to delete ${photosText}? This action cannot be undone.`}
+      confirmText={confirmText ?? `Are you sure you want to delete ${photosText}? This action cannot be undone.`}
       onClick={() => {
         setIsLoading(true);
         deletePhotosAction(photoIds)
           .then(() => {
-            toastSuccess(`${photosText} deleted`);
+            toastSuccess(toastText ?? `${photosText} deleted`);
+            if (clearLocalState) {
+              invalidateSwr?.();
+              registerAdminUpdate?.();
+            }
             onDelete?.();
           })
           .catch(() => toastWarning(`Failed to delete ${photosText}`))

src/photo/actions.ts

@@ -260,14 +260,6 @@ export const deletePhotoAction = async (
     }
   });
 
-export const deletePhotoFormAction = async (formData: FormData) =>
-  runAuthenticatedAdminServerAction(() =>
-    deletePhotoAction(
-      formData.get('id') as string,
-      formData.get('url') as string,
-    )
-  );
-
 export const deletePhotoTagGloballyAction = async (formData: FormData) =>
   runAuthenticatedAdminServerAction(async () => {
     const tag = formData.get('tag') as string;