- saving progress;

src/pages/BandoEdit/components/BandoEditFormStep1/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
@@ -10,9 +10,16 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
 import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
 import BandoEditFormActions from '../BandoEditFormActions';
 import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
+import BandoService from '../../../../service/bando-service';
+import LookupdataService from '../../../../service/lookupdata-service';
+import { storeSet, useStore } from '../../../../store';
 
 const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
     const navigate = useNavigate();
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const [aimedToOptions, setAimedToOptions] = useState([]);
+    const [faqOptions, setFaqOptions] = useState([]);
+    const [formInitialData, setFormInitialData] = useState(initialData);
     const {
         control,
         handleSubmit,
@@ -21,8 +28,13 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         register,
         trigger,
         getValues,
-        clearErrors
-    } = useForm({defaultValues: initialData, mode: 'onChange'});
+        clearErrors,
+        reset
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData;
+        }, [formInitialData]), mode: 'onChange'
+    });
     const values = getValues();
     let minDateStart = new Date();
 
@@ -30,22 +42,67 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         if (!isNil(formData.dates) && formData.dates.length) {
             formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
         }
-        console.log('onSubmit', formData);
+
+        if (!formData.id) {
+            BandoService.createBando(formData, createCallback, errCreateCallback);
+        } else {
+            BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
+        }
     };
 
-    // TODO temp data
-    const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
-    const exampleOfFaqOptions = [
-        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor', visible: true }
-    ];
-    // end of temp data
+    const createCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const values = getValues();
+            if (!values.id && data.data.id) {
+                navigate(`/bandi/${data.data.id}`);
+            } else {
+                setFormInitialData(data.data);
+                reset();
+            }
+        }
+    }
+
+    const errCreateCallback = (data) => {
+        console.log('errCreateCallback', data);
+    }
 
     const openPreview = () => {
-        navigate('/bandi/11/preview');
+        navigate(`/bandi/${values.id}/preview`);
     }
 
     const openPreviewEvaluation = () => {
-        navigate('/bandi/11/preview-evaluation');
+        navigate(`/bandi/${values.id}/preview-evaluation`);
+    }
+
+    const lookupdataCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const aimedTo = data.data
+                .filter(o => o.type === 'AIMED_TO')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        lookUpDataId: o.id
+                    };
+                });
+            setAimedToOptions(aimedTo);
+            const faqItems = data.data
+                .filter(o => o.type === 'FAQ')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        lookUpDataId: o.id
+                    };
+                });
+            setFaqOptions(faqItems);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errLookupdataCallback = (data) => {
+        console.log('errLookupdataCallback', data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     useImperativeHandle(
@@ -65,12 +122,26 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         }, [errors, isValid]);
 
     useEffect(() => {
+        setFormInitialData(initialData);
+    }, [initialData]);
+
+    useEffect(() => {
+        reset(formInitialData);
+    }, [formInitialData]);
+
+    useEffect(() => {
+        if (isAsyncRequest !== 0) {
+            return;
+        }
+
         trigger().then(() => clearErrors());
+        //storeSet.main.setAsyncRequest();
+        LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]])
     }, []);
 
     return (
         <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-            <UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
+            <UnsavedChangesDetector initialData={formInitialData} getValuesFn={getValues}/>
             <FormField
                 type="switch"
                 fieldName="confidi"
@@ -123,7 +194,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
                 data={values}
                 setDataFn={setValue}
                 fieldName="aimedTo"
-                options={exampleOfAimedToOptions}
+                options={aimedToOptions}
                 errors={errors}
                 register={register}
                 trigger={trigger}
@@ -191,7 +262,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
                 data={values}
                 setDataFn={setValue}
                 fieldName="faq"
-                options={exampleOfFaqOptions}
+                options={faqOptions}
                 errors={errors}
                 register={register}
                 trigger={trigger}
@@ -210,6 +281,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
             </div>
 
             <BandoEditFormActions
+                id={values.id}
                 openPreview={openPreview}
                 openPreviewEvaluation={openPreviewEvaluation}/>
         </form>