ADM-763: [frontend] refactor: refactor component

au-heartbeat · Jan 31, 2024 · 1ece2e3 · 1ece2e3
1 parent 7641b92
commit 1ece2e3
Showing 1 changed file with 28 additions and 19 deletions.
diff --git 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>
     </>
   );