#69 Restore functionality of the SDC-IDE

beda-software · Jun 23, 2024 · dea1b76 · dea1b76
1 parent 5a6d9ea
commit dea1b76
Showing 1 changed file with 34 additions and 54 deletions.
diff --git a/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx b/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx
@@ -1,6 +1,6 @@
 import { GroupItemProps } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
 import React from 'react';
-import { useForm, useFieldArray } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 import s from './RepeatableGroups.module.scss';
 import { QuestionItems } from '../../questionItems';
@@ -14,49 +14,38 @@ interface RepeatableGroupsProps {
 export function RepeatableGroups(props: RepeatableGroupsProps) {
     const { groupItem, renderGroup } = props;
     const { parentPath, questionItem } = groupItem;
-    const { linkId, required } = questionItem;
+    const { linkId } = questionItem;
     const baseFieldPath = [...parentPath, linkId];
     const fieldName = baseFieldPath.join('.');
 
-    const { control } = useForm({
-        defaultValues: {
-            [fieldName]: {
-                items: required ? [{}] : [],
-            },
-        },
-    });
-
+    const { control } = useForm();
     const { fields, append, remove } = useFieldArray({
         control,
-        name: `${fieldName}.items`,
+        name: fieldName,
     });
 
-    const handleAddAnswer = () => {
-        append({});
-    };
-
     return (
         <div className={s.group}>
-            {fields.map((item, index) => (
-                <React.Fragment key={`${fieldName}-${index}`}>
-                    {renderGroup ? (
-                        renderGroup({
+            {fields.map((field, index) => {
+                return renderGroup ? (
+                    <React.Fragment key={`${fieldName}-${field.id}`}>
+                        {renderGroup({
                             index,
-                            input: item,
                             groupItem,
-                        })
-                    ) : (
-                        <RepeatableGroupDefault
-                            index={index}
-                            groupItem={groupItem}
-                            input={item}
-                            onRemove={() => remove(index)}
-                        />
-                    )}
-                </React.Fragment>
-            ))}
+                            remove: () => remove(index),
+                        })}
+                    </React.Fragment>
+                ) : (
+                    <RepeatableGroupDefault
+                        key={field.id}
+                        index={index}
+                        groupItem={groupItem}
+                        remove={() => remove(index)}
+                    />
+                );
+            })}
             <div>
-                <button className={s.addButton} onClick={handleAddAnswer} type="button">
+                <button className={s.addButton} onClick={() => append({})}>
                     + Add another answer
                 </button>
             </div>
@@ -66,63 +55,54 @@ export function RepeatableGroups(props: RepeatableGroupsProps) {
 
 interface RepeatableGroupProps {
     index: number;
-    input: any;
     groupItem: GroupItemProps;
-    onRemove?: () => void;
+    remove: () => void;
 }
 
 function useRepeatableGroup(props: RepeatableGroupProps) {
-    const { index, input, groupItem } = props;
+    const { index, groupItem, remove } = props;
     const { parentPath, questionItem, context } = groupItem;
     const { linkId } = questionItem;
 
-    const onRemove = () => {
-        input.remove(index);
-    };
-
     return {
-        onRemove,
+        onRemove: remove,
         parentPath: [...parentPath, linkId, 'items', index.toString()],
         context: context[0]!,
     };
 }
 
 export function RepeatableGroupDefault(props: RepeatableGroupProps) {
-    const { index, groupItem, onRemove } = props;
+    const { index, groupItem } = props;
     const { questionItem } = groupItem;
     const { item } = questionItem;
-    const { parentPath, context } = useRepeatableGroup(props);
+    const { onRemove, parentPath, context } = useRepeatableGroup(props);
 
     return (
         <>
             <div className={s.groupHeader}>
                 <GroupLabel>{`${questionItem.text} #${index + 1}`}</GroupLabel>
-                {onRemove && (
-                    <button onClick={onRemove} className={s.removeButton} type="button">
-                        Remove
-                    </button>
-                )}
+                <button onClick={onRemove} className={s.removeButton} type="button">
+                    Remove
+                </button>
             </div>
             <QuestionItems questionItems={item!} parentPath={parentPath} context={context} />
         </>
     );
 }
 
 export function RepeatableGroupRow(props: RepeatableGroupProps) {
-    const { groupItem, onRemove } = props;
+    const { groupItem } = props;
     const { questionItem } = groupItem;
     const { item } = questionItem;
-    const { parentPath, context } = useRepeatableGroup(props);
+    const { onRemove, parentPath, context } = useRepeatableGroup(props);
 
     return (
         <div className={s.row}>
             <QuestionItems questionItems={item!} parentPath={parentPath} context={context} />
             <div className={s.rowControls}>
-                {onRemove && (
-                    <button onClick={onRemove} className={s.removeIconButton} type="button">
-                        +
-                    </button>
-                )}
+                <button onClick={onRemove} className={s.removeIconButton} type="button">
+                    Remove
+                </button>
             </div>
         </div>
     );