fix(striker-ui): remove progress and update file list when file upload completes

striker-ui/components/Files/FileUploadForm.tsx

@@ -15,7 +15,8 @@ import { ProgressBar } from '../Bars';
 import { BodyText } from '../Text';
 import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
 
-type FileUploadInfoProps = {
+type FileUploadFormProps = {
+  onFileUploadComplete?: () => void;
   openFilePickerEventEmitter?: EventEmitter;
 };
 
@@ -30,14 +31,16 @@ type InUploadFile = Pick<FileDetailMetadata, 'fileName'> & {
   progressValue: number;
 };
 
-const FILE_UPLOAD_INFO_DEFAULT_PROPS: Partial<FileUploadInfoProps> = {
+const FILE_UPLOAD_FORM_DEFAULT_PROPS: Partial<FileUploadFormProps> = {
+  onFileUploadComplete: undefined,
   openFilePickerEventEmitter: undefined,
 };
 
-const FileUploadInfo = (
+const FileUploadForm = (
   {
+    onFileUploadComplete,
     openFilePickerEventEmitter,
-  }: FileUploadInfoProps = FILE_UPLOAD_INFO_DEFAULT_PROPS as FileUploadInfoProps,
+  }: FileUploadFormProps = FILE_UPLOAD_FORM_DEFAULT_PROPS as FileUploadFormProps,
 ): JSX.Element => {
   const selectFileRef = useRef<HTMLInputElement>();
 
@@ -109,20 +112,26 @@ const FileUploadInfo = (
         const inUploadFile: InUploadFile = { fileName, progressValue: 0 };
         inUploadFiles.push(inUploadFile);
 
-        mainAxiosInstance.post('/files', fileFormData, {
+        mainAxiosInstance
-          headers: {
+          .post('/files', fileFormData, {
-            'Content-Type': 'multipart/form-data',
+            headers: {
-          },
+              'Content-Type': 'multipart/form-data',
-          onUploadProgress: ({ loaded, total }) => {
+            },
-            inUploadFile.progressValue = Math.round((loaded / total) * 100);
+            onUploadProgress: ({ loaded, total }) => {
-            setInUploadFiles([...inUploadFiles]);
+              inUploadFile.progressValue = Math.round((loaded / total) * 100);
+              setInUploadFiles([...inUploadFiles]);
+            },
+          })
+          .then(() => {
+            onFileUploadComplete?.call(null);
 
-            // Should probably write a onUploadFileComplete to update the file list in the parent every time a file finishes upload.
+            inUploadFiles.splice(inUploadFiles.indexOf(inUploadFile), 1);
-          },
+            setInUploadFiles([...inUploadFiles]);
-        });
+          });
       }
     }
 
+    // Clears "staging area" (selected files) and populates "in-progress area" (in-upload files).
     setSelectedFiles([]);
     setInUploadFiles([...inUploadFiles]);
   };
@@ -186,6 +195,6 @@ const FileUploadInfo = (
   );
 };
 
-FileUploadInfo.defaultProps = FILE_UPLOAD_INFO_DEFAULT_PROPS;
+FileUploadForm.defaultProps = FILE_UPLOAD_FORM_DEFAULT_PROPS;
 
-export default FileUploadInfo;
+export default FileUploadForm;

striker-ui/components/Files/Files.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, IconButton } from '@mui/material';
 import { Add as AddIcon, Edit as EditIcon } from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
@@ -7,12 +7,12 @@ import EventEmitter from 'events';
 import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
 
 import { Panel } from '../Panels';
-import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import Spinner from '../Spinner';
 import { HeaderText } from '../Text';
 import FileList from './FileList';
-import FileUploadInfo from './FileUploadInfo';
+import FileUploadForm from './FileUploadForm';
 import FileEditForm from './FileEditForm';
+import fetchJSON from '../../lib/fetchers/fetchJSON';
 
 const PREFIX = 'Files';
 
@@ -32,6 +32,11 @@ const StyledDiv = styled('div')(() => ({
 const StyledIconButton = styled(IconButton)(ICON_BUTTON_STYLE);
 
 const Files = (): JSX.Element => {
+  const [rawFilesOverview, setRawFilesOverview] = useState<string[][]>([]);
+  const [
+    isLoadingRawFilesOverview,
+    setIsLoadingRawFilesOverview,
+  ] = useState<boolean>(false);
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
 
   const openFilePickerEventEmitter: EventEmitter = new EventEmitter();
@@ -44,10 +49,7 @@ const Files = (): JSX.Element => {
     setIsEditMode(!isEditMode);
   };
 
-  const buildFileList = (
+  const buildFileList = (): JSX.Element => {
-    rawFilesOverview: string[][] = [],
-    isLoadingRawFilesOverview: boolean,
-  ): JSX.Element => {
     let elements: JSX.Element;
     if (isLoadingRawFilesOverview) {
       elements = <Spinner />;
@@ -74,13 +76,22 @@ const Files = (): JSX.Element => {
     return elements;
   };
 
-  const {
+  const fetchRawFilesOverview = async () => {
-    data: rawFilesOverview,
+    setIsLoadingRawFilesOverview(true);
-    isLoading: isLoadingRawFilesOverview,
+
-  } = PeriodicFetch<string[][]>(
+    const data = await fetchJSON<string[][]>(
-    `${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`,
+      `${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`,
-    0,
+    );
-  );
+
+    setRawFilesOverview(data);
+    setIsLoadingRawFilesOverview(false);
+  };
+
+  useEffect(() => {
+    if (!isEditMode) {
+      fetchRawFilesOverview();
+    }
+  }, [isEditMode]);
 
   return (
     <Panel>
@@ -100,10 +111,13 @@ const Files = (): JSX.Element => {
             </StyledIconButton>
           </Box>
         </Box>
-        <FileUploadInfo
+        <FileUploadForm
+          onFileUploadComplete={() => {
+            fetchRawFilesOverview();
+          }}
           openFilePickerEventEmitter={openFilePickerEventEmitter}
         />
-        {buildFileList(rawFilesOverview, isLoadingRawFilesOverview)}
+        {buildFileList()}
       </StyledDiv>
     </Panel>
   );