Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import DescriptionInput from '../../../shared/DescriptionInput'

const QuestionModal = ({ show, closeModal, question, onSubmit, questionType }) => {

        const { register, setValue, watch } = useForm()
        const [values, setValues] = useState({
                type: 'open',
                maxlength: '0',
                multiline: '0'
        })

        const handleChange = ({ target }) => {
                setValues({ ...values, [target.name]: target.value })
        }

        useEffect(() => {
                register('text')
                setValue('text', question.text)
        }, [question])

        const submit = (e) => {
                e.preventDefault()

                if (questionType === 'add') {
                        onSubmit({
                                ...question,
                                text: watch('text'),
                                type: values.type,
                                maxlength: values.maxlength,
                                multiline: values.multiline,
                                answer: values.type === 'multiple' ? [] : ''
                        })
                        closeModal()
                        return
                }
                if (questionType === 'edit') {
                        onSubmit({
                                ...question,
                                text: watch('text'),
                                type: values.type,
                                maxlength: values.maxlength,
                                multiline: values.multiline,
                                answer: values.type === 'multiple' ? [] : ''
                        })
                        closeModal()
                }
        }

        return (
                <Modal size="md" onHide={closeModal} show={show}>
                        <Modal.Header closeButton>
                                <Modal.Title>{`${questionType === 'add' ? 'Agregar' : 'Editar'} pregunta`}</Modal.Title>
                        </Modal.Header>
                        <form onSubmit={submit}>
                                <Modal.Body>
                                        <div className='form-group'>
                                                <label className="form-label">Texto</label>
                                                <DescriptionInput
                                                        defaultValue={question.text}
                                                        name='text'
                                                        onChange={setValue}
                                                />
                                        </div>
                                        <div className='form-group'>
                                                <label className="form-label">Tipo</label>
                                                <select name='type' className='form-control' onChange={handleChange} defaultValue={question.type}>
                                                        <option value='open'>Abierto</option>
                                                        <option value='simple'>Simple</option>
                                                        <option value='multiple'>Multiple</option>
                                                </select>
                                        </div>
                                        {
                                                values.type === 'open'
                                                &&
                                                <>
                                                        <div className='form-group'>
                                                                <label className="form-label">Longitud máxima</label>
                                                                <input type="number" name='maxLength' className='form-control' onChange={handleChange} defaultValue={question.maxlength} />
                                                        </div>
                                                        <div className='form-group'>
                                                                <label className="form-label">Mútiples lineas</label>
                                                                <select name='multiline' className='form-control' onChange={handleChange} defaultValue={question.multiline}>
                                                                        <option value='open'>Si</option>
                                                                        <option value='simple'>No</option>
                                                                </select>
                                                        </div>
                                                </>
                                        }
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button variant="primary" type='submit'>
                                                Enviar
                                        </Button>
                                        <Button variant="danger" onClick={closeModal}>
                                                Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default QuestionModal