Extract status colors and badges into common types and components

src/common/status-color.ts

@@ -0,0 +1,15 @@
+import { MantineColor } from "@mantine/styles";
+import { StatusType } from "../../types/status";
+
+export const getStatusTypeColor = (statusType: StatusType): MantineColor => {
+  switch (statusType) {
+    case StatusType.TODO:
+      return "gray.6"
+    case StatusType.IN_PROGRESS:
+      return "blue.8"
+    case StatusType.DONE:
+      return "green.9"
+    default:
+      return "gray.6"
+  }
+}

src/components/BacklogView/Issue/IssueCard.tsx

@@ -20,6 +20,8 @@ import { Draggable } from "react-beautiful-dnd"
 import { DetailView } from "../../DetailView/DetailView"
 import { IssueIcon } from "./IssueIcon"
 import { DeleteButton } from "./DeleteButton"
+import { StatusType } from "../../../../types/status";
+import { StoryPointsBadge } from "../../common/StoryPoints/StoryPointsBadge";
 
 export function IssueCard({
   issueKey,
@@ -34,7 +36,6 @@ export function IssueCard({
   projectId,
   ...props
 }: Issue & { index: number }) {
-  let storyPointsColor: string
   const [opened, setOpened] = useState(false)
   const queryClient = useQueryClient()
   const { ref, hovered } = useHover()
@@ -51,20 +52,6 @@ export function IssueCard({
           transition: "background-color .1s ease-in",
         }
 
-  switch (status) {
-    case "To Do":
-      storyPointsColor = "gray.6"
-      break
-    case "In Progress":
-      storyPointsColor = "blue.8"
-      break
-    case "Done":
-      storyPointsColor = "green.9"
-      break
-    default:
-      storyPointsColor = "gray.6"
-  }
-
   return (
     <>
       <Draggable key={issueKey} draggableId={issueKey} index={index}>
@@ -107,7 +94,7 @@ export function IssueCard({
                       size="sm"
                       mr={5}
                       color="blue"
-                      td={status === "Done" ? "line-through" : "none"}
+                      td={status === StatusType.DONE ? "line-through" : "none"}
                       sx={{
                         ":hover": {
                           textDecoration: "underline",
@@ -177,19 +164,8 @@ export function IssueCard({
               </Grid.Col>
               <Grid.Col span={3}>
                 <Box sx={{ alignSelf: "flex-start" }}>
-                  <Badge
-                    w="24px"
-                    p="0px"
-                    bg={
-                      storyPointsEstimate !== undefined &&
-                      storyPointsEstimate !== null
-                        ? storyPointsColor
-                        : "transparent"
-                    }
-                    variant="filled"
-                  >
-                    {storyPointsEstimate}
-                  </Badge>
+                  {storyPointsEstimate &&
+                    <StoryPointsBadge statusType={status as StatusType} storyPointsEstimate={storyPointsEstimate} />}
                 </Box>
               </Grid.Col>
             </Grid>

src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx

@@ -7,6 +7,8 @@ import {
   storyPointsAccumulator,
 } from "../helpers/backlogHelpers"
 import { DraggableIssuesWrapper } from "./DraggableIssuesWrapper"
+import {StatusType} from "../../../../types/status";
+import {StoryPointsBadge} from "../../common/StoryPoints/StoryPointsBadge";
 
 export function SprintsPanel({
   sprintsWithIssues,
@@ -77,15 +79,18 @@ function SprintAccordionControl({
           </Badge>
         )}
         <Flex gap={4} p="xs" ml="auto">
-          <Badge px="6px" color="gray.6" variant="filled" size="sm">
-            {storyPointsAccumulator(issues, "To Do")}
-          </Badge>
-          <Badge px="6px" color="blue.8" variant="filled" size="sm">
-            {storyPointsAccumulator(issues, "In Progress")}
-          </Badge>
-          <Badge px="6px" color="green.9" variant="filled" size="sm">
-            {storyPointsAccumulator(issues, "Done")}
-          </Badge>
+          <StoryPointsBadge
+            statusType={StatusType.TODO}
+            storyPointsEstimate={storyPointsAccumulator(issues, StatusType.TODO)}
+          />
+          <StoryPointsBadge
+            statusType={StatusType.IN_PROGRESS}
+            storyPointsEstimate={storyPointsAccumulator(issues, StatusType.IN_PROGRESS)}
+          />
+          <StoryPointsBadge
+            statusType={StatusType.DONE}
+            storyPointsEstimate={storyPointsAccumulator(issues, StatusType.DONE)}
+          />
         </Flex>
       </Group>
       <Text size="sm" color="gray.7">

src/components/BacklogView/helpers/backlogHelpers.ts

@@ -1,7 +1,8 @@
 import { Issue, Sprint } from "types"
 import { Dispatch, SetStateAction } from "react"
+import { StatusType } from "../../../../types/status";
 
-export const storyPointsAccumulator = (issues: Issue[], status: string) =>
+export const storyPointsAccumulator = (issues: Issue[], status: StatusType) =>
   issues.reduce((accumulator, currentValue) => {
     if (currentValue.storyPointsEstimate && currentValue.status === status) {
       return accumulator + currentValue.storyPointsEstimate

src/components/EpicDetailView/Components/ChildIssue/ChildIssueCard.tsx

@@ -19,6 +19,8 @@ import { Issue } from "../../../../../types"
 import { DetailView } from "../../../DetailView/DetailView"
 import { IssueIcon } from "../../../BacklogView/Issue/IssueIcon"
 import { DeleteButton } from "../../../BacklogView/Issue/DeleteButton"
+import { StatusType } from "../../../../../types/status";
+import { StoryPointsBadge } from "../../../common/StoryPoints/StoryPointsBadge";
 
 export function ChildIssueCard({
   issueKey,
@@ -33,7 +35,6 @@ export function ChildIssueCard({
   projectId,
   ...props
 }: Issue & { index: number }) {
-  let storyPointsColor: string
   const [opened, setOpened] = useState(false)
   const queryClient = useQueryClient()
   const { hovered } = useHover()
@@ -50,20 +51,6 @@ export function ChildIssueCard({
           transition: "background-color .1s ease-in",
         }
 
-  switch (status) {
-    case "To Do":
-      storyPointsColor = "gray.6"
-      break
-    case "In Progress":
-      storyPointsColor = "blue.8"
-      break
-    case "Done":
-      storyPointsColor = "green.9"
-      break
-    default:
-      storyPointsColor = "gray.6"
-  }
-
   return (
     <>
       <Paper onClick={() => setOpened(true)} sx={{ position: "relative" }}>
@@ -98,7 +85,7 @@ export function ChildIssueCard({
                   size="sm"
                   mr={5}
                   color="blue"
-                  td={status === "Done" ? "line-through" : "none"}
+                  td={status === StatusType.DONE ? "line-through" : "none"}
                   sx={{
                     ":hover": {
                       textDecoration: "underline",
@@ -137,18 +124,8 @@ export function ChildIssueCard({
             }}
           >
             <Box sx={{ alignSelf: "flex-start" }}>
-              <Badge
-                p="7px"
-                bg={
-                  storyPointsEstimate !== undefined &&
-                  storyPointsEstimate !== null
-                    ? storyPointsColor
-                    : "transparent"
-                }
-                variant="filled"
-              >
-                {storyPointsEstimate}
-              </Badge>
+              {storyPointsEstimate &&
+                <StoryPointsBadge statusType={status as StatusType} storyPointsEstimate={storyPointsEstimate} />}
             </Box>
           </Grid.Col>
           <Grid.Col

src/components/EpicDetailView/EpicDetailView.tsx

@@ -36,9 +36,11 @@ import {
   inProgressAccumulator,
   storyPointsAccumulator,
 } from "./helpers/storyPointsHelper"
-import { StoryPointsHoverCard } from "./Components/StoryPointsHoverCard";
+import { StoryPointsHoverCard } from "../common/StoryPoints/StoryPointsHoverCard";
 import { CommentSection } from "../DetailView/Components/CommentSection";
 import { getIssueTypes, setStatus } from "../CreateIssue/queryFunctions";
+import { StatusType } from "../../../types/status";
+import { getStatusTypeColor } from "../../common/status-color"
 
 export function EpicDetailView({
   issueKey,
@@ -131,9 +133,10 @@ export function EpicDetailView({
     },
   })
 
-  const tasksOpen = inProgressAccumulator(childIssues, "To Do")
-  const tasksInProgress = inProgressAccumulator(childIssues, "In Progress")
-  const tasksDone = inProgressAccumulator(childIssues, "Done")
+  const tasksTodo = inProgressAccumulator(childIssues, StatusType.TODO)
+  const tasksInProgress = inProgressAccumulator(childIssues, StatusType.IN_PROGRESS)
+  const tasksDone = inProgressAccumulator(childIssues, StatusType.DONE)
+  const totalTaskCount = tasksTodo + tasksInProgress + tasksDone
 
   useEffect(() => {
     resizeDivider()
@@ -186,13 +189,6 @@ export function EpicDetailView({
               radius="md"
               size={20}
               label="hello"
-              styles={{
-                label: {
-                  color: "black",
-                  fontSize: "14px",
-                  fontWeight: "normal",
-                },
-              }}
               sx={{
                 width: "400px",
                 marginRight: "5px",
@@ -201,56 +197,46 @@ export function EpicDetailView({
               }}
               sections={[
                 {
-                  value:
-                    (tasksDone / (tasksDone + tasksOpen + tasksInProgress)) *
-                    100,
-                  color: "#10df10",
+                  value: (tasksDone / totalTaskCount) * 100,
+                  color: getStatusTypeColor(StatusType.DONE),
                   label: `${tasksDone}`,
                   tooltip: `${tasksDone} Done`,
                 },
                 {
-                  value:
-                    (tasksInProgress /
-                      (tasksDone + tasksOpen + tasksInProgress)) *
-                    100,
-                  color: "#6ba5d8",
+                  value: (tasksInProgress / totalTaskCount) * 100,
+                  color: getStatusTypeColor(StatusType.IN_PROGRESS),
                   label: `${tasksInProgress}`,
                   tooltip: `${tasksInProgress} In progress`,
                 },
                 {
-                  value:
-                    (tasksOpen / (tasksDone + tasksOpen + tasksInProgress)) *
-                    100,
-                  color: "rgb(225,223,223)",
-                  label: `${tasksOpen}`,
-                  tooltip: `${tasksOpen} ToDo`,
+                  value: (tasksTodo / totalTaskCount) * 100,
+                  color: getStatusTypeColor(StatusType.TODO),
+                  label: `${tasksTodo}`,
+                  tooltip: `${tasksTodo} ToDo`,
                 },
                 {
                   value: 100,
-                  color: "rgb(225,223,223)",
+                  color: getStatusTypeColor(StatusType.TODO),
                   label: `0`,
                   tooltip: "Currently no child issues",
                 },
               ]}
             />
             <StoryPointsHoverCard
-              statusType="To Do"
-              color="gray.6"
-              count={storyPointsAccumulator(childIssues, "To Do")}
+              statusType={StatusType.TODO}
+              count={storyPointsAccumulator(childIssues, StatusType.TODO)}
             />
             <StoryPointsHoverCard
-              statusType="In Progress"
-              color="blue.8"
-              count={storyPointsAccumulator(childIssues, "In Progress")}
+              statusType={StatusType.IN_PROGRESS}
+              count={storyPointsAccumulator(childIssues, StatusType.IN_PROGRESS)}
             />
             <StoryPointsHoverCard
-              statusType="Done"
-              color="green.9"
-              count={storyPointsAccumulator(childIssues, "Done")}
+              statusType={StatusType.DONE}
+              count={storyPointsAccumulator(childIssues, StatusType.DONE)}
             />
           </Group>
 
-          <Group sx={{ marginLeft: "-10px"}} grow>
+          <Group sx={{ marginLeft: "-10px" }} grow>
             <ChildIssues issues={childIssues} />
           </Group>
         </Stack>

src/components/EpicDetailView/helpers/storyPointsHelper.ts

@@ -1,12 +1,13 @@
 import { Issue } from "../../../../types"
+import { StatusType } from "../../../../types/status";
 
-export const storyPointsAccumulator = (issues: Issue[], status: string) =>
+export const storyPointsAccumulator = (issues: Issue[], status: StatusType) =>
   issues.reduce(
     (accumulator, currentValue) => accumulator + (currentValue.status === status ? currentValue.storyPointsEstimate ?? 0 : 0) ?? 0,
     0,
   )
 
-export const inProgressAccumulator = (issues: Issue[], status: string) =>
+export const inProgressAccumulator = (issues: Issue[], status: StatusType) =>
   issues.reduce(
     (accumulator, currentValue) => accumulator + (currentValue.status === status ? 1 : 0),
     0,