refactor(striker-ui): repair types in Memory, Storage

striker-ui/components/Memory.tsx

@@ -1,25 +1,27 @@
-import { useContext } from 'react';
 import { Box } from '@mui/material';
 import * as prettyBytes from 'pretty-bytes';
+import { useContext } from 'react';
 
 import { AnvilContext } from './AnvilContext';
 import { AllocationBar } from './Bars';
-import { Panel } from './Panels';
+import { Panel, PanelHeader } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
 import Spinner from './Spinner';
 import { HeaderText, BodyText } from './Text';
 
 const Memory = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
-  const { data, isLoading } = periodicFetch<AnvilMemory>(
-    `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
-  );
 
-  const { allocated = 0, total = 0, reserved = 0 } = data ?? {};
+  const { data: { allocated = 0, reserved = 0, total = 0 } = {}, isLoading } =
+    periodicFetch<AnvilMemory>(
+      `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
+    );
 
   return (
     <Panel>
-      <HeaderText text="Memory" />
+      <PanelHeader>
+        <HeaderText text="Memory" />
+      </PanelHeader>
       {!isLoading ? (
         <>
           <Box display="flex" width="100%">

striker-ui/components/Storage.tsx

@@ -1,50 +1,53 @@
 import { Grid } from '@mui/material';
 import * as prettyBytes from 'pretty-bytes';
-import { Panel } from './Panels';
+import { useMemo } from 'react';
+
 import { AllocationBar } from './Bars';
-import { HeaderText, BodyText } from './Text';
+import { Panel } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
+import Spinner from './Spinner';
+import { HeaderText, BodyText } from './Text';
 
+// TODO: need to be removed or revised because it's likely unused.
 const Storage = ({ uuid }: { uuid: string }): JSX.Element => {
-  const { data, isLoading } = periodicFetch<AnvilMemory>(
-    `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
-  );
+  const { data: { free = 0, total = 0 } = {}, isLoading } =
+    periodicFetch<AnvilMemory>(
+      `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
+    );
 
-  const memoryData = isLoading || !data ? { total: 0, free: 0 } : data;
-
-  return (
-    <Panel>
+  const contentLayoutElement = useMemo(
+    () => (
       <Grid container alignItems="center" justifyContent="space-around">
         <Grid item xs={12}>
           <HeaderText text="Storage Resync" />
         </Grid>
         <Grid item xs={5}>
           <BodyText
-            text={`Allocated: ${prettyBytes.default(
-              memoryData.total - memoryData.free,
-              {
-                binary: true,
-              },
-            )}`}
+            text={`Allocated: ${prettyBytes.default(total - free, {
+              binary: true,
+            })}`}
           />
         </Grid>
         <Grid item xs={4}>
           <BodyText
-            text={`Free: ${prettyBytes.default(memoryData.free, {
+            text={`Free: ${prettyBytes.default(free, {
               binary: true,
             })}`}
           />
         </Grid>
         <Grid item xs={10}>
-          <AllocationBar
-            allocated={
-              ((memoryData.total - memoryData.free) / memoryData.total) * 100
-            }
-          />
+          <AllocationBar allocated={((total - free) / total) * 100} />
         </Grid>
       </Grid>
-    </Panel>
+    ),
+    [free, total],
+  );
+  const contentAreaElement = useMemo(
+    () => (isLoading ? <Spinner /> : contentLayoutElement),
+    [contentLayoutElement, isLoading],
   );
+
+  return <Panel>{contentAreaElement}</Panel>;
 };
 
 export default Storage;

striker-ui/types/AnvilMemory.d.ts

@@ -1,5 +1,6 @@
 declare type AnvilMemory = {
-  total: number;
   allocated: number;
+  free: number;
   reserved: number;
+  total: number;
 };