From aeb4137c416399cec3623ca27f5a5b8eda657781 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 25 Mar 2021 16:19:14 -0400
Subject: [PATCH] refactor: restructure using new Node type for more
 flexibility in data passed to components

---
 striker-ui/components/Anvil.tsx     |  4 +---
 striker-ui/components/AnvilNode.tsx | 10 +++++++---
 striker-ui/components/Anvils.tsx    | 13 ++++++++-----
 striker-ui/components/Nodes.tsx     |  7 +++++--
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/striker-ui/components/Anvil.tsx b/striker-ui/components/Anvil.tsx
index f2c35d58..5c49fc36 100644
--- a/striker-ui/components/Anvil.tsx
+++ b/striker-ui/components/Anvil.tsx
@@ -8,9 +8,7 @@ const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     <>
       <Grid item xs={6}>
         <HeaderText text={anvil.anvil_name} />
-        <HeaderText
-          text={anvil.anvil_status?.anvil_state || 'State unavailable'}
-        />
+        <HeaderText text={anvil.anvil_state || 'State unavailable'} />
       </Grid>
       <Grid item xs={3}>
         <Switch checked={checked} onChange={() => setChecked(!checked)} />
diff --git a/striker-ui/components/AnvilNode.tsx b/striker-ui/components/AnvilNode.tsx
index b805fb17..7813fad5 100644
--- a/striker-ui/components/AnvilNode.tsx
+++ b/striker-ui/components/AnvilNode.tsx
@@ -4,17 +4,21 @@ import InnerPanel from './InnerPanel';
 import AllocationBar from './AllocationBar';
 import { BodyText } from './Text';
 
-const AnvilNode = ({ node }: { node: AnvilStatus }): JSX.Element => {
+const AnvilNode = ({
+  node,
+}: {
+  node: Array<AnvilStatusNode & AnvilListItemNode>;
+}): JSX.Element => {
   return (
     <>
       {node &&
-        node.nodes.map(
+        node.map(
           (n): JSX.Element => {
             return (
               <InnerPanel key={n.state_message}>
                 <Grid container alignItems="center" justify="space-around">
                   <Grid item xs={6}>
-                    <BodyText text="Node: an-a01n01" />
+                    <BodyText text={`Node: ${n.node_name}`} />
                   </Grid>
                   <Grid item xs={4}>
                     <Switch checked />
diff --git a/striker-ui/components/Anvils.tsx b/striker-ui/components/Anvils.tsx
index 8ee1137b..60c58f35 100644
--- a/striker-ui/components/Anvils.tsx
+++ b/striker-ui/components/Anvils.tsx
@@ -1,19 +1,22 @@
 import { Grid } from '@material-ui/core';
-import Panel from './Panel';
 import Anvil from './Anvil';
+import Panel from './Panel';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
 const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
-  let anvils: AnvilListItem[] = [];
-  if (list) anvils = list.anvils;
+  const anvils: AnvilListItem[] = [];
+  // if (list) anvils = list.anvils;
 
-  anvils.forEach((anvil: AnvilListItem) => {
+  list?.anvils.forEach((anvil: AnvilListItem) => {
     const { data } = PeriodicFetch<AnvilStatus>(
       `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_status?anvil_uuid=`,
       anvil.anvil_uuid,
     );
     /* eslint-disable no-param-reassign */
-    anvil.anvil_status = data;
+    anvils.push({
+      ...anvil,
+      anvil_state: data.anvil_state,
+    });
   });
 
   return (
diff --git a/striker-ui/components/Nodes.tsx b/striker-ui/components/Nodes.tsx
index 4ab3b16a..90ea9b32 100644
--- a/striker-ui/components/Nodes.tsx
+++ b/striker-ui/components/Nodes.tsx
@@ -9,12 +9,15 @@ const Nodes = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     anvil?.anvil_uuid,
   );
   /* eslint-disable no-param-reassign */
-  if (anvil) anvil.anvil_status = data;
 
   return (
     <Panel>
       <Text text="Nodes" />
-      <AnvilNode node={anvil?.anvil_status} />
+      <AnvilNode
+        node={anvil.nodes.map((n, index) => {
+          return { ...n, ...data.nodes[index] };
+        })}
+      />
     </Panel>
   );
 };