From 0f8c2452fdc46d4a0b69902cfd402773856a106f Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 1 Apr 2021 11:14:46 -0400
Subject: [PATCH] feat: create an AnvilList component to show Anvils' status
 and allow seelction

---
 striker-ui/components/AnvilList.tsx | 35 +++++++++++++++++++++++++++++
 striker-ui/components/Anvils.tsx    |  8 +++----
 2 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 striker-ui/components/AnvilList.tsx

diff --git a/striker-ui/components/AnvilList.tsx b/striker-ui/components/AnvilList.tsx
new file mode 100644
index 00000000..ae0a3aaf
--- /dev/null
+++ b/striker-ui/components/AnvilList.tsx
@@ -0,0 +1,35 @@
+import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import Divider from '@material-ui/core/Divider';
+import { BodyText } from './Text';
+import { TEXT } from '../lib/consts/DEFAULT_THEME';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    width: '100%',
+  },
+  divider: {
+    background: TEXT,
+  },
+}));
+
+const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <List component="nav" className={classes.root} aria-label="mailbox folders">
+      <Divider className={classes.divider} />
+      {list.map((anvil) => {
+        return (
+          <ListItem button key={anvil.anvil_uuid}>
+            <BodyText text={anvil.anvil_name} />
+            <BodyText text={anvil.anvil_state} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+export default AnvilList;
diff --git a/striker-ui/components/Anvils.tsx b/striker-ui/components/Anvils.tsx
index 509d24af..ec5cf039 100644
--- a/striker-ui/components/Anvils.tsx
+++ b/striker-ui/components/Anvils.tsx
@@ -1,7 +1,8 @@
 import { Grid } from '@material-ui/core';
-import Anvil from './Anvil';
 import Panel from './Panel';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import SelectedAnvil from './SelectedAnvil';
+import AnvilList from './AnvilList';
 
 const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
   const anvils: AnvilListItem[] = [];
@@ -21,9 +22,8 @@ const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
-        {anvils.map((anvil) => (
-          <Anvil anvil={anvil} key={anvil.anvil_uuid} />
-        ))}
+        <SelectedAnvil anvil={anvils[0]} />
+        <AnvilList list={anvils} />
       </Grid>
     </Panel>
   );