From 4d55ab6b91c57d8fe315f8a4f29a980fc947762e Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 8 Apr 2021 12:20:10 -0400
Subject: [PATCH] refactor: group up components to have clearer structure

---
 striker-ui/components/Anvil.tsx               | 20 -------------------
 striker-ui/components/Anvils/Anvil.tsx        | 13 ++++++++++++
 .../components/{ => Anvils}/AnvilList.tsx     |  4 ++--
 .../components/{ => Anvils}/SelectedAnvil.tsx |  2 +-
 .../{Anvils.tsx => Anvils/index.tsx}          |  4 ++--
 .../components/{ => Bars}/AllocationBar.tsx   |  2 +-
 .../components/{ => Bars}/ProgressBar.tsx     |  2 +-
 striker-ui/components/Bars/index.tsx          |  4 ++++
 striker-ui/components/CPU.tsx                 |  2 +-
 striker-ui/components/Memory.tsx              |  4 ++--
 .../components/{ => Nodes}/AnvilNode.tsx      |  8 ++++----
 .../components/{Nodes.tsx => Nodes/index.tsx} | 10 +++++-----
 striker-ui/components/SharedStorageNode.tsx   |  2 +-
 striker-ui/pages/_app.tsx                     |  2 +-
 14 files changed, 38 insertions(+), 41 deletions(-)
 delete mode 100644 striker-ui/components/Anvil.tsx
 create mode 100644 striker-ui/components/Anvils/Anvil.tsx
 rename striker-ui/components/{ => Anvils}/AnvilList.tsx (91%)
 rename striker-ui/components/{ => Anvils}/SelectedAnvil.tsx (93%)
 rename striker-ui/components/{Anvils.tsx => Anvils/index.tsx} (89%)
 rename striker-ui/components/{ => Bars}/AllocationBar.tsx (96%)
 rename striker-ui/components/{ => Bars}/ProgressBar.tsx (96%)
 create mode 100644 striker-ui/components/Bars/index.tsx
 rename striker-ui/components/{ => Nodes}/AnvilNode.tsx (89%)
 rename striker-ui/components/{Nodes.tsx => Nodes/index.tsx} (65%)

diff --git a/striker-ui/components/Anvil.tsx b/striker-ui/components/Anvil.tsx
deleted file mode 100644
index 5c49fc36..00000000
--- a/striker-ui/components/Anvil.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useState } from 'react';
-import { Switch, Grid } from '@material-ui/core';
-import { HeaderText } from './Text';
-
-const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
-  const [checked, setChecked] = useState<boolean>(true);
-  return (
-    <>
-      <Grid item xs={6}>
-        <HeaderText text={anvil.anvil_name} />
-        <HeaderText text={anvil.anvil_state || 'State unavailable'} />
-      </Grid>
-      <Grid item xs={3}>
-        <Switch checked={checked} onChange={() => setChecked(!checked)} />
-      </Grid>
-    </>
-  );
-};
-
-export default Anvil;
diff --git a/striker-ui/components/Anvils/Anvil.tsx b/striker-ui/components/Anvils/Anvil.tsx
new file mode 100644
index 00000000..5786383a
--- /dev/null
+++ b/striker-ui/components/Anvils/Anvil.tsx
@@ -0,0 +1,13 @@
+import { Grid } from '@material-ui/core';
+import { BodyText } from '../Text';
+
+const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+  return (
+    <Grid item xs={12}>
+      <BodyText text={anvil.anvil_name} />
+      <BodyText text={anvil.anvil_state || 'State unavailable'} />
+    </Grid>
+  );
+};
+
+export default Anvil;
diff --git a/striker-ui/components/AnvilList.tsx b/striker-ui/components/Anvils/AnvilList.tsx
similarity index 91%
rename from striker-ui/components/AnvilList.tsx
rename to striker-ui/components/Anvils/AnvilList.tsx
index 125cc01c..a6d3e08e 100644
--- a/striker-ui/components/AnvilList.tsx
+++ b/striker-ui/components/Anvils/AnvilList.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import { List, ListItem, ListItemText, Divider } from '@material-ui/core';
-import { TEXT } from '../lib/consts/DEFAULT_THEME';
-import { BodyText } from './Text';
+import { TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { BodyText } from '../Text';
 
 const useStyles = makeStyles(() => ({
   root: {
diff --git a/striker-ui/components/SelectedAnvil.tsx b/striker-ui/components/Anvils/SelectedAnvil.tsx
similarity index 93%
rename from striker-ui/components/SelectedAnvil.tsx
rename to striker-ui/components/Anvils/SelectedAnvil.tsx
index d04a9356..a19e2df0 100644
--- a/striker-ui/components/SelectedAnvil.tsx
+++ b/striker-ui/components/Anvils/SelectedAnvil.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Switch, Grid } from '@material-ui/core';
-import { HeaderText } from './Text';
+import { HeaderText } from '../Text';
 
 const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const [checked, setChecked] = useState<boolean>(true);
diff --git a/striker-ui/components/Anvils.tsx b/striker-ui/components/Anvils/index.tsx
similarity index 89%
rename from striker-ui/components/Anvils.tsx
rename to striker-ui/components/Anvils/index.tsx
index ec5cf039..6879b04d 100644
--- a/striker-ui/components/Anvils.tsx
+++ b/striker-ui/components/Anvils/index.tsx
@@ -1,6 +1,6 @@
 import { Grid } from '@material-ui/core';
-import Panel from './Panel';
-import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import Panel from '../Panel';
+import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import SelectedAnvil from './SelectedAnvil';
 import AnvilList from './AnvilList';
 
diff --git a/striker-ui/components/AllocationBar.tsx b/striker-ui/components/Bars/AllocationBar.tsx
similarity index 96%
rename from striker-ui/components/AllocationBar.tsx
rename to striker-ui/components/Bars/AllocationBar.tsx
index f5e3e731..9d615f94 100644
--- a/striker-ui/components/AllocationBar.tsx
+++ b/striker-ui/components/Bars/AllocationBar.tsx
@@ -5,7 +5,7 @@ import {
   RED_ON,
   BLUE,
   PANEL_BACKGROUND,
-} from '../lib/consts/DEFAULT_THEME';
+} from '../../lib/consts/DEFAULT_THEME';
 
 const breakpointWarning = 70;
 const breakpointAlert = 90;
diff --git a/striker-ui/components/ProgressBar.tsx b/striker-ui/components/Bars/ProgressBar.tsx
similarity index 96%
rename from striker-ui/components/ProgressBar.tsx
rename to striker-ui/components/Bars/ProgressBar.tsx
index 4dfbc3ce..3bf8e542 100644
--- a/striker-ui/components/ProgressBar.tsx
+++ b/striker-ui/components/Bars/ProgressBar.tsx
@@ -4,7 +4,7 @@ import {
   PURPLE_OFF,
   BLUE,
   PANEL_BACKGROUND,
-} from '../lib/consts/DEFAULT_THEME';
+} from '../../lib/consts/DEFAULT_THEME';
 
 const completed = 100;
 
diff --git a/striker-ui/components/Bars/index.tsx b/striker-ui/components/Bars/index.tsx
new file mode 100644
index 00000000..0863c898
--- /dev/null
+++ b/striker-ui/components/Bars/index.tsx
@@ -0,0 +1,4 @@
+import AllocationBar from './AllocationBar';
+import ProgressBar from './ProgressBar';
+
+export { AllocationBar, ProgressBar };
diff --git a/striker-ui/components/CPU.tsx b/striker-ui/components/CPU.tsx
index c2380cf8..3a2df3c4 100644
--- a/striker-ui/components/CPU.tsx
+++ b/striker-ui/components/CPU.tsx
@@ -1,6 +1,6 @@
 import { Grid } from '@material-ui/core';
 import Panel from './Panel';
-import AllocationBar from './AllocationBar';
+import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
diff --git a/striker-ui/components/Memory.tsx b/striker-ui/components/Memory.tsx
index faa3cacd..577bb32c 100644
--- a/striker-ui/components/Memory.tsx
+++ b/striker-ui/components/Memory.tsx
@@ -1,7 +1,7 @@
 import { Grid } from '@material-ui/core';
 import * as prettyBytes from 'pretty-bytes';
 import Panel from './Panel';
-import AllocationBar from './AllocationBar';
+import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
@@ -43,7 +43,7 @@ const Memory = ({ uuid }: { uuid: string }): JSX.Element => {
             }
           />
         </Grid>
-        <Grid item xs={6}>
+        <Grid item xs={5}>
           <BodyText
             text={`Total Memory: ${prettyBytes.default(memoryData.total, {
               binary: true,
diff --git a/striker-ui/components/AnvilNode.tsx b/striker-ui/components/Nodes/AnvilNode.tsx
similarity index 89%
rename from striker-ui/components/AnvilNode.tsx
rename to striker-ui/components/Nodes/AnvilNode.tsx
index 8b711544..be1ab692 100644
--- a/striker-ui/components/AnvilNode.tsx
+++ b/striker-ui/components/Nodes/AnvilNode.tsx
@@ -1,9 +1,9 @@
 import { Grid, Switch } from '@material-ui/core';
 
-import InnerPanel from './InnerPanel';
-import ProgressBar from './ProgressBar';
-import { BodyText } from './Text';
-import PanelHeader from './PanelHeader';
+import InnerPanel from '../InnerPanel';
+import { ProgressBar } from '../Bars';
+import { BodyText } from '../Text';
+import PanelHeader from '../PanelHeader';
 
 const AnvilNode = ({
   node,
diff --git a/striker-ui/components/Nodes.tsx b/striker-ui/components/Nodes/index.tsx
similarity index 65%
rename from striker-ui/components/Nodes.tsx
rename to striker-ui/components/Nodes/index.tsx
index 90ea9b32..793ee17e 100644
--- a/striker-ui/components/Nodes.tsx
+++ b/striker-ui/components/Nodes/index.tsx
@@ -1,7 +1,7 @@
-import Panel from './Panel';
-import Text from './Text/HeaderText';
+import Panel from '../Panel';
+import Text from '../Text/HeaderText';
 import AnvilNode from './AnvilNode';
-import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 
 const Nodes = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const { data } = PeriodicFetch<AnvilStatus>(
@@ -14,8 +14,8 @@ const Nodes = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     <Panel>
       <Text text="Nodes" />
       <AnvilNode
-        node={anvil.nodes.map((n, index) => {
-          return { ...n, ...data.nodes[index] };
+        node={anvil?.nodes.map((n, index) => {
+          return { ...n, ...data?.nodes[index] };
         })}
       />
     </Panel>
diff --git a/striker-ui/components/SharedStorageNode.tsx b/striker-ui/components/SharedStorageNode.tsx
index 65c0152d..93c11b86 100644
--- a/striker-ui/components/SharedStorageNode.tsx
+++ b/striker-ui/components/SharedStorageNode.tsx
@@ -2,7 +2,7 @@ import { Grid, Switch } from '@material-ui/core';
 import * as prettyBytes from 'pretty-bytes';
 
 import InnerPanel from './InnerPanel';
-import AllocationBar from './AllocationBar';
+import { AllocationBar } from './Bars';
 import { BodyText } from './Text';
 import PanelHeader from './PanelHeader';
 
diff --git a/striker-ui/pages/_app.tsx b/striker-ui/pages/_app.tsx
index d15ea99a..0aa0b9ba 100644
--- a/striker-ui/pages/_app.tsx
+++ b/striker-ui/pages/_app.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { AppProps } from 'next/app';
 import { ThemeProvider } from '@material-ui/core/styles';
 import theme from '../theme';
-import Header from '../components/organisms/Header';
+import Header from '../components/Header';
 import '../styles/globals.css';
 
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {