refactor: group up components to have clearer structure

striker-ui/components/Anvil.tsx

@@ -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;

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;

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 { TEXT } from '../../lib/consts/DEFAULT_THEME';
-import { BodyText } from './Text';
+import { BodyText } from '../Text';
 
 const useStyles = makeStyles(() => ({
   root: {

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);

striker-ui/components/Anvils/index.tsx

@@ -1,6 +1,6 @@
 import { Grid } from '@material-ui/core';
-import Panel from './Panel';
+import Panel from '../Panel';
-import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import SelectedAnvil from './SelectedAnvil';
 import AnvilList from './AnvilList';
 

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;

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;
 

striker-ui/components/Bars/index.tsx

@@ -0,0 +1,4 @@
+import AllocationBar from './AllocationBar';
+import ProgressBar from './ProgressBar';
+
+export { AllocationBar, ProgressBar };

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';
 

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,

striker-ui/components/Nodes/AnvilNode.tsx

@@ -1,9 +1,9 @@
 import { Grid, Switch } from '@material-ui/core';
 
-import InnerPanel from './InnerPanel';
+import InnerPanel from '../InnerPanel';
-import ProgressBar from './ProgressBar';
+import { ProgressBar } from '../Bars';
-import { BodyText } from './Text';
+import { BodyText } from '../Text';
-import PanelHeader from './PanelHeader';
+import PanelHeader from '../PanelHeader';
 
 const AnvilNode = ({
   node,

striker-ui/components/Nodes/index.tsx

@@ -1,7 +1,7 @@
-import Panel from './Panel';
+import Panel from '../Panel';
-import Text from './Text/HeaderText';
+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) => {
+        node={anvil?.nodes.map((n, index) => {
-          return { ...n, ...data.nodes[index] };
+          return { ...n, ...data?.nodes[index] };
         })}
       />
     </Panel>

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';
 

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 => {