Add draft indicator badge to existing responses

apps/smart-forms-app/src/features/renderer/components/RendererNav/ExistingResponsesBadgeIcon.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Badge } from '@mui/material';
+import GradingIcon from '@mui/icons-material/Grading';
+
+interface ExistingResponsesBadgeProps {
+  numOfDraftResponses: number;
+  fetchError: unknown;
+}
+
+function ExistingResponsesBadgeIcon(props: ExistingResponsesBadgeProps) {
+  const { numOfDraftResponses, fetchError } = props;
+
+  if (fetchError) {
+    return (
+      <Badge color="error" badgeContent=" " variant="dot">
+        <GradingIcon />
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge color="primary" badgeContent={numOfDraftResponses}>
+      <GradingIcon />
+    </Badge>
+  );
+}
+
+export default ExistingResponsesBadgeIcon;

apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererLaunchQuestionnaireNavSection.tsx

@@ -19,15 +19,24 @@ import { Box, List, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 import RendererOperationItem from './RendererOperationItem.tsx';
-import GradingIcon from '@mui/icons-material/Grading';
 import useSmartClient from '../../../../hooks/useSmartClient.ts';
 import useSelectedQuestionnaire from '../../../dashboard/hooks/useSelectedQuestionnaire.ts';
+import useFetchExistingResponses from '../../../dashboard/hooks/useFetchExistingResponses.ts';
+import { useMemo } from 'react';
+import ExistingResponsesBadgeIcon from './ExistingResponsesBadgeIcon.tsx';
 
 function RendererLaunchQuestionnaireNavSection() {
   const navigate = useNavigate();
   const { closeSnackbar } = useSnackbar();
   const { launchQuestionnaire } = useSmartClient();
 
+  const { existingResponses, fetchError } = useFetchExistingResponses();
+
+  const draftExistingResponses = useMemo(
+    () => existingResponses.map((response) => response.status === 'in-progress'),
+    [existingResponses]
+  );
+
   const { setSelectedQuestionnaire } = useSelectedQuestionnaire();
 
   return (
@@ -38,7 +47,12 @@ function RendererLaunchQuestionnaireNavSection() {
       <List disablePadding sx={{ px: 1 }}>
         <RendererOperationItem
           title="View Existing Responses"
-          icon={<GradingIcon />}
+          icon={
+            <ExistingResponsesBadgeIcon
+              numOfDraftResponses={draftExistingResponses.length}
+              fetchError={fetchError}
+            />
+          }
           onClick={() => {
             closeSnackbar();
             setSelectedQuestionnaire(launchQuestionnaire);