From 63f468a3315f4712aa9615c5da7cf33f423c36a8 Mon Sep 17 00:00:00 2001
From: ialakey <prosoulk2017@gmail.com>
Date: Wed, 26 Jun 2024 15:43:01 +0200
Subject: [PATCH] #69 Restore functionality of the SDC-IDE

---
 .../QRFormWrapper/components/field.tsx        | 27 -------------------
 .../group/RepeatableGroups/index.tsx          | 26 ++++++++++++------
 2 files changed, 18 insertions(+), 35 deletions(-)
 delete mode 100644 web/src/components/QRFormWrapper/components/field.tsx

diff --git a/web/src/components/QRFormWrapper/components/field.tsx b/web/src/components/QRFormWrapper/components/field.tsx
deleted file mode 100644
index 1f9670b4..00000000
--- a/web/src/components/QRFormWrapper/components/field.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import s from '../QuestionnaireResponseForm.module.scss';
-
-interface Props {
-    name: string;
-    children: ReactNode | ((props: any) => ReactNode);
-}
-
-export function QuestionField({ name, children }: Props) {
-    const { control } = useFormContext();
-
-    return (
-        <Controller
-            name={name}
-            control={control}
-            render={({ field }) =>
-                typeof children === 'function' ? (
-                    <div className={s.field}>{children(field)}</div>
-                ) : (
-                    <div className={s.field}>{children}</div>
-                )
-            }
-        />
-    );
-}
diff --git a/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx b/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx
index a7ae0922..5a1502d4 100644
--- a/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx
+++ b/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx
@@ -1,5 +1,8 @@
+import { useFieldController } from '@beda.software/fhir-questionnaire';
 import { GroupItemProps } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
-import React, { useState } from 'react';
+import _ from 'lodash';
+import React from 'react';
+import { useWatch } from 'react-hook-form';
 
 import s from './RepeatableGroups.module.scss';
 import { QuestionItems } from '../../questionItems';
@@ -13,25 +16,32 @@ interface RepeatableGroupsProps {
 export function RepeatableGroups(props: RepeatableGroupsProps) {
     const { groupItem, renderGroup } = props;
     const { parentPath, questionItem } = groupItem;
-    const { linkId } = questionItem;
+    const { linkId, required } = questionItem;
     const baseFieldPath = [...parentPath, linkId];
     const fieldName = baseFieldPath.join('.');
 
-    const [fields, setFields] = useState<any[]>([]);
+    const { onChange } = useFieldController(baseFieldPath, questionItem);
+    const value = useWatch({ name: fieldName });
+    const items = value.items && value.items.length ? value.items : required ? [{}] : [];
 
     const append = () => {
-        setFields((prevFields) => [...prevFields, { id: Date.now().toString() }]);
+        const existingItems = value.items || [];
+        const updatedInput = { items: [...existingItems, {}] };
+        onChange(updatedInput);
     };
 
     const remove = (index: number) => {
-        setFields((prevFields) => prevFields.filter((_, i) => i !== index));
+        const filteredArray = _.filter(value.items, (_val, valIndex: number) => valIndex !== index);
+        onChange({
+            items: [...filteredArray],
+        });
     };
 
     return (
         <div className={s.group}>
-            {fields.map((field, index) => {
+            {_.map(items, (_elem, index: number) => {
                 return renderGroup ? (
-                    <React.Fragment key={`${fieldName}-${field.id}`}>
+                    <React.Fragment key={`${fieldName}-${index}`}>
                         {renderGroup({
                             index,
                             groupItem,
@@ -40,7 +50,7 @@ export function RepeatableGroups(props: RepeatableGroupsProps) {
                     </React.Fragment>
                 ) : (
                     <RepeatableGroupDefault
-                        key={field.id}
+                        key={index}
                         index={index}
                         groupItem={groupItem}
                         remove={() => remove(index)}