Update submission status bar based on role/status

Making the SubmissionStatusBar a hook allows its return value to be
checked for null. If it were a component, the parent (in this case Map),
would need to determine whether or not it should render. This would
involve repeating much of the logic that already exists in theS
SubmissionStatusBar.

src/app/src/components/Submissions/Detail/Map.js

@@ -20,21 +20,27 @@ import { useMapLayer } from '../../../hooks';
 import { downloadData, getBoundaryShapeFilename } from '../../../utils';
 
 export default function Map({ boundary, startReview }) {
+    const StatusBar = useSubmissionStatusBar(boundary);
+
     return (
         <>
             <MapContainer
                 center={MAP_CENTER}
                 zoom={MAP_INITIAL_ZOOM}
                 zoomControl={false}
-                style={{ height: 'calc(100% - var(--chakra-sizes-12))' }}
+                style={{
+                    height: StatusBar
+                        ? 'calc(100% - var(--chakra-sizes-12))'
+                        : '100%',
+                }}
             >
                 <MapPanes>
                     <DefaultBasemap />
                     <MapButtons boundary={boundary} startReview={startReview} />
                     <Polygon shape={boundary.submission.shape} />
                 </MapPanes>
             </MapContainer>
-            <SubmissionStatusBar status={boundary.status} />
+            {StatusBar}
         </>
     );
 }
@@ -43,19 +49,21 @@ function MapButtons({ boundary, startReview }) {
     const navigate = useNavigate();
     const userRole = useSelector(state => state.auth.user.role);
 
-    const canEditDraft =
+    const canEdit =
         userRole === ROLES.CONTRIBUTOR || userRole === ROLES.ADMINISTRATOR;
     const canReview =
         userRole === ROLES.VALIDATOR || userRole === ROLES.ADMINISTRATOR;
 
     const getDrawButtonText = () => {
         switch (boundary.status) {
             case BOUNDARY_STATUS.DRAFT:
-                return canEditDraft ? 'Edit boundary' : null;
+                return canEdit ? 'Edit boundary' : null;
             case BOUNDARY_STATUS.SUBMITTED:
                 return canReview ? 'Start review' : null;
             case BOUNDARY_STATUS.IN_REVIEW:
                 return canReview ? 'Continue review' : null;
+            case BOUNDARY_STATUS.NEEDS_REVISIONS:
+                return canEdit ? 'Revise boundary' : null;
             default:
                 return null;
         }
@@ -66,7 +74,8 @@ function MapButtons({ boundary, startReview }) {
     const getDrawButtonOnClick = () => {
         switch (boundary.status) {
             case BOUNDARY_STATUS.DRAFT:
-                return canEditDraft ? goToDrawPage : null;
+            case BOUNDARY_STATUS.NEEDS_REVISIONS:
+                return canEdit ? goToDrawPage : null;
             case BOUNDARY_STATUS.SUBMITTED:
                 return canReview
                     ? () => startReview(boundary.id).unwrap().then(goToDrawPage)
@@ -128,31 +137,76 @@ function MapButton({ icon, children, onClick }) {
     );
 }
 
-function SubmissionStatusBar({ status }) {
+function useSubmissionStatusBar(boundary) {
+    const userRole = useSelector(state => state.auth.user.role);
+
+    if (userRole === ROLES.VALIDATOR) {
+        return null;
+    }
+
+    if (userRole === ROLES.VALIDATOR) {
+        return null;
+    }
+
     const getDetailText = () => {
-        switch (status) {
-            case BOUNDARY_STATUS.DRAFT:
-                return 'This map is a draft.';
+        switch (boundary.status) {
+            case BOUNDARY_STATUS.SUBMITTED:
+                return 'Your map will be reviewed.';
+            case BOUNDARY_STATUS.IN_REVIEW:
+                return 'Your map is being reviewed.';
+            case BOUNDARY_STATUS.NEEDS_REVISIONS:
+                return getReviewDetailText(boundary.submission.review);
+            case BOUNDARY_STATUS.APPROVED:
+                return 'Your map has been approved and added to the system.';
+            default:
+                return null;
+        }
+    };
+
+    const getReviewDetailText = review => {
+        const commentCount = review.annotations.length;
+
+        if (commentCount === 1) {
+            return 'There is one comment on your map.';
+        }
+
+        if (commentCount > 1) {
+            return `There are ${commentCount} comments on your map.`;
+        }
+
+        return 'Your map have been reviewed and needs revisions.';
+    };
+
+    const getBarColor = () => {
+        switch (boundary.status) {
             case BOUNDARY_STATUS.SUBMITTED:
+                return 'teal';
             case BOUNDARY_STATUS.IN_REVIEW:
-                return 'This map will be reviewed.';
             case BOUNDARY_STATUS.NEEDS_REVISIONS:
-                return 'This map needs revisions.';
+                return 'orange';
             case BOUNDARY_STATUS.APPROVED:
-                return 'This map has been approved.';
+                return 'green';
             default:
-                throw new Error(`Unexpected status ${status}`);
+                return null;
         }
     };
+
+    const detailText = getDetailText();
+    const barColor = getBarColor();
+
+    if (!detailText) {
+        return null;
+    }
+
     return (
-        <Box h={12} bg='teal.50' w='100%' borderRadius={6}>
+        <Box h={12} bg={`${barColor}.50`} w='100%' borderRadius={6}>
             <HStack p={3}>
                 <Icon
                     as={ExclamationCircleIcon}
-                    color='teal.400'
+                    color={`${barColor}.400`}
                     boxSize={6}
                 ></Icon>
-                <Text textStyle='detail'>{getDetailText()}</Text>
+                <Text textStyle='detail'>{detailText}</Text>
             </HStack>
         </Box>
     );