From 281a504cfbf1bfbc51bb710603bce04f69c28d0c Mon Sep 17 00:00:00 2001
From: Neha <neha_h@berkeley.edu>
Date: Sun, 10 Nov 2024 21:07:29 -0800
Subject: [PATCH] [chore] refactoring

---
 components/StatusTag/index.tsx | 60 ++++++++++++++++++++--------------
 components/StatusTag/styles.ts | 16 ++++-----
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/components/StatusTag/index.tsx b/components/StatusTag/index.tsx
index 1c0ec25..61ce365 100644
--- a/components/StatusTag/index.tsx
+++ b/components/StatusTag/index.tsx
@@ -4,7 +4,12 @@ import {
   GreyDotInProgressIcon,
 } from '../../assets/Status-Tag-Icons/icons';
 import { TagText1 } from '../../styles/texts';
-import { AllTagStyles, CODTagStyles, StatusTagStyles } from './styles';
+import {
+  AllTagStyles,
+  CODTagStyles,
+  ProposedCODTagStyles,
+  StatusTagStyles,
+} from './styles';
 
 export default function StatusTag({
   projectStatus,
@@ -14,34 +19,39 @@ export default function StatusTag({
   cod: Date | undefined;
 }) {
   function convertDateToString() {
-    if (!cod) {
-      return '';
-    }
-    const res: Date = new Date(cod);
+    if (!cod) return '';
+    const res = new Date(cod);
     const year = String(res.getFullYear()).slice(-2);
     const month = String(res.getMonth() + 1).padStart(2, '0');
     const day = String(res.getDate()).padStart(2, '0');
     return `${month}.${day}.${year}`;
   }
 
-  return (
-    <div>
-      {projectStatus === 'Operational' && (
-        <StatusTagStyles>
-          <GreenDotOperationalIcon /> <TagText1>Operational</TagText1>
-        </StatusTagStyles>
-      )}
-      {projectStatus === 'Proposed' && (
-        <AllTagStyles>
-          <StatusTagStyles>
-            <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
-          </StatusTagStyles>
-          <CODTagStyles>
-            <CalendarIcon />
-            <TagText1>COD {convertDateToString()}</TagText1>
-          </CODTagStyles>
-        </AllTagStyles>
-      )}
-    </div>
-  );
+  if (projectStatus === 'Operational') {
+    return (
+      <StatusTagStyles>
+        <GreenDotOperationalIcon /> <TagText1>Operational</TagText1>
+      </StatusTagStyles>
+    );
+  }
+
+  if (projectStatus === 'Proposed') {
+    return cod ? (
+      <AllTagStyles>
+        <ProposedCODTagStyles>
+          <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
+        </ProposedCODTagStyles>
+        <CODTagStyles>
+          <CalendarIcon />
+          <TagText1>COD {convertDateToString()}</TagText1>
+        </CODTagStyles>
+      </AllTagStyles>
+    ) : (
+      <StatusTagStyles>
+        <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
+      </StatusTagStyles>
+    );
+  }
+
+  return null;
 }
diff --git a/components/StatusTag/styles.ts b/components/StatusTag/styles.ts
index 55014d6..8acbf47 100644
--- a/components/StatusTag/styles.ts
+++ b/components/StatusTag/styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const StatusTagStyles = styled.div`
+const BaseTagStyles = styled.div`
   border-radius: 6.25rem;
   border: 0.031rem solid rgba(46, 58, 89, 0.25);
   display: inline-flex;
@@ -9,6 +9,11 @@ export const StatusTagStyles = styled.div`
   align-items: center;
   flex-direction: row;
   gap: 0.25rem;
+`;
+
+export const StatusTagStyles = styled(BaseTagStyles)``;
+
+export const ProposedCODTagStyles = styled(BaseTagStyles)`
   border-left: none;
   border-top: none;
   border-bottom: none;
@@ -23,14 +28,7 @@ export const CODTagStyles = styled.div`
   white-space: nowrap;
 `;
 
-export const AllTagStyles = styled.div`
-  border-radius: 6.25rem;
-  border: 0.031rem solid rgba(46, 58, 89, 0.25);
-  display: inline-flex;
-  height: 1.375rem;
-  padding: 0.1rem 0.625rem;
+export const AllTagStyles = styled(BaseTagStyles)`
   padding-left: 0rem;
-  align-items: center;
-  flex-direction: row;
   gap: 0.375rem;
 `;