refactored handle update configuration

JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx

@@ -110,8 +110,7 @@ const Settings = () => {
             <Typography variant="h5" sx={{ py: 3 }}>
               Setup properties for Golden record lists
             </Typography>
-            <GoldenRecordLists
-            />
+            <GoldenRecordLists goldenRecordList={[]}/>
           </CustomTabPanel>
           <CustomTabPanel value={value} index={4}>
             <Deterministic

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,106 +15,88 @@ 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 = () => {
   const [rows, setRows] = useState<any>([])
   const { configuration, setConfiguration } = useConfiguration()
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({})
 
   useEffect(() => {
-    if(configuration && configuration.demographicFields){
-      const rowData = configuration?.demographicFields.map((row: any, rowIndex: number) => ({
-        id: rowIndex + 1,
-        ...row,
-        rowIndex
-      }))
+    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 } })    }
+    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)
-      )
-      setConfiguration(updatedConfiguration)
-      return updatedConfiguration
-    })
+    if (!configuration) return
+    const updatedConfiguration = getUpdatedConfiguration(
+      updatedRow,
+      rowIndex,
+      configuration
+    )
+    localStorage.setItem('configuration', JSON.stringify(updatedConfiguration))
+    setConfiguration(updatedConfiguration)
   }
 
   const getUpdatedConfiguration = (
     updatedRow: any,
     rowIndex: number,
     currentConfiguration: Configuration
   ): Configuration => {
-    const fieldName = toSnakeCase(updatedRow.fieldName);
+    const fieldName = toSnakeCase(updatedRow.fieldName)
     if (!currentConfiguration.demographicFields) {
-      console.error('demographicFields is undefined');
-      return currentConfiguration;
+      return currentConfiguration
     }
-  
-    const fieldToUpdate = currentConfiguration.demographicFields[rowIndex];
-  
+
+    const fieldToUpdate = currentConfiguration.demographicFields[rowIndex]
+
     if (!fieldToUpdate) {
-      console.error(`No field found at row index ${rowIndex}`);
-      return currentConfiguration;
+      return currentConfiguration
     }
-  
-    fieldToUpdate.fieldName = fieldName;
-  
+
+    fieldToUpdate.fieldName = fieldName
+
     if (updatedRow?.indexGoldenRecord) {
-      fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})`;
+      fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})`
     }
-  
+
     if (updatedRow?.m) {
       fieldToUpdate.linkMetaData = {
         ...fieldToUpdate.linkMetaData,
         m: Number(updatedRow.m)
-      } as LinkMetaData;
+      } as LinkMetaData
     }
-  
+
     if (updatedRow?.u) {
       fieldToUpdate.linkMetaData = {
         ...fieldToUpdate.linkMetaData,
         u: Number(updatedRow.u)
-      } as LinkMetaData;
+      } as LinkMetaData
     }
-  
-    currentConfiguration.demographicFields[rowIndex] = fieldToUpdate;
-  
-    return currentConfiguration;
+
+    currentConfiguration.demographicFields[rowIndex] = fieldToUpdate
+
+    return currentConfiguration
   }
-
 
   const handleCancelClick = (id: GridRowId) => () => {
     setRowModesModel(prevRowModesModel => {
@@ -132,12 +114,14 @@ const CommonSettings = () => {
   }
 
   const processRowUpdate = (newRow: GridRowModel) => {
-    const { id, ...updatedRow } = newRow;
-    const updatedRows = rows.map((row: { id: any }) => (row.id === id ? ({ ...updatedRow, id } as RowData) : row));
-    setRows(updatedRows);
+    const { id, ...updatedRow } = newRow
+    const updatedRows = rows.map((row: { id: any }) =>
+      row.id === id ? ({ ...updatedRow, id } as RowData) : row
+    )
+    setRows(updatedRows)
     handleUpdateConfiguration(updatedRow, updatedRow.rowIndex)
-    return { ...updatedRow, id } as RowData;
-  };
+    return { ...updatedRow, id } as RowData
+  }
 
   const columns: GridColDef[] = [
     {