refactor: use Context in the SelectedAnvil component

striker-ui/components/Anvils/SelectedAnvil.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import { Switch, Box } from '@material-ui/core';
 import { ClassNameMap } from '@material-ui/styles';
 import { makeStyles } from '@material-ui/core/styles';
 import { HeaderText } from '../Text';
 import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME';
 import anvilState from './CONSTS';
+import { AnvilContext } from '../AnvilContext';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -47,28 +48,39 @@ const selectDecorator = (
   }
 };
 
-const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
   const [checked, setChecked] = useState<boolean>(true);
 
+  const index = list.findIndex(
+    (anvil: AnvilListItem) => anvil.anvil_uuid === uuid,
+  );
+
   return (
     <Box display="flex" flexDirection="row" width="100%">
+      {uuid !== '' && (
+        <>
           <Box p={1}>
             <div
               className={`${classes.decorator} ${
-            classes[selectDecorator(anvil.anvil_state)]
+                classes[selectDecorator(list[index].anvil_state)]
               }`}
             />
           </Box>
           <Box p={1} flexGrow={1} className={classes.anvilName}>
-        <HeaderText text={anvil?.anvil_name} />
+            <HeaderText text={list[index].anvil_name} />
             <HeaderText
-          text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
+              text={
+                anvilState.get(list[index].anvil_state) || 'State unavailable'
+              }
             />
           </Box>
           <Box p={1}>
             <Switch checked={checked} onChange={() => setChecked(!checked)} />
           </Box>
+        </>
+      )}
     </Box>
   );
 };