- updates and fixes;

src/pages/BandoFormsPreview/index.js

@@ -1,68 +1,75 @@
 import React, { useState, useEffect } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { bandoTest, formData } from '../../tempData';
+import { klona } from 'klona';
+import { head } from 'ramda';
+import { useForm } from 'react-hook-form';
 
-// tools
-import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
-import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import FormsService from '../../service/forms-service';
 
 // components
 import { Skeleton } from 'primereact/skeleton';
-import { Accordion } from 'primereact/accordion';
-import { AccordionTab } from 'primereact/accordion';
-import { InputTextarea } from 'primereact/inputtextarea';
 import { Button } from 'primereact/button';
-import { useForm } from 'react-hook-form';
-import { is, isNil } from 'ramda';
 import FormField from '../../components/FormField';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const BandoFormsPreview = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
-    const [bando, setBando] = useState({});
-    const [data, setData] = useState({});
-    const [isLoading, setIsLoading] = useState(true);
+    const [formData, setFormData] = useState([]);
+    const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
     const {
         control,
         handleSubmit,
-        formState: { errors, isValid },
-        setValue,
-        register,
-        trigger,
+        formState: { errors },
         getValues,
-        clearErrors
-    } = useForm({defaultValues: {}, mode: 'onChange'});
+    } = useForm({ defaultValues: {}, mode: 'onChange' });
     const values = getValues();
 
-    const onSubmit = (formData) => {
-        console.log('onSubmit', formData);
-    };
+    const onSubmit = () => {}
 
     const closePreview = () => {
-        navigate(`/bandi/${id}`);
+        const parsedId = parseInt(id)
+        const bandoId = !isNaN(parsedId) ? parsedId : 0;
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        navigate(`/bandi/${bandoId}/forms/${bandoFormId}`);
+    }
+
+    const getFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setFormName(data.data.label);
+            const elements = klona(data.data.content);
+            setFormData(elements);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormCallbacks = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     useEffect(() => {
-        //const parsed = parseInt(id)
-        //const bandoId = !isNaN(parsed) ? parsed : 0;
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
-        setTimeout(() => {
-            const data = formData;
-            setData(data);
-
-            const bandoData = bandoTest;
-            setBando(bandoData);
-
-            setIsLoading(false)
-        }, 3000);
-    }, [id]);
+        if (bandoFormId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
+        }
+    }, [id, formId]);
 
     return (
         <div className="appPage">
-            {!isLoading
+            {!isAsyncRequest
                 ? <div className="appPage__pageHeader">
-                    <h1>{sprintf(__('Domanda per il Bando: %s', 'gepafin'), bando.name)}</h1>
+                    <h1>{formName}</h1>
                 </div>
                 : <>
                     <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
@@ -71,7 +78,7 @@ const BandoFormsPreview = () => {
 
             <div className="appPage__spacer"></div>
 
-            {!isLoading
+            {!isAsyncRequest
                 ? <div className="appPage__content">
                     <div className="appPageSection__preview">
                         <Button
@@ -83,15 +90,23 @@ const BandoFormsPreview = () => {
                     </div>
 
                     <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-                        {data.content.map(o => <FormField
-                            key={o.id}
-                            type={o.name}
-                            fieldName={`field_${o.id}`}
-                            label={o.label}
-                            control={control}
-                            errors={errors}
-                            defaultValue={values[`field_${o.id}`]}
-                        />)}
+                        {formData.map(o => {
+                            const label = head(o.settings.filter(o => o.name === 'label'));
+                            const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
+                            const options = head(o.settings.filter(o => o.name === 'options'));
+                            return <FormField
+                                key={o.id}
+                                type={o.name}
+                                fieldName={`field_${o.id}`}
+                                label={label ? label.value : ''}
+                                placeholder={placeholder ? placeholder.value : ''}
+                                control={control}
+                                errors={errors}
+                                defaultValue={values[`field_${o.id}`]}
+                                config={o.validators}
+                                options={options ? options.value : []}
+                            />
+                        })}
                     </form>
 
                     <div className="appPageSection__preview">