Fix project workflow events from steps logic

SeedCompany · Oct 3, 2024 · e82453d · e82453d
1 parent 0f3bef4
commit e82453d
Showing 1 changed file with 64 additions and 62 deletions.
diff --git a/src/scenes/Projects/WorkflowEvents/WorkflowEventsList.tsx b/src/scenes/Projects/WorkflowEvents/WorkflowEventsList.tsx
@@ -15,6 +15,13 @@ type WorkflowEventsListProps = {
 
 export const WorkflowEventsList = forwardRef<any, WorkflowEventsListProps>(
   function WorkflowEventsList({ events, fullWidth = false, ...props }, ref) {
+    const list = events
+      .map((event, i) => ({
+        ...event,
+        from: events[i - 1]?.to ?? ProjectStepList[0]!,
+      }))
+      .reverse();
+
     return (
       <List
         {...props}
@@ -35,75 +42,70 @@ export const WorkflowEventsList = forwardRef<any, WorkflowEventsListProps>(
           ...extendSx(props.sx),
         ]}
       >
-        {events.toReversed().map((event, index, array) => {
-          const prev = index >= 1 ? array[index - 1] : null;
-          const prevStatus = prev ? prev.to : ProjectStepList[0]!;
-
-          return (
+        {list.map((event) => (
+          <Box
+            key={event.id}
+            sx={[
+              {
+                display: 'contents',
+              },
+              fullWidth &&
+                ((theme) => ({
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  gap: 1,
+                  padding: 1,
+                  borderBottom: `thin solid ${theme.palette.divider}`,
+                })),
+            ]}
+          >
+            <Box
+              sx={{
+                gridColumn: 'at',
+                // add a bit more row padding between the two
+                mr: fullWidth ? 1 : 0,
+              }}
+            >
+              {event.who.value?.__typename === 'User' && (
+                <Link to={`/users/${event.who.value.id}`} color="inherit">
+                  {event.who.value.fullName}
+                </Link>
+              )}
+              <Typography variant="subtitle2" color="text.secondary" noWrap>
+                <RelativeDateTime date={event.at} />
+              </Typography>
+            </Box>
             <Box
-              key={event.id}
               sx={[
-                {
-                  display: 'contents',
+                { display: 'contents' },
+                fullWidth && {
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  gap: 1,
                 },
-                fullWidth &&
-                  ((theme) => ({
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    alignItems: 'center',
-                    gap: 1,
-                    padding: 1,
-                    borderBottom: `thin solid ${theme.palette.divider}`,
-                  })),
               ]}
             >
-              <Box
-                sx={{
-                  gridColumn: 'at',
-                  // add a bit more row padding between the two
-                  mr: fullWidth ? 1 : 0,
-                }}
-              >
-                {event.who.value?.__typename === 'User' && (
-                  <Link to={`/users/${event.who.value.id}`} color="inherit">
-                    {event.who.value.fullName}
-                  </Link>
-                )}
-                <Typography variant="subtitle2" color="text.secondary" noWrap>
-                  <RelativeDateTime date={event.at} />
-                </Typography>
-              </Box>
-              <Box
-                sx={[
-                  { display: 'contents' },
-                  fullWidth && {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    alignItems: 'center',
-                    gap: 1,
-                  },
-                ]}
-              >
-                <TextChip sx={{ gridColumn: 'from' }}>
-                  {ProjectStepLabels[prevStatus]}
-                </TextChip>
-                <ChevronRight
-                  sx={{ gridColumn: 'arrow', flexGrow: 0 }}
-                  aria-label="transitioned to"
-                />
-                <TextChip sx={{ gridColumn: 'to' }}>
-                  {ProjectStepLabels[event.to]}
-                </TextChip>
-              </Box>
-              <Divider
-                sx={{
-                  gridColumn: '1/-1',
-                  display: fullWidth ? 'none' : undefined,
-                }}
+              <TextChip sx={{ gridColumn: 'from' }}>
+                {ProjectStepLabels[event.from]}
+              </TextChip>
+              <ChevronRight
+                sx={{ gridColumn: 'arrow', flexGrow: 0 }}
+                aria-label="transitioned to"
               />
+              <TextChip sx={{ gridColumn: 'to' }}>
+                {ProjectStepLabels[event.to]}
+              </TextChip>
             </Box>
-          );
-        })}
+            <Divider
+              sx={{
+                gridColumn: '1/-1',
+                display: fullWidth ? 'none' : undefined,
+              }}
+            />
+          </Box>
+        ))}
       </List>
     );
   }