refactor(striker-ui): migrate MUI v4->5 on Files/Files

striker-ui/components/Files/Files.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
-import { Box, IconButton, Input, InputLabel } from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, IconButton, Input, InputLabel } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import { styled } from '@mui/material/styles';
 
 import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
 
@@ -10,15 +10,22 @@ import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import Spinner from '../Spinner';
 import { HeaderText } from '../Text';
 
-const useStyles = makeStyles(() => ({
-  addFileButton: ICON_BUTTON_STYLE,
-  addFileInput: {
+const PREFIX = 'Files';
+
+const classes = {
+  addFileButton: `${PREFIX}-addFileButton`,
+  addFileInput: `${PREFIX}-addFileInput`,
+};
+
+const StyledDiv = styled('div')(() => ({
+  [`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE,
+
+  [`& .${classes.addFileInput}`]: {
     display: 'none',
   },
 }));
 
 const Files = (): JSX.Element => {
-  const classes = useStyles();
   const addFileInputRef = useRef<HTMLInputElement>();
 
   const { data, isLoading } = PeriodicFetch(
@@ -32,36 +39,38 @@ const Files = (): JSX.Element => {
 
   return (
     <Panel>
-      <Box style={{ display: 'flex', width: '100%' }}>
-        <Box style={{ flexGrow: 1 }}>
-          <HeaderText text="Files" />
-        </Box>
-        <Box>
-          <form encType="multipart/form-data">
-            <InputLabel htmlFor="add-file-input">
-              <Input
-                className={classes.addFileInput}
-                id="add-file-input"
-                ref={addFileInputRef}
-                type="file"
-              />
-              <IconButton
-                className={classes.addFileButton}
-                onClick={onAddFileButtonClick}
-              >
-                <AddIcon />
-              </IconButton>
-            </InputLabel>
-          </form>
-        </Box>
-      </Box>
-      {isLoading ? (
-        <Spinner />
-      ) : (
-        <Box>
-          <span>{data}</span>
+      <StyledDiv>
+        <Box style={{ display: 'flex', width: '100%' }}>
+          <Box style={{ flexGrow: 1 }}>
+            <HeaderText text="Files" />
+          </Box>
+          <Box>
+            <form encType="multipart/form-data">
+              <InputLabel htmlFor="add-file-input">
+                <Input
+                  className={classes.addFileInput}
+                  id="add-file-input"
+                  ref={addFileInputRef}
+                  type="file"
+                />
+                <IconButton
+                  className={classes.addFileButton}
+                  onClick={onAddFileButtonClick}
+                >
+                  <AddIcon />
+                </IconButton>
+              </InputLabel>
+            </form>
+          </Box>
         </Box>
-      )}
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <Box>
+            <span>{data}</span>
+          </Box>
+        )}
+      </StyledDiv>
     </Panel>
   );
 };