Clear batch edit state when selection stops

src/admin/select/AdminBatchEditPanelClient.tsx

@@ -4,7 +4,7 @@ import LoaderButton from '@/components/primitives/LoaderButton';
 import AppGrid from '@/components/AppGrid';
 import { clsx } from 'clsx/lite';
 import { IoCloseSharp } from 'react-icons/io5';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { Tags } from '@/tag';
 import FieldsetTag from '@/tag/FieldsetTag';
 import { batchPhotoAction } from '@/photo/actions';
@@ -44,15 +44,17 @@ export default function AdminBatchEditPanelClient({
     selectAllCount,
     isPerformingSelectEdit,
     setIsPerformingSelectEdit,
+    albumTitles,
+    setAlbumTitles,
+    tags,
+    setTags,
+    tagErrorMessage,
+    setTagErrorMessage,
   } = useSelectPhotosState();
 
   const appText = useAppText();
 
-  const [albumTitles, setAlbumsTitles] = useState<string>();
   const isInAlbumMode = albumTitles !== undefined;
-
-  const [tags, setTags] = useState<string>();
-  const [tagErrorMessage, setTagErrorMessage] = useState('');
   const isInTagMode = tags !== undefined;
 
   const batchPhotoActionArguments = (
@@ -103,9 +105,9 @@ export default function AdminBatchEditPanelClient({
           className="translate-y-[0.5px]"
         />}
         onClick={() => {
-          setAlbumsTitles(undefined);
+          setAlbumTitles?.(undefined);
-          setTags(undefined);
+          setTags?.(undefined);
-          setTagErrorMessage('');
+          setTagErrorMessage?.('');
         }}
         disabled={isPerformingSelectEdit}
       />
@@ -182,14 +184,14 @@ export default function AdminBatchEditPanelClient({
         }}
       />
       <LoaderButton
-        onClick={() => setAlbumsTitles('')}
+        onClick={() => setAlbumTitles?.('')}
         disabled={isFormDisabled}
         icon={<IconAlbum size={15} className="translate-y-[1.5px]" />}
       >
         Album
       </LoaderButton>
       <LoaderButton
-        onClick={() => setTags('')}
+        onClick={() => setTags?.('')}
         disabled={isFormDisabled}
         icon={<IconTag size={15} className="translate-y-[1.5px]" />}
       >
@@ -234,7 +236,7 @@ export default function AdminBatchEditPanelClient({
               ? <FieldsetAlbum
                 albumOptions={uniqueAlbums}
                 value={albumTitles}
-                onChange={setAlbumsTitles}
+                onChange={setAlbumTitles}
                 readOnly={isPerformingSelectEdit}
                 openOnLoad
                 hideLabel
@@ -244,7 +246,7 @@ export default function AdminBatchEditPanelClient({
                   tags={tags}
                   tagOptions={uniqueTags}
                   placeholder={`Tag ${photosText} ...`}
-                  onChange={setTags}
+                  onChange={tags => setTags?.(tags)}
                   onError={setTagErrorMessage}
                   readOnly={isPerformingSelectEdit}
                   openOnLoad

src/admin/select/SelectPhotosProvider.tsx

@@ -51,6 +51,10 @@ export default function SelectPhotosProvider({
   const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
     useState(false);
 
+  const [albumTitles, setAlbumTitles] = useState<string>();
+  const [tags, setTags] = useState<string>();
+  const [tagErrorMessage, setTagErrorMessage] = useState('');
+
   const getPhotoGridElements = useCallback(() =>
     document.querySelectorAll(`[${DATA_KEY_PHOTO_GRID}=true]`)
   , []);
@@ -118,6 +122,9 @@ export default function SelectPhotosProvider({
       setIsSelectingAllPhotos(false);
       setSelectAllPhotoOptions(undefined);
       setSelectAllCount(undefined);
+      setAlbumTitles(undefined);
+      setTags(undefined);
+      setTagErrorMessage('');
     }
   }, [isSelectingPhotos, getPhotoGridElements]);
 
@@ -136,6 +143,12 @@ export default function SelectPhotosProvider({
       togglePhotoSelection,
       isPerformingSelectEdit,
       setIsPerformingSelectEdit,
+      albumTitles,
+      setAlbumTitles,
+      tags,
+      setTags,
+      tagErrorMessage,
+      setTagErrorMessage,
     }}>
       {children}
     </SelectPhotosContext.Provider>

src/admin/select/SelectPhotosState.ts

@@ -5,16 +5,22 @@ export type SelectPhotosState = {
   canCurrentPageSelectPhotos?: boolean
   isSelectingPhotos?: boolean
   isSelectingAllPhotos?: boolean
-  shouldShowSelectAll?: boolean
-  toggleIsSelectingAllPhotos?: () => void
   startSelectingPhotos?: () => void
   stopSelectingPhotos?: () => void
+  shouldShowSelectAll?: boolean
+  toggleIsSelectingAllPhotos?: () => void
   selectedPhotoIds?: string[]
   selectAllPhotoOptions?: PhotoQueryOptions
   selectAllCount?: number
   togglePhotoSelection?: (photoId: string) => void
   isPerformingSelectEdit?: boolean
   setIsPerformingSelectEdit?: Dispatch<SetStateAction<boolean>>
+  albumTitles?: string
+  setAlbumTitles?: Dispatch<SetStateAction<string | undefined>>
+  tags?: string
+  setTags?: Dispatch<SetStateAction<string | undefined>>
+  tagErrorMessage?: string
+  setTagErrorMessage?: Dispatch<SetStateAction<string>>
 };
 
 export const SelectPhotosContext = createContext<SelectPhotosState>({});