Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import { Button, Modal } from 'react-bootstrap'
import axios from 'axios'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import Datetime from 'react-datetime'
import 'react-datetime/css/react-datetime.css'
import { addNotification } from '../../../redux/notification/notification.actions'

const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {

        //Hooks
        const { register, handleSubmit, errors, setValue, clearErrors } = useForm()
        const [isActive, setIsActive] = useState(false)
        const [year, setYear] = useState(new Intl.DateTimeFormat('en-CA').format(new Date()))
        const dispatch = useDispatch()

        const onSubmit = (data) => {
                const submitData = new FormData()

                Object.entries({
                        ...data,
                        status: isActive ? 'a' : 'i',
                        date: year
                }).map(([key, value]) => {
                        submitData.append(key, value)
                })

                axios.post(action_link, submitData)
                        .then(({ data }) => {
                                if (!data.success) {
                                        return dispatch(addNotification({
                                                style: 'danger',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

                                clearErrors()
                                closeModal()
                                onComplete()
                                dispatch(addNotification({
                                        style: 'success',
                                        msg: 'Usuario registrado'
                                }))
                        })
        }

        useEffect(() => {
                if (type === 'edit') {
                        axios.get(action_link)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        setYear(data.data.date)
                                        setIsActive(data.data.status === 'a' ? true : false)
                                        setValue('title', data.data.title)
                                        setValue('description', data.data.description)
                                })
                }
        }, [type])

        return (
                <Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
                        <Modal.Header closeButton>
                                <Modal.Title>
                                        {
                                                type === 'add'
                                                        ? 'Agregar Objetivo'
                                                        : 'Editar Objetivo'
                                        }
                                </Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Body>
                                        <div className="d-flex" style={{ gap: '10px' }}>
                                                <div className='form-group'>
                                                        <label className="form-label">Título</label>
                                                        <input type="text" name='title' className='form-control' ref={register({ required: true })} />
                                                        {errors.title && <p>{errors.title.message}</p>}
                                                </div>
                                                <div className='form-group'>
                                                        <label className="form-label">Estatus</label>
                                                        <div
                                                                className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
                                                                data-toggle="toggle"
                                                                role="button"
                                                                style={{ width: '130px' }}
                                                                onClick={() => setIsActive(!isActive)}
                                                        >
                                                                <input
                                                                        type="checkbox"
                                                                        checked={isActive}
                                                                />
                                                                <div className="toggle-group">
                                                                        <label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
                                                                        <label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
                                                                        <span className="toggle-handle btn btn-light"></span>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                        <div className='form-group'>
                                                <label className="form-label">Fecha</label>
                                                <Datetime
                                                        dateFormat="DD-MM-YYYY"
                                                        timeFormat={false}
                                                        onChange={(e) =>
                                                                setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
                                                        }
                                                        inputProps={{ className: 'form-control' }}
                                                        initialValue={Date.parse(year)}
                                                        closeOnSelect
                                                        value={year}
                                                />
                                        </div>
                                        <div className='form-group'>
                                                <label className="form-label">Descripción</label>
                                                <textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
                                                {errors.description && <p>{errors.description.message}</p>}
                                        </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 EditAndAddModal