fix(j-s): Memoize casefiles so they don't move when after reordering …

…while renaming
island-is · Sep 25, 2024 · 8bd58b2 · 8bd58b2
1 parent 5d3444a
commit 8bd58b2
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/apps/judicial-system/web/src/routes/Prosecutor/Indictments/CaseFile/CaseFile.tsx b/apps/judicial-system/web/src/routes/Prosecutor/Indictments/CaseFile/CaseFile.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { LayoutGroup } from 'framer-motion'
 import router from 'next/router'
@@ -23,6 +23,15 @@ import { caseFile as m } from './CaseFile.strings'
 const CaseFile = () => {
   const { workingCase, isLoadingWorkingCase, caseNotFound } =
     useContext(FormContext)
+
+  const caseFiles = useMemo(() => {
+    return (
+      workingCase.caseFiles?.filter(
+        (caseFile) => caseFile.category === CaseFileCategory.CASE_FILE_RECORD,
+      ) ?? []
+    )
+  }, [workingCase.caseFiles])
+
   const { formatMessage } = useIntl()
   const [editCount, setEditCount] = useState<number>(0)
 
@@ -57,24 +66,20 @@ const CaseFile = () => {
         <Box marginBottom={5}>
           <LayoutGroup>
             <Accordion singleExpand>
-              {workingCase.policeCaseNumbers?.map((policeCaseNumber, index) => (
-                <IndictmentsCaseFilesAccordionItem
-                  key={index}
-                  caseId={workingCase.id}
-                  policeCaseNumber={policeCaseNumber}
-                  shouldStartExpanded={index === 0}
-                  caseFiles={
-                    workingCase.caseFiles?.filter(
-                      (caseFile) =>
-                        caseFile.policeCaseNumber === policeCaseNumber &&
-                        caseFile.category === CaseFileCategory.CASE_FILE_RECORD,
-                    ) ?? []
-                  }
-                  subtypes={workingCase.indictmentSubtypes}
-                  crimeScenes={workingCase.crimeScenes}
-                  setEditCount={setEditCount}
-                />
-              ))}
+              {workingCase.policeCaseNumbers?.map((policeCaseNumber, index) => {
+                return (
+                  <IndictmentsCaseFilesAccordionItem
+                    key={index}
+                    caseId={workingCase.id}
+                    policeCaseNumber={policeCaseNumber}
+                    shouldStartExpanded={index === 0}
+                    caseFiles={caseFiles}
+                    subtypes={workingCase.indictmentSubtypes}
+                    crimeScenes={workingCase.crimeScenes}
+                    setEditCount={setEditCount}
+                  />
+                )
+              })}
             </Accordion>
           </LayoutGroup>
         </Box>