Add function to remove repeat IDs, fix an issue where repeating group…

…s will refresh instances due to the mismatch of internal IDs
aehrc · Sep 20, 2024 · 893983c · 893983c
1 parent 1195ee0
commit 893983c
Show file tree

Hide file tree

Showing 21 changed files with 528 additions and 78 deletions.
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx
@@ -58,7 +58,7 @@ function RepeatGroup(props: RepeatGroupProps) {
 
   const mutateRepeatEnableWhenItems = useQuestionnaireStore.use.mutateRepeatEnableWhenItems();
 
-  const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
+  const initialRepeatGroups = useInitialiseRepeatGroups(qItem.linkId, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useRepeatGroups(initialRepeatGroups);
 
@@ -104,7 +104,7 @@ function RepeatGroup(props: RepeatGroupProps) {
     setRepeatGroups([
       ...repeatGroups,
       {
-        nanoId: generateNewRepeatId(qItem.linkId),
+        id: generateNewRepeatId(qItem.linkId),
         qrItem: null
       }
     ]);

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
@@ -76,15 +76,15 @@ function RepeatGroupView(props: RepeatGroupViewProps) {
     return (
       <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
         <Card elevation={groupCardElevation} sx={{ p: 2 }}>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+          {repeatGroups.map(({ id, qrItem: nullableQrItem }, index) => {
             const answeredQrItem = createEmptyQrItem(qItem, undefined);
             if (nullableQrItem) {
               answeredQrItem.item = nullableQrItem.item;
             }
 
             return (
               <RepeatGroupItem
-                key={nanoId}
+                key={id}
                 qItem={qItem}
                 repeatGroupIndex={index}
                 answeredQrItem={answeredQrItem}
@@ -127,14 +127,14 @@ function RepeatGroupView(props: RepeatGroupViewProps) {
         <AccordionDetails sx={{ pt: 0 }}>
           {qItem.text ? <Divider sx={{ mb: 1.5 }} light /> : null}
           <TransitionGroup>
-            {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            {repeatGroups.map(({ id, qrItem: nullableQrItem }, index) => {
               const answeredQrItem = createEmptyQrItem(qItem, undefined);
               if (nullableQrItem) {
                 answeredQrItem.item = nullableQrItem.item;
               }
 
               return (
-                <Collapse key={nanoId} timeout={200}>
+                <Collapse key={id} timeout={200}>
                   <RepeatGroupItem
                     qItem={qItem}
                     repeatGroupIndex={index}
@@ -169,14 +169,14 @@ function RepeatGroupView(props: RepeatGroupViewProps) {
           </>
         ) : null}
         <TransitionGroup>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+          {repeatGroups.map(({ id, qrItem: nullableQrItem }, index) => {
             const answeredQrItem = createEmptyQrItem(qItem, undefined);
             if (nullableQrItem) {
               answeredQrItem.item = nullableQrItem.item;
             }
 
             return (
-              <Collapse key={nanoId} timeout={200}>
+              <Collapse key={id} timeout={200}>
                 <RepeatGroupItem
                   qItem={qItem}
                   repeatGroupIndex={index}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTable.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTable.tsx
@@ -104,7 +104,7 @@ function GroupTable(props: GroupTableProps) {
     const updatedTableRows = [...tableRows];
 
     const rowToRemove = updatedTableRows[index];
-    const updatedSelectedIds = selectedIds.filter((id) => id !== rowToRemove.nanoId);
+    const updatedSelectedIds = selectedIds.filter((id) => id !== rowToRemove.id);
 
     updatedTableRows.splice(index, 1);
 
@@ -117,34 +117,34 @@ function GroupTable(props: GroupTableProps) {
   }
 
   function handleAddRow() {
-    const newRowNanoId = generateNewRepeatId(qItem.linkId);
+    const newRowId = generateNewRepeatId(qItem.linkId);
     setTableRows([
       ...tableRows,
       {
-        nanoId: newRowNanoId,
+        id: newRowId,
         qrItem: null
       }
     ]);
-    setSelectedIds([...selectedIds, newRowNanoId]);
+    setSelectedIds([...selectedIds, newRowId]);
   }
 
   function handleSelectAll() {
     // deselect all if all are selected, otherwise select all
     const updatedTableIds =
-      selectedIds.length === tableRows.length ? [] : tableRows.map((tableRow) => tableRow.nanoId);
+      selectedIds.length === tableRows.length ? [] : tableRows.map((tableRow) => tableRow.id);
     setSelectedIds(updatedTableIds);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: getGroupTableItemsToUpdate(tableRows, updatedTableIds)
     });
   }
 
-  function handleSelectRow(nanoId: string) {
+  function handleSelectRow(rowId: string) {
     const updatedSelectedIds = [...selectedIds];
 
-    const index = updatedSelectedIds.indexOf(nanoId);
+    const index = updatedSelectedIds.indexOf(rowId);
     if (index === -1) {
-      updatedSelectedIds.push(nanoId);
+      updatedSelectedIds.push(rowId);
     } else {
       updatedSelectedIds.splice(index, 1);
     }

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx
@@ -41,7 +41,7 @@ interface GroupTableBodyProps
   qItemsIndexMap: Record<string, number>;
   onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
-  onSelectRow: (nanoId: string) => void;
+  onSelectRow: (rowId: string) => void;
   onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
 }
 
@@ -80,18 +80,18 @@ function GroupTableBody(props: GroupTableBodyProps) {
       <Droppable droppableId="gtable_rows" direction="vertical">
         {(droppableProvided, snapshot) => (
           <TableBody ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-            {tableRows.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-              const itemIsSelected = selectedIds.indexOf(nanoId) !== -1;
+            {tableRows.map(({ id, qrItem: nullableQrItem }, index) => {
+              const itemIsSelected = selectedIds.indexOf(id) !== -1;
               const answeredQrItem = createEmptyQrItem(tableQItem, undefined);
               if (nullableQrItem) {
                 answeredQrItem.item = nullableQrItem.item;
               }
 
               return (
                 <GroupTableRow
-                  key={nanoId}
+                  key={id}
                   index={index}
-                  nanoId={nanoId}
+                  rowId={id}
                   tableQItem={tableQItem}
                   answeredQrItem={answeredQrItem}
                   nullableQrItem={nullableQrItem}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx
@@ -39,7 +39,7 @@ interface GroupTableRowProps
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute,
     TableRowProps {
-  nanoId: string;
+  rowId: string;
   index: number;
   tableQItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
@@ -58,7 +58,7 @@ interface GroupTableRowProps
 
 function GroupTableRow(props: GroupTableRowProps) {
   const {
-    nanoId,
+    rowId,
     index,
     tableQItem,
     answeredQrItem,
@@ -78,7 +78,7 @@ function GroupTableRow(props: GroupTableRowProps) {
 
   if (isRepeated) {
     return (
-      <Draggable draggableId={nanoId} index={index}>
+      <Draggable draggableId={rowId} index={index}>
         {(draggableProvided, snapshot) => (
           <StyledGroupTableRow
             itemIsDragged={snapshot.isDragging}
@@ -106,7 +106,7 @@ function GroupTableRow(props: GroupTableRowProps) {
                 <SelectRowButton
                   isSelected={itemIsSelected}
                   readOnly={readOnly}
-                  onSelectItem={() => onSelectRow(nanoId)}
+                  onSelectItem={() => onSelectRow(rowId)}
                 />
               </>
             )}
@@ -150,7 +150,7 @@ function GroupTableRow(props: GroupTableRowProps) {
           <SelectRowButton
             isSelected={itemIsSelected}
             readOnly={readOnly}
-            onSelectItem={() => onSelectRow(nanoId)}
+            onSelectItem={() => onSelectRow(rowId)}
           />
         </>
       )}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableView.tsx
@@ -54,7 +54,7 @@ interface GroupTableViewProps
   onAddRow: () => void;
   onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
-  onSelectRow: (nanoId: string) => void;
+  onSelectRow: (rowId: string) => void;
   onSelectAll: () => void;
   onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
 }

diff --git a/packages/smart-forms-renderer/src/hooks/useGroupTableRows.ts b/packages/smart-forms-renderer/src/hooks/useGroupTableRows.ts
@@ -24,7 +24,7 @@ function useGroupTableRows(linkId: string, qrItems: QuestionnaireResponseItem[])
 
   const [tableRows, setTableRows] = useState(initialisedGroupTableRows);
   const [selectedIds, setSelectedIds] = useState<string[]>(
-    initialisedGroupTableRows.map((row) => row.nanoId)
+    initialisedGroupTableRows.map((row) => row.id)
   );
 
   return { tableRows, selectedIds, setTableRows, setSelectedIds };

diff --git a/packages/smart-forms-renderer/src/hooks/useInitialiseGroupTable.ts b/packages/smart-forms-renderer/src/hooks/useInitialiseGroupTable.ts
@@ -23,23 +23,16 @@ function useInitialiseGroupTable(
   linkId: string,
   qrItems: QuestionnaireResponseItem[]
 ): GroupTableRowModel[] {
-  let initialGroupTableRows: GroupTableRowModel[] = [
-    {
-      nanoId: generateNewRepeatId(linkId),
-      qrItem: null
-    }
-  ];
-
-  if (qrItems.length > 0) {
-    initialGroupTableRows = qrItems.map((qrItem, index) => {
-      return {
-        nanoId: generateExistingRepeatId(linkId, index),
-        qrItem
-      };
-    });
+  if (qrItems.length === 0) {
+    return [{ id: generateNewRepeatId(linkId), qrItem: null }];
   }
 
-  return initialGroupTableRows;
+  return qrItems.map((qrItem, index) => {
+    return {
+      id: generateExistingRepeatId(linkId, index),
+      qrItem
+    };
+  });
 }
 
 export default useInitialiseGroupTable;
diff --git a/packages/smart-forms-renderer/src/hooks/useInitialiseRepeatGroups.ts b/packages/smart-forms-renderer/src/hooks/useInitialiseRepeatGroups.ts
@@ -15,38 +15,27 @@
  * limitations under the License.
  */
 
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';
 import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatGroups(
-  qItem: QuestionnaireItem,
+  linkId: string,
   qrItems: QuestionnaireResponseItem[]
 ): RepeatGroupSingle[] {
-  return useMemo(
-    () => {
-      let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
-        {
-          nanoId: generateNewRepeatId(qItem.linkId),
-          qrItem: null
-        }
-      ];
+  return useMemo(() => {
+    if (qrItems.length === 0) {
+      return [{ id: generateNewRepeatId(linkId), qrItem: null }];
+    }
 
-      if (qrItems.length > 0) {
-        initialRepeatGroupAnswers = qrItems.map((qrItem, index) => {
-          return {
-            nanoId: generateExistingRepeatId(qItem.linkId, index),
-            qrItem
-          };
-        });
-      }
-      return initialRepeatGroupAnswers;
-    },
-    // Requires checking of both qItem and qrItems
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [qItem, qrItems]
-  );
+    return qrItems.map((qrItem, index) => {
+      return {
+        id: generateExistingRepeatId(linkId, index),
+        qrItem
+      };
+    });
+  }, [linkId, qrItems]);
 }
 
 export default useInitialiseRepeatGroups;
diff --git a/packages/smart-forms-renderer/src/hooks/useRepeatGroups.ts b/packages/smart-forms-renderer/src/hooks/useRepeatGroups.ts
@@ -19,6 +19,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import _isEqual from 'lodash/isEqual';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 
 function useRepeatGroups(
   valueFromProps: RepeatGroupSingle[]
@@ -27,10 +28,13 @@ function useRepeatGroups(
 
   useEffect(
     () => {
-      const valueFromPropsQRItems = valueFromProps.map(
-        (repeatGroupSingle) => repeatGroupSingle.qrItem
-      );
-      const repeatGroupsQRItems = repeatGroups.map((repeatGroupSingle) => repeatGroupSingle.qrItem);
+      const valueFromPropsQRItems = valueFromProps
+        .map((repeatGroupSingle) => repeatGroupSingle.qrItem)
+        .filter((qrItem): qrItem is QuestionnaireResponseItem => qrItem !== null);
+
+      const repeatGroupsQRItems = repeatGroups
+        .map((repeatGroupSingle) => repeatGroupSingle.qrItem)
+        .filter((qrItem): qrItem is QuestionnaireResponseItem => qrItem !== null);
 
       if (!_isEqual(valueFromPropsQRItems, repeatGroupsQRItems)) {
         setRepeatGroups(valueFromProps);

diff --git a/packages/smart-forms-renderer/src/index.ts b/packages/smart-forms-renderer/src/index.ts
@@ -42,6 +42,7 @@ export {
   destroyForm,
   getResponse,
   removeEmptyAnswersFromResponse,
+  removeInternalIdsFromResponse,
   isSpecificItemControl,
   isRepeatItemAndNotCheckbox,
   initialiseQuestionnaireResponse,

diff --git a/packages/smart-forms-renderer/src/interfaces/groupTable.interface.ts b/packages/smart-forms-renderer/src/interfaces/groupTable.interface.ts
@@ -18,6 +18,6 @@
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
 export interface GroupTableRowModel {
-  nanoId: string;
+  id: string;
   qrItem: QuestionnaireResponseItem | null;
 }
diff --git a/packages/smart-forms-renderer/src/interfaces/repeatGroup.interface.ts b/packages/smart-forms-renderer/src/interfaces/repeatGroup.interface.ts
@@ -23,6 +23,6 @@ export interface QrRepeatGroup {
 }
 
 export interface RepeatGroupSingle {
-  nanoId: string;
+  id: string;
   qrItem: QuestionnaireResponseItem | null;
 }