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%">
-      <Box p={1}>
-        <div
-          className={`${classes.decorator} ${
-            classes[selectDecorator(anvil.anvil_state)]
-          }`}
-        />
-      </Box>
-      <Box p={1} flexGrow={1} className={classes.anvilName}>
-        <HeaderText text={anvil?.anvil_name} />
-        <HeaderText
-          text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
-        />
-      </Box>
-      <Box p={1}>
-        <Switch checked={checked} onChange={() => setChecked(!checked)} />
-      </Box>
+      {uuid !== '' && (
+        <>
+          <Box p={1}>
+            <div
+              className={`${classes.decorator} ${
+                classes[selectDecorator(list[index].anvil_state)]
+              }`}
+            />
+          </Box>
+          <Box p={1} flexGrow={1} className={classes.anvilName}>
+            <HeaderText text={list[index].anvil_name} />
+            <HeaderText
+              text={
+                anvilState.get(list[index].anvil_state) || 'State unavailable'
+              }
+            />
+          </Box>
+          <Box p={1}>
+            <Switch checked={checked} onChange={() => setChecked(!checked)} />
+          </Box>
+        </>
+      )}
     </Box>
   );
 };