status color and name abstraction

Author: chpy04

src/frontend/src/pages/PartPage/PartPageComponents/PartDisplay.tsx

@@ -1,40 +1,18 @@
 import React from 'react';
 import { Link, Box, Typography, Grid } from '@mui/material';
-import { Review_Status } from 'shared';
 import { fullNamePipe } from '../../../utils/pipes';
 import { useSinglePart } from '../../../hooks/part-review.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { Link as RouterLink } from 'react-router-dom';
+import { getReviewStatusDisplayName, getStatusColor } from '../../../utils/part.utils';
 
 interface PartDisplayProps {
   index: number;
   wbsNum: string;
   formatStyle: 'compact' | 'standard' | 'full';
 }
 
-const getReviewStatusColor = (status: Review_Status) => {
-  return {
-    IN_PROGRESS: '#959696',
-    READY_FOR_REVIEW: '#F61517',
-    IN_REVIEW: '#F57600',
-    REVIEWED: '#3CA848',
-    APPROVED: '#D633FF',
-    default: '#535151'
-  }[status];
-};
-
-const getReviewStatusDisplayName = (status: Review_Status): string => {
-  return {
-    IN_PROGRESS: 'In Progress',
-    READY_FOR_REVIEW: 'Ready for Review',
-    IN_REVIEW: 'In Review',
-    REVIEWED: 'Reviewed',
-    APPROVED: 'Approved',
-    default: 'Unknown'
-  }[status];
-};
-
 // defined a Pill shape for the review status display
 const Pill = ({ label = '', bgColor = 'background.paper' }) => {
   return (
@@ -200,7 +178,7 @@ const PartDisplay: React.FC<PartDisplayProps> = ({ index, wbsNum, formatStyle: c
             justifyContent: 'center'
           }}
         >
-          <Pill label={getReviewStatusDisplayName(part.status)} bgColor={getReviewStatusColor(part.status)} />
+          <Pill label={getReviewStatusDisplayName(part.status)} bgColor={getStatusColor(part.status)} />
         </Grid>
       </Grid>
     </Link>

src/frontend/src/pages/PartPage/PartPageComponents/PartOverview.tsx

@@ -1,53 +1,14 @@
 import { Box, Typography, IconButton, Chip, Stack } from '@mui/material';
 import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
 import { Part, Review_Status, User } from 'shared';
-
-/**
- * gets the status color for each status case
- */
-const getReviewStatusColor = (status: Review_Status) => {
-  switch (status) {
-    case 'IN_PROGRESS':
-      return '#0000FF';
-    case 'READY_FOR_REVIEW':
-      return '#FF0000';
-    case 'IN_REVIEW':
-      return '#F57600';
-    case 'REVIEWED':
-      return '#3DA848';
-    case 'APPROVED':
-      return '#D633FF';
-    default:
-      return '#535151';
-  }
-};
-
-/**
- * converts a status to a string name format
- */
-const getReviewStatusDisplayName = (status: Review_Status) => {
-  switch (status) {
-    case 'IN_PROGRESS':
-      return 'Part In Progress';
-    case 'READY_FOR_REVIEW':
-      return 'Ready For Review';
-    case 'IN_REVIEW':
-      return 'In Review';
-    case 'REVIEWED':
-      return 'Reviewed';
-    case 'APPROVED':
-      return 'Approved';
-    default:
-      return 'N/A';
-  }
-};
+import { getReviewStatusDisplayName, getStatusColor } from '../../../utils/part.utils';
 
 const PartReviewStatusPill = (status: Review_Status) => {
   return (
     <Chip
       label={getReviewStatusDisplayName(status)}
       sx={{
-        backgroundColor: getReviewStatusColor(status),
+        backgroundColor: getStatusColor(status),
         ml: 1.5,
         width: 150
       }}

src/frontend/src/pages/PartPage/PartPageComponents/PdfDisplay.tsx

@@ -573,7 +573,7 @@ const PDFViewer: React.FC<FileDisplayProps> = ({ submission, review, hasNext, ne
                 file={pdf}
                 onLoadSuccess={({ numPages }) => {
                   setLoadSuccess(true);
-                  setNumPages(numPages);
+                  setNumPages(numPages ?? 0);
                 }}
                 onLoadError={() => {
                   setLoadSuccess(false);

src/frontend/src/utils/part.utils.ts

@@ -1,5 +1,5 @@
 import { Part, PartReview, PartReviewRequest, PartSubmission, Review_Status, User } from 'shared';
-import { yellow, blue, purple, green, grey } from '@mui/material/colors';
+import { yellow,purple, green, grey, red } from '@mui/material/colors';
 
 type HistoryEntry = [Date, string];
 
@@ -145,16 +145,27 @@ export const formatPartStatus = (status: Review_Status): string => {
 export const getStatusColor = (status: Review_Status): string => {
   switch (status) {
     case Review_Status.IN_PROGRESS:
-      return yellow[700];
+      return grey[600];
     case Review_Status.READY_FOR_REVIEW:
-      return blue[600];
+      return red[600];
     case Review_Status.IN_REVIEW:
-      return purple[600];
+      return yellow[700];
     case Review_Status.REVIEWED:
       return green[600];
     case Review_Status.APPROVED:
-      return green[800];
+      return purple[600];
     default:
       return grey[600];
   }
 };
+
+export const getReviewStatusDisplayName = (status: Review_Status): string => {
+  return {
+    IN_PROGRESS: 'In Progress',
+    READY_FOR_REVIEW: 'Ready for Review',
+    IN_REVIEW: 'In Review',
+    REVIEWED: 'Reviewed',
+    APPROVED: 'Approved',
+    default: 'Unknown'
+  }[status];
+};