fix(striker-ui): style file edit form and add spinner when loading data

striker-ui/components/Files/FileEditForm.tsx

@@ -6,12 +6,13 @@ import {
 } from 'react';
 import { Box, Checkbox, checkboxClasses } from '@mui/material';
 
-import { GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 
 import FileInfo from './FileInfo';
 import fetchJSON from '../../lib/fetchers/fetchJSON';
 import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
 import StyledContainedButton from './StyledContainedButton';
+import Spinner from '../Spinner';
 
 type FileEditProps = {
   filesOverview: FileOverviewMetadata[];
@@ -24,6 +25,9 @@ type FileToEdit = FileDetailMetadata & {
 
 const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   const [filesToEdit, setFilesToEdit] = useState<FileToEdit[]>([]);
+  const [isLoadingFilesToEdit, setIsLoadingFilesToEdit] = useState<boolean>(
+    false,
+  );
 
   const generateFileInfoChangeHandler = (
     fileIndex: number,
@@ -73,6 +77,8 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
   };
 
   useEffect(() => {
+    setIsLoadingFilesToEdit(true);
+
     Promise.all(
       filesOverview.map(async (fileOverview: FileOverviewMetadata) => {
         const fileToEdit: FileToEdit = {
@@ -114,53 +120,88 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
 
         return fileToEdit;
       }),
-    ).then((fetchedFilesDetail) => setFilesToEdit(fetchedFilesDetail));
+    ).then((fetchedFilesDetail) => {
+      setFilesToEdit(fetchedFilesDetail);
+      setIsLoadingFilesToEdit(false);
+    });
   }, [filesOverview]);
 
   return (
-    <form onSubmit={editFiles}>
+    <>
-      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      {isLoadingFilesToEdit ? (
-        {filesToEdit.map(
+        <Spinner />
-          ({ fileName, fileLocations, fileType, fileUUID }, fileIndex) => (
+      ) : (
-            <Box
+        <form onSubmit={editFiles}>
-              key={`file-edit-${fileUUID}`}
+          <Box
-              sx={{
+            sx={{
-                display: 'flex',
+              display: 'flex',
-                flexDirection: 'row',
+              flexDirection: 'column',
-                '& > :last-child': {
+              '& > :not(:first-child)': { marginTop: '1em' },
-                  flexGrow: 1,
+            }}
-                },
+          >
-              }}
+            {filesToEdit.map(
-            >
+              ({ fileName, fileLocations, fileType, fileUUID }, fileIndex) => (
-              <Checkbox
+                <Box
-                onChange={({ target: { checked } }) => {
+                  key={`file-edit-${fileUUID}`}
-                  filesToEdit[fileIndex].isSelected = checked;
+                  sx={{
-                }}
+                    display: 'flex',
+                    flexDirection: 'row',
+                    '& > :last-child': {
+                      flexGrow: 1,
+                    },
+                  }}
+                >
+                  <Box sx={{ marginTop: '.4em' }}>
+                    <Checkbox
+                      onChange={({ target: { checked } }) => {
+                        filesToEdit[fileIndex].isSelected = checked;
+                      }}
+                      sx={{
+                        color: GREY,
+
+                        [`&.${checkboxClasses.checked}`]: {
+                          color: TEXT,
+                        },
+                      }}
+                    />
+                  </Box>
+                  <FileInfo
+                    {...{ fileName, fileType, fileLocations }}
+                    onChange={generateFileInfoChangeHandler(fileIndex)}
+                  />
+                </Box>
+              ),
+            )}
+            {filesToEdit.length > 0 && (
+              <Box
                 sx={{
-                  color: GREY,
+                  display: 'flex',
-
+                  flexDirection: 'row',
-                  [`&.${checkboxClasses.checked}`]: {
+                  justifyContent: 'flex-end',
-                    color: TEXT,
+                  '& > :not(:last-child)': {
+                    marginRight: '.5em',
                   },
                 }}
-              />
+              >
-              <FileInfo
+                <StyledContainedButton
-                {...{ fileName, fileType, fileLocations }}
+                  onClick={purgeFiles}
-                onChange={generateFileInfoChangeHandler(fileIndex)}
+                  sx={{
-              />
+                    backgroundColor: RED,
-            </Box>
+                    color: TEXT,
-          ),
+                    '&:hover': { backgroundColor: RED },
-        )}
+                  }}
-        {filesToEdit.length > 0 && (
+                >
-          <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+                  Purge
-            <StyledContainedButton onClick={purgeFiles}>
+                </StyledContainedButton>
-              Purge
+                <StyledContainedButton type="submit">
-            </StyledContainedButton>
+                  Update
-            <StyledContainedButton type="submit">Update</StyledContainedButton>
+                </StyledContainedButton>
+              </Box>
+            )}
           </Box>
-        )}
+        </form>
-      </Box>
+      )}
-    </form>
+    </>
   );
 };
 

striker-ui/components/Files/StyledContainedButton.tsx

@@ -15,9 +15,10 @@ const StyledButton = styled(Button)({
 const StyledContainedButton = ({
   children,
   onClick,
+  sx,
   type,
 }: ButtonProps): JSX.Element => (
-  <StyledButton {...{ onClick, type }} variant="contained">
+  <StyledButton {...{ onClick, sx, type }} variant="contained">
     {children}
   </StyledButton>
 );