import { useState, useEffect } from 'react' import Loader from '../Loader' import htmlParser from 'html-react-parser' import dynamic from 'next/dynamic' import api from '../../utils/api' import fr from 'date-fns/locale/fr' import { registerLocale } from 'react-datepicker' import date from 'date-and-time' import 'react-datepicker/dist/react-datepicker.css' registerLocale('fr', fr) const FunctionForm = (props) => { const [inputState, setInputState] = useState({}) const [message, setMessage] = useState('') const [isLoading, setIsLoading] = useState(false) // inputState par défaut useEffect(() => { const inputStateNew = { ...inputState } props.inputsArray.forEach((input) => { if (input.type === 'select' && input.options.length > 0) { inputStateNew[input.name] = input.options[0].value } }) setInputState(inputStateNew) }, []) const handleSubmit = (event) => { setIsLoading(true) event.preventDefault() api.post(`/functions/${props.slug}`, inputState) .then((response) => { setMessage(response.data.resultHTML) setIsLoading(false) }) .catch((error) => { setMessage(error.response.data.message) setIsLoading(false) }) } const handleChange = (event) => { const inputStateNew = { ...inputState } inputStateNew[event.target.name] = event.target.value setInputState(inputStateNew) } if (props.inputsArray.length <= 0) { return (

La fonction n'est pas encore disponible.

) } return ( <>
{props.inputsArray.map((input, index) => { switch (input.type) { case 'text': return (
) case 'integer': case 'float': return (
) case 'calendar': // Permet au datepicker de prendre la hauteur if (typeof window !== 'undefined') { const newScript = document.createElement('script') newScript.src = '/js/extraHeightCSS.js' document.body.appendChild(newScript) } // eslint-disable-next-line const DatePicker = dynamic( () => import('react-datepicker'), { ssr: false } ) return (

{ try { if (inputState[input.name] != null) { const dateArray = inputState[input.name].split('/') const year = dateArray[2] const month = dateArray[1] const day = dateArray[0] return new Date(year, parseInt(month) - 1, parseInt(day) + 1) } throw new Error('Not a valid date') } catch { return new Date() } })()} locale='fr' dateFormat='dd/MM/yyyy' fixedHeight placeholderText={input.placeholder} onChange={(dateObject) => { try { const formattedDate = date.format(dateObject, 'DD/MM/YYYY', true) handleChange({ target: { name: input.name, value: formattedDate } }) } catch {} }} />
) case 'select': return (
) default: return (

Erreur, l'input n'est pas valide...

) } })}
{ (isLoading) ? : htmlParser(message) }
) } export default FunctionForm