Merge branch 'CU-86bz9pz5f_Save-Common-Fields-to-Local-Storage' of gi…

…thub.com:jembi/JeMPI into CU-86bz9pz5f_Save-Common-Fields-to-Local-Storage
jembi · Jul 10, 2024 · 9764098 · 9764098
2 parents 351d61a + 41d0eff
commit 9764098
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 46 deletions.
diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx
@@ -116,9 +116,7 @@ const Settings = () => {
             <Typography variant="h5" sx={{ py: 3 }}>
               Setup common properties
             </Typography>
-            <CommonSettings
-              demographicData={configurationData.demographicFields}
-            />
+            <CommonSettings />
           </CustomTabPanel>
           <CustomTabPanel value={value} index={1}>
             <Typography variant="h5" sx={{ py: 3 }}>
@@ -136,9 +134,7 @@ const Settings = () => {
             <Typography variant="h5" sx={{ py: 3 }}>
               Setup properties for Golden record lists
             </Typography>
-            <GoldenRecordLists
-              goldenRecordList={configurationData?.additionalNodes || []}
-            />
+            <GoldenRecordLists goldenRecordList={[]}/>
           </CustomTabPanel>
           <CustomTabPanel value={value} index={4}>
             <Deterministic

diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Box from '@mui/material/Box'
 import {
   DataGrid,
@@ -15,59 +15,46 @@ import EditIcon from '@mui/icons-material/Edit'
 import SaveIcon from '@mui/icons-material/Save'
 import CancelIcon from '@mui/icons-material/Close'
 import { EditToolbar } from 'components/shared/EditToolBar'
-import { processIndex, transformFieldName } from 'utils/helpers'
+import { processIndex, toSnakeCase, transformFieldName } from 'utils/helpers'
 import { useConfiguration } from 'hooks/useUIConfiguration'
 import { Configuration, LinkMetaData } from 'types/Configuration'
 import { RowData } from '../deterministic/SourceView'
 
-const toSnakeCase = (str: string) => {
-  return str
-    .trim()
-    .replace(/\s+/g, '_')
-    .replace(/([a-z])([A-Z])/g, '$1_$2')
-    .toLowerCase()
-}
-
-const CommonSettings = ({ demographicData }: { demographicData: any }) => {
+const CommonSettings = () => {
   const [rows, setRows] = useState<any>([])
   const { configuration, setConfiguration } = useConfiguration()
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({})
 
   useEffect(() => {
-    const rowData = demographicData.map((row: any, rowIndex: number) => ({
-      id: rowIndex + 1,
-      ...row,
-      rowIndex
-    }))
-    setRows(rowData)
-  }, [demographicData])
+    if (configuration && configuration.demographicFields) {
+      const rowData = configuration?.demographicFields.map(
+        (row: any, rowIndex: number) => ({
+          id: rowIndex + 1,
+          ...row,
+          rowIndex
+        })
+      )
+      setRows(rowData)
+    }
+  }, [configuration])
 
   const handleEditClick = (id: GridRowId) => () => {
     setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } })
   }
 
   const handleSaveClick = (id: GridRowId) => () => {
-    const updatedRow = rows.find((row: { id: GridRowId }) => row.id === id)
-    if (updatedRow) {
-      setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } })
-      handleUpdateConfiguration(updatedRow, updatedRow.rowIndex)
-    }
+    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } })
   }
 
   const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => {
-    setConfiguration(previousConfiguration => {
-      if (!previousConfiguration) return previousConfiguration
-      const updatedConfiguration = getUpdatedConfiguration(
-        updatedRow,
-        rowIndex,
-        previousConfiguration
-      )
-      localStorage.setItem(
-        'configuration',
-        JSON.stringify(updatedConfiguration)
-      )
-      return updatedConfiguration
-    })
+    if (!configuration) return
+    const updatedConfiguration = getUpdatedConfiguration(
+      updatedRow,
+      rowIndex,
+      configuration
+    )
+    localStorage.setItem('configuration', JSON.stringify(updatedConfiguration))
+    setConfiguration(updatedConfiguration)
   }
 
   const getUpdatedConfiguration = (
@@ -76,9 +63,16 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
     currentConfiguration: Configuration
   ): Configuration => {
     const fieldName = toSnakeCase(updatedRow.fieldName)
+    if (!currentConfiguration.demographicFields) {
+      return currentConfiguration
+    }
 
     const fieldToUpdate = currentConfiguration.demographicFields[rowIndex]
 
+    if (!fieldToUpdate) {
+      return currentConfiguration
+    }
+
     fieldToUpdate.fieldName = fieldName
 
     if (updatedRow?.indexGoldenRecord) {
@@ -98,6 +92,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
         u: Number(updatedRow.u)
       } as LinkMetaData
     }
+
     currentConfiguration.demographicFields[rowIndex] = fieldToUpdate
 
     return currentConfiguration
@@ -124,6 +119,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
       row.id === id ? ({ ...updatedRow, id } as RowData) : row
     )
     setRows(updatedRows)
+    handleUpdateConfiguration(updatedRow, updatedRow.rowIndex)
     return { ...updatedRow, id } as RowData
   }
 
@@ -243,7 +239,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
         width: '100%'
       }}
     >
-      {demographicData && (
+      {configuration && (
         <DataGrid
           rows={rows}
           columns={columns}

diff --git a/JeMPI_Apps/JeMPI_UI/src/test/settings/CommonSettings.test.tsx b/JeMPI_Apps/JeMPI_UI/src/test/settings/CommonSettings.test.tsx
@@ -4,20 +4,31 @@ import userEvent from '@testing-library/user-event';
 import CommonSettings from 'pages/settings/common/Common';
 import mockData from 'services/mockData';
 import '@testing-library/jest-dom';
+import { useConfiguration } from 'hooks/useUIConfiguration';
+
+jest.mock('hooks/useUIConfiguration', () => ({
+  useConfiguration: jest.fn(),
+}));
 
 
 describe('CommonSettings Component', () => {
-  const demographicWithIds = mockData.configuration.demographicFields.map((row, index) => ({
+  const configData = mockData.configuration.demographicFields.map((row, index) => ({
     ...row,
     id: `row_${index}`, 
   }));
+  beforeEach(() => {
+    (useConfiguration as jest.Mock).mockReturnValue({
+      configuration: configData,
+      setConfiguration: jest.fn(),
+    });
+  });
   it('renders without crashing', () => {
-    render(<CommonSettings demographicData={demographicWithIds} />);
+    render(<CommonSettings  />);
   });
 
   it('handles edit mode', async () => {
 
-    render(<CommonSettings demographicData={demographicWithIds} />);
+    render(<CommonSettings  />);
     const editIcon = document.getElementById('edit-button');
     const saveButton = document.getElementById('save-button');
     const cancelButton = document.getElementById('cancel-button');