feat: use PeriodicFetch to get anvils data

striker-ui/components/Anvils.tsx

@@ -3,8 +3,11 @@ import { Switch, Grid } from '@material-ui/core';
 import Panel from './Panel';
 import { HeaderText, BodyText } from './Text';
 
-const Anvils = (): JSX.Element => {
+const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
   const [checked, setChecked] = useState<boolean>(true);
+  let anvils: AnvilListItem[] = [];
+  if (list) anvils = list.anvils;
+
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
@@ -12,7 +15,9 @@ const Anvils = (): JSX.Element => {
           <HeaderText text="Anvils" />
         </Grid>
         <Grid item xs={4}>
-          <BodyText text="Anvil 4" />
+          <BodyText
+            text={anvils.length > 0 ? anvils[0].anvil_name : 'Anvil 1'}
+          />
           <BodyText text="Optimal" />
         </Grid>
         <Grid item xs={3}>

striker-ui/pages/index.tsx

@@ -7,8 +7,7 @@ import CPU from '../components/CPU';
 import SharedStorage from '../components/SharedStorage';
 import ReplicatedStorage from '../components/ReplicatedStorage';
 import Memory from '../components/Memory';
-
-import 'typeface-roboto-condensed';
+import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
 const useStyles = makeStyles(() => ({
   grid: {
@@ -19,6 +18,11 @@ const useStyles = makeStyles(() => ({
 const Home = (): JSX.Element => {
   const classes = useStyles();
 
+  const { data } = PeriodicFetch<AnvilList>(
+    'http://localhost:8080',
+    '/anvils/get_anvils',
+  );
+
   return (
     <Grid container alignItems="center" justify="space-around">
       <Grid item xs={3}>
@@ -28,7 +32,7 @@ const Home = (): JSX.Element => {
           direction="column"
           className={classes.grid}
         >
-          <Anvils />
+          <Anvils list={data} />
           <Nodes />
         </Grid>
       </Grid>
@@ -59,41 +63,3 @@ const Home = (): JSX.Element => {
 };
 
 export default Home;
-
-/*
-  return (
-    <Grid container alignItems="center" justify="space-around">
-      <Grid item xs={3}>
-        <Grid container justify="flex-start" direction="column">
-          <Anvils />
-          <Nodes />
-        </Grid>
-      </Grid>
-      <Grid item xs={5}>
-        <ReplicatedStorage />
-      </Grid>
-      <Grid item xs={3}>
-        <SharedStorage />
-        <CPU />
-        <Memory />
-      </Grid>
-    </Grid>
-  );
-
-    <>
-      <div>
-        <Grid container justify="flex-start" direction="column">
-          <Anvils />
-          <Nodes />
-        </Grid>
-      </div>
-      <Grid container justify="flex-start" direction="column">
-        <ReplicatedStorage />
-      </Grid>
-      <Grid container justify="flex-start" direction="column">
-        <SharedStorage />
-        <CPU />
-        <Memory />
-      </Grid>
-    </>
-  */