Merge pull request #148 from bcgov/variables-table-improvement

fixed re-render issue causing jarring variable table refresh

frontend/src/app/common/report.ts

@@ -1,9 +1,15 @@
 import config from '../../config';
 import { ProvisionJson, SaveProvisionData } from '../components/table/reports/SelectedProvisionsTable';
 import { VariableJson } from '../components/table/reports/VariablesTable';
-// import { ProvisionData } from '../content/display/Provisions';
-import { VariableData } from '../content/display/Variables';
-import { DTR, DTRDisplayObject, DocType, DocumentDataDTO, DocumentDataObject, ProvisionGroup } from '../types/types';
+import {
+  DTR,
+  DTRDisplayObject,
+  DocType,
+  DocumentDataDTO,
+  DocumentDataObject,
+  ProvisionGroup,
+  VariableData,
+} from '../types/types';
 import { buildDTRDisplayData } from '../util/util';
 import * as api from './api';
 
@@ -42,19 +48,6 @@ export const getMandatoryProvisionsByDocTypeId = async (document_type_id: number
   return response;
 };
 
-// export const getDocumentProvisionsByDocTypeIdDtid = async (
-//   document_type_id: number,
-//   dtid: number
-// ): Promise<{ provisions: ProvisionData[]; provisionIds: number[] }> => {
-//   const url = `${config.API_BASE_URL}/report/provisions/${document_type_id}/${dtid}`;
-//   const getParameters = api.generateApiParameters(url);
-//   const response: { provisions: ProvisionData[]; provisionIds: number[] } = await api.get<{
-//     provisions: ProvisionData[];
-//     provisionIds: number[];
-//   }>(getParameters);
-//   return response;
-// };
-
 export const getDocumentVariablesByDocTypeIdDtid = async (
   document_type_id: number,
   dtid: number

frontend/src/app/components/table/reports/VariablesTable.tsx

@@ -2,9 +2,8 @@ import React, { FC, useEffect, useState } from 'react';
 import { DataTable } from '../common/DataTable';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { Variable } from '../../../types/types';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { RootState } from '../../../store/store';
-import { setVariables } from '../../../store/reducers/variableSlice';
 
 export type SaveVariableData = {
   provision_id: number;
@@ -19,10 +18,11 @@ export type VariableJson = {
   variable_value: string;
 };
 
-const VariablesTable: React.FC = React.memo(() => {
+const VariablesTable: React.FC<{ onVariableEdit: (variableId: number, newValue: string) => void }> = ({
+  onVariableEdit,
+}) => {
   const [filteredVariables, setFilteredVariables] = useState<Variable[]>([]); // provisions in the currently selected group
 
-  const dispatch = useDispatch();
   const selectedVariableIds = useSelector((state: RootState) => state.variable.selectedVariableIds);
   const variables: Variable[] = useSelector((state: RootState) => state.variable.variables);
 
@@ -41,11 +41,9 @@ const VariablesTable: React.FC = React.memo(() => {
   }, [variables, selectedVariableIds]);
 
   const handleEdit = (variableId: number, newValue: string) => {
-    const newVariables = variables.map((variable) =>
-      variable.id === variableId ? { ...variable, variable_value: newValue } : variable
-    );
-    dispatch(setVariables(newVariables));
+    onVariableEdit(variableId, newValue);
   };
+  console.log('re-render');
 
   const columnHelper = createColumnHelper<Variable>();
   const columns: ColumnDef<Variable, any>[] = [
@@ -93,7 +91,7 @@ const VariablesTable: React.FC = React.memo(() => {
       initialSorting={[{ id: 'variable_name', desc: false }]}
     />
   );
-});
+};
 
 interface TableCellProps {
   getValue: () => any;
@@ -119,4 +117,4 @@ const TableCell: FC<TableCellProps> = ({ getValue, variableId, onCellUpdate }) =
   return <input type="text" value={value} onChange={handleChange} onBlur={handleBlur} style={{ width: '100%' }} />;
 };
 
-export default VariablesTable;
+export default React.memo(VariablesTable);

frontend/src/app/content/pages/LandingPage.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import Collapsible from '../../../app/components/common/Collapsible';
 import {
   DTRDisplayObject,
@@ -43,6 +43,8 @@ const LandingPage: FC = () => {
   const [documentType, setDocumentType] = useState<DocType | null>(null);
   const [documentTypes, setDocumentTypes] = useState<DocType[]>([]);
 
+  const [variableEdits, setVariableEdits] = useState<{ [variableId: number]: string }>({});
+
   const dispatch = useDispatch();
   const selectedProvisionIds: number[] = useSelector((state: RootState) => state.provision.selectedProvisionIds);
   const provisions = useSelector((state: RootState) => state.provision.provisions);
@@ -177,6 +179,13 @@ const LandingPage: FC = () => {
     }
   };
 
+  const handleVariableEdit = useCallback((variableId: number, newValue: string) => {
+    setVariableEdits((prevEdits) => ({
+      ...prevEdits,
+      [variableId]: newValue,
+    }));
+  }, []);
+
   const getSaveData = () => {
     const selectedProvisions = provisions.filter((provision) => selectedProvisionIds.includes(provision.provision_id));
     const provisionSaveData: SaveProvisionData[] = selectedProvisions.map((provision) => {
@@ -185,10 +194,20 @@ const LandingPage: FC = () => {
         doc_type_provision_id: provision.id,
       };
     });
+
     const selectedVariables: Variable[] = variables.filter((variable) => selectedVariableIds.includes(variable.id));
-    const variableSaveData: SaveVariableData[] = selectedVariables.map((variable) => {
+    const updatedVariables = selectedVariables.map((variable) => {
+      if (variableEdits[variable.id] !== undefined) {
+        return { ...variable, variable_value: variableEdits[variable.id] };
+      }
+      return variable;
+    });
+    dispatch(setVariables(updatedVariables));
+    setVariableEdits({});
+    const variableSaveData: SaveVariableData[] = updatedVariables.map((variable) => {
       return { variable_id: variable.id, variable_value: variable.variable_value, provision_id: variable.provision_id };
     });
+
     return { variableSaveData, provisionSaveData };
   };
 
@@ -308,7 +327,7 @@ const LandingPage: FC = () => {
           </Collapsible>
 
           <Collapsible title="Variables">
-            <VariablesTable />
+            <VariablesTable onVariableEdit={handleVariableEdit} />
           </Collapsible>
         </>
       ) : (

frontend/src/app/types/types.ts

@@ -348,3 +348,15 @@ export type ReducedProvisionDataObject = {
   update_timestamp: string;
   provision_group: ProvisionGroup;
 };
+
+export type VariableData = {
+  id: number;
+  variable_name: string;
+  variable_value: string;
+  help_text: string;
+  create_userid: string;
+  update_userid: string;
+  create_timestamp: string;
+  update_timestamp: string;
+  provision: Provision;
+};