updated form fields and application logic;

src/components/FormFieldRepeaterCriteria/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { head, isNil, pluck } from 'ramda';
+import { head, isEmpty, isNil, pluck } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -9,6 +9,8 @@ import { Button } from 'primereact/button';
 import { Menu } from 'primereact/menu';
 import { Dropdown } from 'primereact/dropdown';
 import { InputNumber } from 'primereact/inputnumber';
+import { diff } from 'deep-object-diff';
+import { klona } from 'klona';
 
 const FormFieldRepeaterCriteria = ({
                                        data,
@@ -99,6 +101,22 @@ const FormFieldRepeaterCriteria = ({
         })
     }, []);
 
+    useEffect(() => {
+        const diffData = diff(data[fieldName], stateFieldData);
+
+        if (!isEmpty(diffData)) {
+            const storeFieldData = data[fieldName] ?? [];
+            setStateFieldData(storeFieldData);
+            setStateOptionsData(prevState => {
+                const ids = pluck('lookUpDataId', prevState)
+                const objectsToAdd = klona(storeFieldData)
+                    .filter(o => !ids.includes(o.lookUpDataId))
+                    .map(o => ({...o, id: null, score: 0}));
+                return [...prevState, ...objectsToAdd];
+            });
+        }
+    }, [data]);
+
     useEffect(() => {
         setStateOptionsData([...options]);
     }, [options]);
@@ -126,7 +144,7 @@ const FormFieldRepeaterCriteria = ({
                         <label>{__('Nome criterio di valutazione', 'gepafin')}</label>
                         <div className="p-inputgroup flex-1">
                         {properField(o, i)}
-                            <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                            <Button type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                         </div>
                         {isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
                     </div>