fix(striker-ui): show spinner after clicking purge/update in edit file

striker-ui/components/Files/FileEditForm.tsx

@@ -19,6 +19,8 @@ import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
 
 type FileEditProps = {
   filesOverview: FileOverviewMetadata[];
+  onEditFilesComplete?: () => void;
+  onPurgeFilesComplete?: () => void;
 };
 
 type FileToEdit = FileDetailMetadata & {
@@ -26,7 +28,18 @@ type FileToEdit = FileDetailMetadata & {
   isSelected?: boolean;
 };
 
-const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
+const FILE_EDIT_FORM_DEFAULT_PROPS = {
+  onEditFilesComplete: undefined,
+  onPurgeFilesComplete: undefined,
+};
+
+const FileEditForm = (
+  {
+    filesOverview,
+    onEditFilesComplete,
+    onPurgeFilesComplete,
+  }: FileEditProps = FILE_EDIT_FORM_DEFAULT_PROPS as FileEditProps,
+): JSX.Element => {
   const [filesToEdit, setFilesToEdit] = useState<FileToEdit[]>([]);
   const [isLoadingFilesToEdit, setIsLoadingFilesToEdit] =
     useState<boolean>(false);
@@ -60,34 +73,48 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   const editFiles: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
 
-    filesToEdit.forEach(({ fileLocations, fileName, fileType, fileUUID }) => {
-      mainAxiosInstance.put(
-        `/files/${fileUUID}`,
-        JSON.stringify({
-          fileName,
-          fileType,
-          fileLocations: fileLocations.map(
-            ({ fileLocationUUID, isFileLocationActive }) => ({
-              fileLocationUUID,
-              isFileLocationActive,
-            }),
-          ),
-        }),
-        {
-          headers: { 'Content-Type': 'application/json' },
-        },
-      );
-    });
+    setIsLoadingFilesToEdit(true);
+
+    const editPromises = filesToEdit.map(
+      ({ fileLocations, fileName, fileType, fileUUID }) =>
+        mainAxiosInstance.put(
+          `/files/${fileUUID}`,
+          JSON.stringify({
+            fileName,
+            fileType,
+            fileLocations: fileLocations.map(
+              ({ fileLocationUUID, isFileLocationActive }) => ({
+                fileLocationUUID,
+                isFileLocationActive,
+              }),
+            ),
+          }),
+          {
+            headers: { 'Content-Type': 'application/json' },
+          },
+        ),
+    );
+
+    Promise.all(editPromises)
+      .then(() => {
+        setIsLoadingFilesToEdit(false);
+      })
+      .then(onEditFilesComplete);
   };
 
   const purgeFiles: MouseEventHandler<HTMLButtonElement> = () => {
     setIsOpenConfirmPurgeDialog(false);
+    setIsLoadingFilesToEdit(true);
 
-    filesToEdit
+    const purgePromises = filesToEdit
       .filter(({ isSelected }) => isSelected)
-      .forEach(({ fileUUID }) => {
-        mainAxiosInstance.delete(`/files/${fileUUID}`);
-      });
+      .map(({ fileUUID }) => mainAxiosInstance.delete(`/files/${fileUUID}`));
+
+    Promise.all(purgePromises)
+      .then(() => {
+        setIsLoadingFilesToEdit(false);
+      })
+      .then(onPurgeFilesComplete);
   };
 
   const cancelPurge: MouseEventHandler<HTMLButtonElement> = () => {
@@ -239,4 +266,6 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   );
 };
 
+FileEditForm.defaultProps = FILE_EDIT_FORM_DEFAULT_PROPS;
+
 export default FileEditForm;

striker-ui/components/Files/Files.tsx

@@ -45,10 +45,8 @@ const MessageBox = styled(Box)({
 const Files = (): JSX.Element => {
   const [rawFilesOverview, setRawFilesOverview] = useState<string[][]>([]);
   const [fetchRawFilesError, setFetchRawFilesError] = useState<string>();
-  const [
-    isLoadingRawFilesOverview,
-    setIsLoadingRawFilesOverview,
-  ] = useState<boolean>(false);
+  const [isLoadingRawFilesOverview, setIsLoadingRawFilesOverview] =
+    useState<boolean>(false);
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
 
   const fileUploadFormEventEmitter: EventEmitter = new EventEmitter();
@@ -63,6 +61,19 @@ const Files = (): JSX.Element => {
     setIsEditMode(!isEditMode);
   };
 
+  const fetchRawFilesOverview = async () => {
+    setIsLoadingRawFilesOverview(true);
+
+    try {
+      const data = await fetchJSON<string[][]>(`${API_BASE_URL}/files`);
+      setRawFilesOverview(data);
+    } catch (fetchError) {
+      setFetchRawFilesError('Failed to get files due to a network issue.');
+    }
+
+    setIsLoadingRawFilesOverview(false);
+  };
+
   const buildFileList = (): JSX.Element => {
     let elements: JSX.Element;
     if (isLoadingRawFilesOverview) {
@@ -79,7 +90,11 @@ const Files = (): JSX.Element => {
       );
 
       elements = isEditMode ? (
-        <FileEditForm {...{ filesOverview }} />
+        <FileEditForm
+          {...{ filesOverview }}
+          onEditFilesComplete={fetchRawFilesOverview}
+          onPurgeFilesComplete={fetchRawFilesOverview}
+        />
       ) : (
         <FileList {...{ filesOverview }} />
       );
@@ -88,19 +103,6 @@ const Files = (): JSX.Element => {
     return elements;
   };
 
-  const fetchRawFilesOverview = async () => {
-    setIsLoadingRawFilesOverview(true);
-
-    try {
-      const data = await fetchJSON<string[][]>(`${API_BASE_URL}/files`);
-      setRawFilesOverview(data);
-    } catch (fetchError) {
-      setFetchRawFilesError('Failed to get files due to a network issue.');
-    }
-
-    setIsLoadingRawFilesOverview(false);
-  };
-
   useEffect(() => {
     if (!isEditMode) {
       fetchRawFilesOverview();
@@ -139,9 +141,7 @@ const Files = (): JSX.Element => {
       )}
       <FileUploadForm
         {...{ eventEmitter: fileUploadFormEventEmitter }}
-        onFileUploadComplete={() => {
-          fetchRawFilesOverview();
-        }}
+        onFileUploadComplete={fetchRawFilesOverview}
       />
       {buildFileList()}
     </Panel>