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 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'

						}))

					}

					Object.entries(data.data).map(([key, value]) => {

						if (key === 'status') {

							return setValue(key, value ? 'a' : 'i')

						}

						setValue(key, value)

					})

				})

		}

	}, [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