Lift state to fix setState error

src/Components/Profile/ProfileForm.tsx

@@ -48,7 +48,7 @@ export function ProfileForm() {
     end: '',
     openCollectiveSlug: '',
     gallery: [],
-    isUpdatingGallery: false,
+    uploadingImages: [],
   })
 
   const [updatePermission, setUpdatePermission] = useState<boolean>(false)
@@ -143,7 +143,7 @@ export function ProfileForm() {
       end: item.end ?? '',
       openCollectiveSlug: item.openCollectiveSlug ?? '',
       gallery: item.gallery ?? [],
-      isUpdatingGallery: false,
+      uploadingImages: [],
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, tags, items])
@@ -158,6 +158,8 @@ export function ProfileForm() {
     }
   }, [item, layers])
 
+  const isUpdatingGallery = state.uploadingImages.length > 0
+
   return (
     <>
       <MapOverlayPage
@@ -214,7 +216,7 @@ export function ProfileForm() {
                   'tw:btn',
                   'tw:float-right',
                   { 'tw:loading': loading },
-                  { 'tw:cursor-not-allowed tw:opacity-50': loading || state.isUpdatingGallery },
+                  { 'tw:cursor-not-allowed tw:opacity-50': loading || isUpdatingGallery },
                 )}
                 type='submit'
                 style={{
@@ -222,7 +224,7 @@ export function ProfileForm() {
                   backgroundColor: `${item.color ?? (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor)}`,
                   color: '#fff',
                 }}
-                disabled={loading || state.isUpdatingGallery}
+                disabled={loading || isUpdatingGallery}
               >
                 Update
               </button>

src/Components/Profile/Subcomponents/GalleryForm.tsx

@@ -24,17 +24,14 @@ const compressionOptions = {
 export const GalleryForm = ({ state, setState }: Props) => {
   const appState = useAppState()
 
-  const [uploadingImages, setUploadingImages] = useState<File[]>([])
-
   const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
 
   const closeModal = () => setImageSelectedToDelete(null)
 
   const upload = async (acceptedFiles: File[]) => {
-    setUploadingImages((files) => [...files, ...acceptedFiles])
     setState((prevState) => ({
       ...prevState,
-      isUpdatingGallery: true,
+      uploadingImages: [...prevState.uploadingImages, ...acceptedFiles],
     }))
 
     const uploads = acceptedFiles.map(async (file) => {
@@ -51,6 +48,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
     for await (const upload of uploads) {
       setState((prevState) => ({
         ...prevState,
+        uploadingImages: prevState.uploadingImages.filter((f) => f.name !== upload.name),
         gallery: [
           ...prevState.gallery,
           {
@@ -62,19 +60,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
           },
         ],
       }))
-
-      setUploadingImages((files) => {
-        const newFiles = files.filter((f) => f.name !== upload.name)
-
-        if (newFiles.length === 0) {
-          setState((prevState) => ({
-            ...prevState,
-            isUpdatingGallery: false,
-          }))
-        }
-
-        return newFiles
-      })
     }
   }
 
@@ -92,7 +77,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
       state: 'uploaded',
     }))
     .concat(
-      uploadingImages.map((file) => ({
+      state.uploadingImages.map((file) => ({
         src: URL.createObjectURL(file),
         state: 'uploading',
       })),

src/types/FormState.d.ts

@@ -22,5 +22,5 @@ export interface FormState {
   end: string
   openCollectiveSlug: string
   gallery: GalleryItem[]
-  isUpdatingGallery: boolean
+  uploadingImages: File[]
 }