Wipe in-memory state after clearing cache

src/admin/ClearCacheButton.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
+import { syncCacheAction } from '@/photo/actions';
+import { useMoreComponentsState } from '@/state/MoreComponentsState';
+import { BiTrash } from 'react-icons/bi';
+
+export default function ClearCacheButton() {
+  const {
+    clearMoreComponentsState,
+  } = useMoreComponentsState();
+
+  return (
+    <form action={syncCacheAction}>
+      <SubmitButtonWithStatus
+        icon={<BiTrash />}
+        onFormSubmit={clearMoreComponentsState}
+      >
+        Clear Cache
+      </SubmitButtonWithStatus>
+    </form>
+  );
+}

src/app/admin/configuration/page.tsx

@@ -1,9 +1,7 @@
+import ClearCacheButton from '@/admin/ClearCacheButton';
 import InfoBlock from '@/components/InfoBlock';
 import SiteGrid from '@/components/SiteGrid';
-import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
-import { syncCacheAction } from '@/photo/actions';
 import SiteChecklist from '@/site/SiteChecklist';
-import { BiTrash } from 'react-icons/bi';
 
 export default async function AdminConfigurationPage() {
   return (
@@ -14,13 +12,7 @@ export default async function AdminConfigurationPage() {
             <div className="flex-grow">
               App Configuration
             </div>
-            <form action={syncCacheAction}>
-              <SubmitButtonWithStatus
-                icon={<BiTrash />}
-              >
-                Clear Cache
-              </SubmitButtonWithStatus>
-            </form>
+            <ClearCacheButton />
           </div>
           <InfoBlock>
             <SiteChecklist />

src/components/SubmitButtonWithStatus.tsx

@@ -12,6 +12,7 @@ interface Props extends HTMLProps<HTMLButtonElement> {
   spinnerColor?: SpinnerColor
   onFormStatusChange?: (pending: boolean) => void
   onFormSubmitToastMessage?: string
+  onFormSubmit?: () => void
   primary?: boolean
 }
 
@@ -21,6 +22,7 @@ export default function SubmitButtonWithStatus({
   spinnerColor,
   onFormStatusChange,
   onFormSubmitToastMessage,
+  onFormSubmit,
   children,
   disabled,
   className,
@@ -39,9 +41,10 @@ export default function SubmitButtonWithStatus({
       onFormSubmitToastMessage
     ) {
       toastSuccess(onFormSubmitToastMessage);
+      onFormSubmit?.();
     }
     pendingPrevious.current = pending;
-  }, [pending, onFormSubmitToastMessage]);
+  }, [pending, onFormSubmitToastMessage, onFormSubmit]);
 
   useEffect(() => {
     onFormStatusChange?.(pending);

src/state/MoreComponentsProvider.tsx

@@ -29,11 +29,16 @@ export default function MoreComponentsProvider({
     }));
   }, []);
 
+  const clearMoreComponentsState = useCallback(() => {
+    setState(MORE_COMPONENTS_INITIAL_STATE);
+  }, []);
+
   return (
     <MoreComponentsContext.Provider
       value={{
         state,
         setStateForKey,
+        clearMoreComponentsState,
       }}
     >
       {children}

src/state/MoreComponentsState.ts

@@ -36,6 +36,7 @@ export interface MoreComponentsContext {
     key: MoreComponentsKey,
     state: MoreComponentsStateForKeyArgument,
   ) => void
+  clearMoreComponentsState: () => void
 }
 
 export const MORE_COMPONENTS_INITIAL_STATE: MoreComponentsState = {
@@ -47,6 +48,7 @@ export const  MoreComponentsContext =
   createContext<MoreComponentsContext>({
     state: MORE_COMPONENTS_INITIAL_STATE,
     setStateForKey: () => {},
+    clearMoreComponentsState: () => {},
   });
 
 export const useMoreComponentsState = () =>