From da8b7e9db034b665396317e4a77cd296667bf23b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E5=A6=82?=
 <77052266+JiangRu1@users.noreply.github.com>
Date: Wed, 31 Jan 2024 14:09:02 +0800
Subject: [PATCH] ADM-763: [frontend] refactor: refactor component (#1008)

---
 .../Common/ReportForThreeColumns/index.tsx    | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Common/ReportForThreeColumns/index.tsx b/frontend/src/components/Common/ReportForThreeColumns/index.tsx
index 86bb94cefd..412ee59f5d 100644
--- a/frontend/src/components/Common/ReportForThreeColumns/index.tsx
+++ b/frontend/src/components/Common/ReportForThreeColumns/index.tsx
@@ -79,31 +79,40 @@ export const ReportForThreeColumns = ({
         : '';
   };
 
-  const shouldShowLoading = !errorMessage && !data;
-  const shouldShowData = !errorMessage && data;
+  const renderLoading = () => (
+    <>
+      {!errorMessage && !data && (
+        <StyledLoadingWrapper>
+          <Loading size='1.5rem' backgroundColor='transparent' />
+        </StyledLoadingWrapper>
+      )}
+    </>
+  );
+
+  const renderData = () => (
+    <>
+      {!errorMessage && data && (
+        <Table data-test-id={title} data-testid={title}>
+          <TableHead>
+            <TableRow>
+              <StyledTableCell>{fieldName}</StyledTableCell>
+              <StyledTableCell>{listName}</StyledTableCell>
+              <StyledTableCell>{`Value${getTitleUnit(title)}`}</StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>{renderRows()}</TableBody>
+        </Table>
+      )}
+    </>
+  );
 
   return (
     <>
       <Container>
         <ReportSelectionTitle>{title}</ReportSelectionTitle>
         {errorMessage && <ErrorMessagePrompt errorMessage={errorMessage} style={{ marginBottom: '1.5rem' }} />}
-        {shouldShowLoading && (
-          <StyledLoadingWrapper>
-            <Loading size='1.5rem' backgroundColor='transparent' />
-          </StyledLoadingWrapper>
-        )}
-        {shouldShowData && (
-          <Table data-test-id={title} data-testid={title}>
-            <TableHead>
-              <TableRow>
-                <StyledTableCell>{fieldName}</StyledTableCell>
-                <StyledTableCell>{listName}</StyledTableCell>
-                <StyledTableCell>{`Value${getTitleUnit(title)}`}</StyledTableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>{renderRows()}</TableBody>
-          </Table>
-        )}
+        {renderLoading()}
+        {renderData()}
       </Container>
     </>
   );