#69 Restore functionality of the SDC-IDE

beda-software · Jun 23, 2024 · 5a6d9ea · 5a6d9ea
1 parent 6161b22
commit 5a6d9ea
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 49 deletions.
diff --git a/web/package.json b/web/package.json
@@ -52,7 +52,6 @@
         "react-select": "^5.4.0",
         "react-toastify": "^9.0.5",
         "sass": "^1.50.0",
-        "sdc-qrf": "*",
         "shared": "0.0.2",
         "ts-jest": "^27.1.4",
         "vitest": "^0.33.0",

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 { useFormContext, useFieldArray } from 'react-hook-form';
+import { useForm, useFieldArray } from 'react-hook-form';
 
 import s from './RepeatableGroups.module.scss';
 import { QuestionItems } from '../../questionItems';
@@ -18,43 +18,46 @@ export function RepeatableGroups(props: RepeatableGroupsProps) {
     const baseFieldPath = [...parentPath, linkId];
     const fieldName = baseFieldPath.join('.');
 
-    const { control, watch } = useFormContext();
+    const { control } = useForm({
+        defaultValues: {
+            [fieldName]: {
+                items: required ? [{}] : [],
+            },
+        },
+    });
+
     const { fields, append, remove } = useFieldArray({
         control,
-        name: fieldName,
+        name: `${fieldName}.items`,
     });
 
-    const items = watch(fieldName) || (required ? [{}] : []);
+    const handleAddAnswer = () => {
+        append({});
+    };
 
     return (
         <div className={s.group}>
-            {fields.map((field, index) => {
-                if (!items[index]) {
-                    return null;
-                }
-
-                return renderGroup ? (
-                    <React.Fragment key={`${fieldName}-${index}`}>
-                        {renderGroup({
+            {fields.map((item, index) => (
+                <React.Fragment key={`${fieldName}-${index}`}>
+                    {renderGroup ? (
+                        renderGroup({
                             index,
-                            field,
+                            input: item,
                             groupItem,
-                            remove: () => remove(index),
-                        })}
-                    </React.Fragment>
-                ) : (
-                    <RepeatableGroupDefault
-                        key={index}
-                        index={index}
-                        groupItem={groupItem}
-                        field={field}
-                        remove={() => remove(index)}
-                    />
-                );
-            })}
+                        })
+                    ) : (
+                        <RepeatableGroupDefault
+                            index={index}
+                            groupItem={groupItem}
+                            input={item}
+                            onRemove={() => remove(index)}
+                        />
+                    )}
+                </React.Fragment>
+            ))}
             <div>
-                <button className={s.addButton} onClick={() => append({})}>
-                    {`+ Add another answer`}
+                <button className={s.addButton} onClick={handleAddAnswer} type="button">
+                    + Add another answer
                 </button>
             </div>
         </div>
@@ -63,55 +66,63 @@ export function RepeatableGroups(props: RepeatableGroupsProps) {
 
 interface RepeatableGroupProps {
     index: number;
-    field: Record<'id', string>;
+    input: any;
     groupItem: GroupItemProps;
-    remove: () => void;
+    onRemove?: () => void;
 }
 
 function useRepeatableGroup(props: RepeatableGroupProps) {
-    const { index, groupItem, remove } = props;
+    const { index, input, groupItem } = props;
     const { parentPath, questionItem, context } = groupItem;
     const { linkId } = questionItem;
 
+    const onRemove = () => {
+        input.remove(index);
+    };
+
     return {
-        onRemove: remove,
+        onRemove,
         parentPath: [...parentPath, linkId, 'items', index.toString()],
         context: context[0]!,
     };
 }
 
 export function RepeatableGroupDefault(props: RepeatableGroupProps) {
-    const { index, groupItem } = props;
+    const { index, groupItem, onRemove } = props;
     const { questionItem } = groupItem;
     const { item } = questionItem;
-    const { onRemove, parentPath, context } = useRepeatableGroup(props);
+    const { parentPath, context } = useRepeatableGroup(props);
 
     return (
         <>
             <div className={s.groupHeader}>
                 <GroupLabel>{`${questionItem.text} #${index + 1}`}</GroupLabel>
-                <button onClick={onRemove} className={s.removeButton} type="button">
-                    Remove
-                </button>
+                {onRemove && (
+                    <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 } = props;
+    const { groupItem, onRemove } = props;
     const { questionItem } = groupItem;
     const { item } = questionItem;
-    const { onRemove, parentPath, context } = useRepeatableGroup(props);
+    const { parentPath, context } = useRepeatableGroup(props);
 
     return (
         <div className={s.row}>
             <QuestionItems questionItems={item!} parentPath={parentPath} context={context} />
             <div className={s.rowControls}>
-                <button onClick={onRemove} className={s.removeIconButton} type="button">
-                    +
-                </button>
+                {onRemove && (
+                    <button onClick={onRemove} className={s.removeIconButton} type="button">
+                        +
+                    </button>
+                )}
             </div>
         </div>
     );

diff --git a/web/src/utils/questionnaire.ts b/web/src/utils/questionnaire.ts
@@ -12,7 +12,6 @@ import {
 } from 'shared/src/contrib/aidbox';
 import { getByPath, setByPath } from 'shared/src/utils/path';
 
-
 // TODO: Write own type
 type AnswerValue = Required<QuestionnaireResponseItemAnswer>['value'] &
     Required<Observation>['value'];
@@ -322,9 +321,8 @@ export function mapResponseToForm(
             const answerPath = preparePathForAnswers(path, []);
             const questionPath = preparePathForQuestion(path);
             const question = getByPath(questionnaire, questionPath);
-            const answers:
-                | QuestionnaireResponseItemAnswer
-                | QuestionnaireResponseItemAnswer[] = getByPath(resource, answerPath);
+            const answers: QuestionnaireResponseItemAnswer | QuestionnaireResponseItemAnswer[] =
+                getByPath(resource, answerPath);
 
             if (typeof answers === 'undefined') {
                 if (initial) {
@@ -585,7 +583,6 @@ export function extractAnswersDisplay(
     );
 }
 
-
 export function getAnswerDisplay(
     o: QuestionnaireItemAnswerOption['value'] | QuestionnaireResponseItemAnswer['value'],
 ) {
@@ -614,7 +611,8 @@ export function getAnswerCode(
     }
 
     if (o?.Reference) {
-        return o.Reference.id;
+        const ref = o.Reference as { id?: string; reference?: string };
+        return ref.id ?? ref.reference ?? '';
     }
 
     return JSON.stringify(o);