From 737c8598d371ae9d0d019481ecbeb3168c0e2403 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 13 May 2022 13:51:43 -0400
Subject: [PATCH] fix(striker-ui): avoid crash in Memory when returned data is
 incomplete

---
 striker-ui/components/Memory.tsx | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/striker-ui/components/Memory.tsx b/striker-ui/components/Memory.tsx
index 6c3d85cb..45de6186 100644
--- a/striker-ui/components/Memory.tsx
+++ b/striker-ui/components/Memory.tsx
@@ -1,12 +1,13 @@
 import { useContext } from 'react';
 import { Box } from '@mui/material';
 import * as prettyBytes from 'pretty-bytes';
-import { Panel } from './Panels';
+
+import { AnvilContext } from './AnvilContext';
 import { AllocationBar } from './Bars';
-import { HeaderText, BodyText } from './Text';
+import { Panel } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
-import { AnvilContext } from './AnvilContext';
 import Spinner from './Spinner';
+import { HeaderText, BodyText } from './Text';
 
 const Memory = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
@@ -14,46 +15,39 @@ const Memory = (): JSX.Element => {
     `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
   );
 
-  const memoryData =
-    isLoading || !data ? { total: 0, allocated: 0, reserved: 0 } : data;
+  const { allocated = 0, total = 0, reserved = 0 } = data ?? {};
 
   return (
     <Panel>
       <HeaderText text="Memory" />
       {!isLoading ? (
         <>
-          {' '}
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
               <BodyText
-                text={`Allocated: ${prettyBytes.default(memoryData.allocated, {
+                text={`Allocated: ${prettyBytes.default(allocated, {
                   binary: true,
                 })}`}
               />
             </Box>
             <Box>
               <BodyText
-                text={`Free: ${prettyBytes.default(
-                  memoryData.total - memoryData.allocated,
-                  {
-                    binary: true,
-                  },
-                )}`}
+                text={`Free: ${prettyBytes.default(total - allocated, {
+                  binary: true,
+                })}`}
               />
             </Box>
           </Box>
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
-              <AllocationBar
-                allocated={(memoryData.allocated / memoryData.total) * 100}
-              />
+              <AllocationBar allocated={(allocated / total) * 100} />
             </Box>
           </Box>
           <Box display="flex" justifyContent="center" width="100%">
             <BodyText
-              text={`Total: ${prettyBytes.default(memoryData.total, {
+              text={`Total: ${prettyBytes.default(total, {
                 binary: true,
-              })} | Reserved: ${prettyBytes.default(memoryData.reserved, {
+              })} | Reserved: ${prettyBytes.default(reserved, {
                 binary: true,
               })}`}
             />