feat: add respondent number to individual response page on table nav

opengovsg · Jun 28, 2022 · e781df9 · e781df9
1 parent 9222c4c
commit e781df9
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx b/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx
@@ -1,6 +1,11 @@
 import { memo, useCallback, useMemo } from 'react'
 import { BiChevronLeft, BiChevronRight, BiLeftArrowAlt } from 'react-icons/bi'
-import { Link as ReactLink, useNavigate, useParams } from 'react-router-dom'
+import {
+  Link as ReactLink,
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router-dom'
 import {
   Box,
   ButtonGroup,
@@ -46,17 +51,23 @@ const LoadingDecryption = memo(() => {
 })
 
 export const IndividualResponsePage = (): JSX.Element => {
+  const { state } = useLocation()
   const navigate = useNavigate()
   const { submissionId } = useParams()
   if (!submissionId) throw new Error('Missing submissionId')
 
+  const currentRespondentNumber = useMemo(() => {
+    return (state as { respondentNumber?: number })?.respondentNumber
+  }, [state])
+
   const { secretKey } = useStorageResponsesContext()
   const {
     lastNavPage,
     getNextSubmissionId,
     getPreviousSubmissionId,
     onNavNextSubmissionId,
     onNavPreviousSubmissionId,
+    isAnyLoading,
   } = useUnlockedResponses()
   const { data, isLoading } = useIndividualSubmission()
 
@@ -71,15 +82,39 @@ export const IndividualResponsePage = (): JSX.Element => {
 
   const handleNavigateNext = useCallback(() => {
     if (!nextSubmissionId) return
-    navigate(`../${nextSubmissionId}`)
+    navigate(`../${nextSubmissionId}`, {
+      state: {
+        respondentNumber: currentRespondentNumber
+          ? currentRespondentNumber - 1
+          : undefined,
+      },
+    })
     onNavNextSubmissionId(submissionId)
-  }, [navigate, nextSubmissionId, onNavNextSubmissionId, submissionId])
+  }, [
+    currentRespondentNumber,
+    navigate,
+    nextSubmissionId,
+    onNavNextSubmissionId,
+    submissionId,
+  ])
 
   const handleNavigatePrev = useCallback(() => {
     if (!prevSubmissionId) return
-    navigate(`../${prevSubmissionId}`)
+    navigate(`../${prevSubmissionId}`, {
+      state: {
+        respondentNumber: currentRespondentNumber
+          ? currentRespondentNumber + 1
+          : undefined,
+      },
+    })
     onNavPreviousSubmissionId(submissionId)
-  }, [navigate, onNavPreviousSubmissionId, prevSubmissionId, submissionId])
+  }, [
+    currentRespondentNumber,
+    navigate,
+    onNavPreviousSubmissionId,
+    prevSubmissionId,
+    submissionId,
+  ])
 
   const backLink = useMemo(() => {
     if (lastNavPage) {
@@ -111,19 +146,19 @@ export const IndividualResponsePage = (): JSX.Element => {
           </Link>
           <Skeleton isLoaded={!isLoading}>
             <Text textStyle="h2" as="h2">
-              {/* TODO: add respondent number according to position in table, if exists */}
-              Respondent #2
+              Respondent
+              {currentRespondentNumber ? ` #${currentRespondentNumber}` : ''}
             </Text>
           </Skeleton>
           <ButtonGroup>
             <IconButton
-              isDisabled={!prevSubmissionId}
+              isDisabled={!prevSubmissionId || isAnyLoading}
               onClick={handleNavigatePrev}
               icon={<BiChevronLeft />}
               aria-label="Previous submission"
             />
             <IconButton
-              isDisabled={!nextSubmissionId}
+              isDisabled={!nextSubmissionId || isAnyLoading}
               onClick={handleNavigateNext}
               icon={<BiChevronRight />}
               aria-label="Next submission"

diff --git a/frontend/src/features/admin-form/responses/IndividualResponsePage/queries.ts b/frontend/src/features/admin-form/responses/IndividualResponsePage/queries.ts
@@ -20,7 +20,8 @@ export const useIndividualSubmission = () => {
     adminFormResponsesKeys.individual(formId, submissionId),
     () => getDecryptedSubmissionById({ formId, submissionId, secretKey }),
     {
-      staleTime: 10 * 60 * 1000,
+      // Will never update once fetched.
+      staleTime: Infinity,
       enabled: !!secretKey,
     },
   )

diff --git a/.../features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable.tsx b/.../features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable.tsx
@@ -78,8 +78,12 @@ export const ResponsesTable = () => {
   }, [currentPage, gotoPage])
 
   const handleRowClick = useCallback(
-    (submissionId: string) => {
-      return navigate(`${submissionId}`)
+    (submissionId: string, respondentNumber) => {
+      return navigate(submissionId, {
+        state: {
+          respondentNumber,
+        },
+      })
     },
     [navigate],
   )
@@ -144,7 +148,9 @@ export const ResponsesTable = () => {
               as="div"
               {...row.getRowProps()}
               px={0}
-              onClick={() => handleRowClick(row.values.refNo)}
+              onClick={() =>
+                handleRowClick(row.values.refNo, row.values.number)
+              }
             >
               {row.cells.map((cell) => {
                 return (