- added proper fields for amendment note and documents;

- rewritten logic for repeater field;

src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js

@@ -1,7 +1,8 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useMemo, useState, useCallback } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
 import { isEmpty, head } from 'ramda';
 import { __ } from '@wordpress/i18n';
+import { klona } from 'klona';
 
 // tools
 import uniqid from '../../../../helpers/uniqid';
@@ -15,13 +16,11 @@ const RepeaterFields = ({
                             sourceName,
                             updateFn = () => {
                             },
-                            defaultValue = [],
                             updateCallbackFn = () => {
-                            }
+                            },
+                            defaultValue = [],
                         }) => {
-    const [items, setItems] = useState([]);
     const [chosen, setChosen] = useState('');
-    const [formInitialData, setFormInitialData] = useState({});
     const {
         control,
         handleSubmit,
@@ -29,90 +28,67 @@ const RepeaterFields = ({
         setValue,
         register,
         trigger,
-        reset,
-        watch,
-        getValues
+        getValues,
+        watch
     } = useForm({
         defaultValues: useMemo(() => {
-            return formInitialData;
-        }, [formInitialData]), mode: 'onChange'
+            return {
+                items: defaultValue || []
+            };
+        }, [defaultValue]), mode: 'onChange'
     });
-    const watchName = watch('nameValue');
-    const watchFile = watch('fileValue');
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: 'items'
+    });
+
+    const watchFields = watch('items');
 
     const onSubmit = () => {
-    };
-
-    const doUpdateAfterFileUploaded = () => {
-        trigger();
     }
 
-    const addNew = useCallback(() => {
-        setValue('nameValue', '');
-        setValue('fileValue', []);
-        trigger();
+    const doUpdateAfterFileUploaded = () => {
+        const formData = getValues();
+        updateFn(formData.items);
+        updateCallbackFn(formData.items);
+    }
+
+    const addNew = () => {
         const uid = uniqid('f');
         const newItem = {
             fieldId: uid,
             nameValue: '',
             fileValue: []
         }
-        setItems([...items, newItem]);
-        setChosen(uid);
+        append(newItem);
+        setChosen(newItem.fieldId);
         trigger();
-    }, [items]);
+    };
 
     const setNewChosen = useCallback((id) => {
-        const chosenObj = head(items.filter(o => id === o.fieldId));
-        setChosen(chosen === id ? '' : id);
-        reset();
+        const chosenObj = head(fields.filter(o => id === o.fieldId));
         if (chosenObj) {
-            setValue('nameValue', chosenObj.nameValue);
-            setValue('fileValue', chosenObj.fileValue);
+            setChosen(chosen === id ? '' : id);
         }
-    }, [items]);
+    }, [fields, chosen]);
 
-    const removeItem = useCallback((id) => {
-        setItems([...items.filter(o => id !== o.fieldId)]);
-        if (chosen === id) {
+    const removeItem = useCallback((index) => {
+        const chosenObj = klona(fields[index]);
+        remove(index);
+        if (chosen === chosenObj.fieldId) {
             setChosen('');
-            reset();
         }
-    }, [items, chosen]);
-
-    useEffect(() => {
-        const updatedItems = items.map((o) => {
-            return o.fieldId === chosen ? {
-                ...o,
-                nameValue: watchName
-            } : o;
-        })
-        setItems([...updatedItems]);
-    }, [watchName]);
-
-    useEffect(() => {
-        const updatedItems = items.map((o) => {
-            return o.fieldId === chosen ? {
-                ...o,
-                fileValue: watchFile
-            } : o;
-        });
-        setItems([...updatedItems]);
-    }, [watchFile]);
-
-    useEffect(() => {
-        updateFn(items);
-    }, [items]);
-
-    useEffect(() => {
-        setItems(defaultValue);
-    }, [])
+        const formData = getValues();
+        updateFn(formData.items);
+        updateCallbackFn(formData.items);
+    }, [fields, chosen]);
 
     return (
         <div className="fieldsRepeater">
             <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-                {items
-                    ? items.map(o => <div key={o.fieldId} className="fieldsRepeater__panel p-panel p-component">
+                {watchFields
+                    ? watchFields.map((o, index) => <div key={o.fieldId}
+                                                         className="fieldsRepeater__panel p-panel p-component">
                             <div className="fieldsRepeater__heading p-panel p-panel-header">
                                 <span onClick={() => setNewChosen(o.fieldId)}>{o.nameValue}</span>
                                 <Button icon="pi pi-times"
@@ -121,37 +97,37 @@ const RepeaterFields = ({
                                         className="actionBtn"
                                         type="button"
                                         aria-label={__('Cancella', 'gepafin')}
-                                        onClick={() => removeItem(o.fieldId)}/>
+                                        onClick={() => removeItem(index)}/>
+                            </div>
+                            <div className="fieldsRepeater__fields p-panel-content" data-hide={chosen !== o.fieldId}>
+                                <FormField
+                                    type="textinput"
+                                    fieldName={`items.${index}.nameValue`}
+                                    label={__('Titolo del file', 'gepafin')}
+                                    control={control}
+                                    errors={errors}
+                                    defaultValue={o.nameValue}
+                                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                                />
+                                <FormField
+                                    type="fileupload"
+                                    disabled={isEmpty(o.nameValue)}
+                                    setDataFn={setValue}
+                                    saveFormCallback={doUpdateAfterFileUploaded}
+                                    fieldName={`items.${index}.fileValue`}
+                                    label={__('File', 'gepafin')}
+                                    control={control}
+                                    register={register}
+                                    errors={errors}
+                                    defaultValue={o.fileValue ? o.fileValue : []}
+                                    accept={[]}
+                                    source={sourceName}
+                                    sourceId={sourceId}
+                                    multiple={false}
+                                    deleteOnBackend={false}
+                                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                                />
                             </div>
-                            {chosen === o.fieldId
-                                ? <div className="fieldsRepeater__fields p-panel-content">
-                                    <FormField
-                                        type="textinput"
-                                        fieldName="nameValue"
-                                        label={__('Titolo del file', 'gepafin')}
-                                        control={control}
-                                        errors={errors}
-                                        defaultValue={o.nameValue}
-                                        config={{ required: __('È obbligatorio', 'gepafin') }}
-                                    />
-                                    <FormField
-                                        type="fileupload"
-                                        disabled={isEmpty(o.nameValue)}
-                                        setDataFn={setValue}
-                                        saveFormCallback={doUpdateAfterFileUploaded}
-                                        fieldName="fileValue"
-                                        label={__('File', 'gepafin')}
-                                        control={control}
-                                        register={register}
-                                        errors={errors}
-                                        defaultValue={o.fileValue ? o.fileValue : []}
-                                        accept={[]}
-                                        source={sourceName}
-                                        sourceId={sourceId}
-                                        multiple={false}
-                                        config={{ required: __('È obbligatorio', 'gepafin') }}
-                                    />
-                                </div> : null}
                         </div>
                     ) : null}
             </form>
@@ -159,7 +135,7 @@ const RepeaterFields = ({
                 className="fieldsRepeater__addNew"
                 outlined
                 type="button"
-                disabled={!isEmpty(chosen.fileId) && (isEmpty(watchName) || isEmpty(watchFile))}
+                disabled={watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0}
                 onClick={addNew}
                 label={__('Aggiungi nuovo file', 'gepafin')}
             />