From 2e9a22373b14baf2d484e8f59d36be451b1652f5 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 25 Nov 2022 20:13:17 -0500
Subject: [PATCH] fix(striker-ui): simplify CPU layout

---
 striker-ui/components/CPU.tsx | 51 ++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/striker-ui/components/CPU.tsx b/striker-ui/components/CPU.tsx
index 56693e0f..526d0f58 100644
--- a/striker-ui/components/CPU.tsx
+++ b/striker-ui/components/CPU.tsx
@@ -1,37 +1,40 @@
-import { useContext } from 'react';
-import { Box } from '@mui/material';
-import { Panel } from './Panels';
-import { HeaderText, BodyText } from './Text';
-import periodicFetch from '../lib/fetchers/periodicFetch';
+import { useContext, useMemo } from 'react';
+
 import { AnvilContext } from './AnvilContext';
+import FlexBox from './FlexBox';
+import { Panel, PanelHeader } from './Panels';
+import periodicFetch from '../lib/fetchers/periodicFetch';
 import Spinner from './Spinner';
+import { HeaderText, BodyText } from './Text';
 
 const CPU = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
 
-  const { data, isLoading } = periodicFetch<AnvilCPU>(
-    `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`,
-  );
+  const { data: { allocated = 0, cores = 0, threads = 0 } = {}, isLoading } =
+    periodicFetch<AnvilCPU>(
+      `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`,
+    );
 
-  const cpuData =
-    isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data;
+  const contentAreaElement = useMemo(
+    () =>
+      isLoading ? (
+        <Spinner />
+      ) : (
+        <FlexBox spacing={0}>
+          <BodyText text={`Total Cores: ${cores}`} />
+          <BodyText text={`Total Threads: ${threads}`} />
+          <BodyText text={`Allocated Cores: ${allocated}`} />
+        </FlexBox>
+      ),
+    [allocated, cores, isLoading, threads],
+  );
 
   return (
     <Panel>
-      <HeaderText text="CPU" />
-      {!isLoading ? (
-        <>
-          <Box display="flex" width="100%">
-            <Box flexGrow={1} style={{ marginLeft: '1em', marginTop: '1em' }}>
-              <BodyText text={`Total Cores: ${cpuData.cores}`} />
-              <BodyText text={`Total Threads: ${cpuData.threads}`} />
-              <BodyText text={`Allocated Cores: ${cpuData.allocated}`} />
-            </Box>
-          </Box>
-        </>
-      ) : (
-        <Spinner />
-      )}
+      <PanelHeader>
+        <HeaderText text="CPU" />
+      </PanelHeader>
+      {contentAreaElement}
     </Panel>
   );
 };