From 07014e579a431538fc1fa0aeb8cca71b6d143326 Mon Sep 17 00:00:00 2001
From: William Harris <will_harris@tsco.org>
Date: Thu, 28 Sep 2023 17:10:10 -0700
Subject: [PATCH] refactored based on Carsons comments

---
 .../StatusHistory/WorkflowEventList.tsx       | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx b/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
index 5e1e330546..bbb15327cb 100644
--- a/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
+++ b/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
@@ -1,7 +1,10 @@
 import { ArrowForwardRounded as ArrowRightIcon } from '@mui/icons-material';
 import { Box, Card, Divider, Stack, Typography } from '@mui/material';
 import { Fragment } from 'react';
-import { ProgressReportStatusLabels as StatusLabels } from '~/api/schema/enumLists';
+import {
+  ProgressReportStatusLabels as StatusLabels,
+  ProgressReportStatusList as StatusList,
+} from '~/api/schema/enumLists';
 import { RelativeDateTime } from '~/components/Formatters';
 import { RichTextView } from '~/components/RichText';
 import { WorkflowEventFragment } from '../Detail/WorkflowEvent.graphql';
@@ -19,7 +22,13 @@ export const WorkFlowEventList = ({
     return null;
   }
 
-  const reversedEvents = [...events].reverse();
+  const list = events
+    .map((event, i) => ({
+      ...event,
+      prevStatus: StatusLabels[events[i - 1]?.status ?? StatusList[0]!],
+      status: StatusLabels[event.status],
+    }))
+    .reverse();
 
   return (
     <Stack
@@ -39,10 +48,10 @@ export const WorkFlowEventList = ({
         containerType: 'inline-size',
       }}
     >
-      {reversedEvents.map((event: WorkflowEventFragment, i: number) => (
+      {list.map((event) => (
         <Fragment key={event.id}>
           <Typography variant="h4" gridColumn="from" whiteSpace="nowrap">
-            {StatusLabels[reversedEvents[i + 1]?.status ?? 'NotStarted']}
+            {event.prevStatus}
           </Typography>
           <ArrowRightIcon
             fontSize="small"
@@ -50,7 +59,7 @@ export const WorkFlowEventList = ({
             aria-label="transitioned to"
           />
           <Typography variant="h4" gridColumn="to" whiteSpace="nowrap">
-            {StatusLabels[event.status]}
+            {event.status}
           </Typography>
           <Typography
             variant="caption"