From 3fe66c6500ab4c8fd14b3b4a85d9bfdc50306833 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 25 Nov 2022 20:11:59 -0500
Subject: [PATCH] refactor(striker-ui): repair types in Memory, Storage

---
 striker-ui/components/Memory.tsx  | 16 ++++++-----
 striker-ui/components/Storage.tsx | 47 ++++++++++++++++---------------
 striker-ui/types/AnvilMemory.d.ts |  3 +-
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/striker-ui/components/Memory.tsx b/striker-ui/components/Memory.tsx
index 45de6186..5eb996de 100644
--- a/striker-ui/components/Memory.tsx
+++ b/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%">
diff --git a/striker-ui/components/Storage.tsx b/striker-ui/components/Storage.tsx
index 7accb812..fb6bcafb 100644
--- a/striker-ui/components/Storage.tsx
+++ b/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;
diff --git a/striker-ui/types/AnvilMemory.d.ts b/striker-ui/types/AnvilMemory.d.ts
index 1f538c81..2afc6583 100644
--- a/striker-ui/types/AnvilMemory.d.ts
+++ b/striker-ui/types/AnvilMemory.d.ts
@@ -1,5 +1,6 @@
 declare type AnvilMemory = {
-  total: number;
   allocated: number;
+  free: number;
   reserved: number;
+  total: number;
 };