From b71a3825db9182d65fcf55bcf755408a2ac5bc27 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 21 Jul 2024 10:41:54 -0500
Subject: [PATCH] Refactor delete photo buttons

---
 src/admin/AdminPhotosTable.tsx                | 19 ++++++-----------
 src/admin/AdminTagTable.tsx                   |  4 ++--
 src/admin/AdminUploadsTable.tsx               |  4 ++--
 ...{DeleteButton.tsx => DeleteFormButton.tsx} |  2 +-
 src/admin/DeletePhotoButton.tsx               | 21 +++++++++++++++++++
 src/admin/DeletePhotosButton.tsx              | 16 ++++++++++++--
 src/photo/actions.ts                          |  8 -------
 7 files changed, 46 insertions(+), 28 deletions(-)
 rename src/admin/{DeleteButton.tsx => DeleteFormButton.tsx} (96%)
 create mode 100644 src/admin/DeletePhotoButton.tsx

diff --git a/src/admin/AdminPhotosTable.tsx b/src/admin/AdminPhotosTable.tsx
index 1f193a57..ee1ec308 100644
--- a/src/admin/AdminPhotosTable.tsx
+++ b/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
-                action={deletePhotoFormAction}
-                confirmText={deleteConfirmationTextForPhoto(photo)}
-                onSubmit={() => revalidatePhoto?.(photo.id, true)}
-              >
-                <input type="hidden" name="id" value={photo.id} />
-                <input type="hidden" name="url" value={photo.url} />
-                <DeleteButton clearLocalState />
-              </FormWithConfirm>}
+              <DeletePhotoButton
+                photo={photo}
+                onDelete={() => revalidatePhoto?.(photo.id, true)}
+              />}
           </div>
         </Fragment>)}
     </AdminTable>
diff --git a/src/admin/AdminTagTable.tsx b/src/admin/AdminTagTable.tsx
index e5eb7a1f..a5bdfc5d 100644
--- a/src/admin/AdminTagTable.tsx
+++ b/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>)}
diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index 66dc9af8..f33104f9 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/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>
diff --git a/src/admin/DeleteButton.tsx b/src/admin/DeleteFormButton.tsx
similarity index 96%
rename from src/admin/DeleteButton.tsx
rename to src/admin/DeleteFormButton.tsx
index 7c048beb..40ee4f2a 100644
--- a/src/admin/DeleteButton.tsx
+++ b/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
   }
diff --git a/src/admin/DeletePhotoButton.tsx b/src/admin/DeletePhotoButton.tsx
new file mode 100644
index 00000000..fb0319c0
--- /dev/null
+++ b/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`}
+    />
+  );
+}
diff --git a/src/admin/DeletePhotosButton.tsx b/src/admin/DeletePhotosButton.tsx
index 66133f2f..67422d4a 100644
--- a/src/admin/DeletePhotosButton.tsx
+++ b/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}`))
diff --git a/src/photo/actions.ts b/src/photo/actions.ts
index 35d29a21..aa5fa6e1 100644
--- a/src/photo/actions.ts
+++ b/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;