Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import Datetime from 'react-datetime'
import axios from 'axios'
import SearchLocationInput from '../../../shared/SearchLocationInput'
import DescriptionInput from '../../../shared/DescriptionInput'
import { useHistory, useParams } from 'react-router-dom'
import "react-datetime/css/react-datetime.css"
import { validate } from 'uuid'
import { addNotification } from '../../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'

const FormView = ({ actionLink, googleApiKey }) => {

  const history = useHistory()
  const { action } = useParams()
  const dispatch = useDispatch()


  const { handleSubmit, register, setValue, errors, watch } = useForm()

  const [inputErrors, setInputErrors] = useState({})
  const [location, setLocation] = useState({})
  const [isActive, setIsActive] = useState(false)
  const [year, setYear] = useState('')
  const [locationLabel, setLocationLabel] = useState('')
  const [jobsDescriptions, setJobsDescriptions] = useState([
    {
      value: "8ff86a9a-651c-4dd0-86c1-b9c0716d09e0",
      label: "Programador Junior"
    }
  ])
  const [jobsCategory, setJobsCategory] = useState([
    {
      value: "7bd009b8-bd25-4602-bf85-9496af80afbd",
      label: "Finanzas"
    }
  ])
  const [industry, setIndustry] = useState([
    {
      value: "307c261f-2d27-4b3c-a86a-6f69a596edb8",
      label: "Bienes raíces"
    }
  ])


  const onSubmit = (data) => {

    const formData = new FormData()
    const submitData = {
      ...data,
      ...location,
      last_date: year,
      status: isActive ? "a" : "i"
    }

    if (!location.formatted_address) {
      return setInputErrors(prev => ({ ...prev, location: "Es requerida una ubicación" }))
    }
    if (!year) {
      return setInputErrors(prev => ({ ...prev, year: "Este campo es requerido" }))
    }

    Object.entries(submitData).forEach((entries) => {
      formData.append(entries[0], entries[1])
    })

    axios.post(actionLink, formData)
      .then(({ data }) => {
        if (!data.success) {
          dispatch(addNotification({
            style: "error",
            msg: "Ha ocurrido un error"
          }))
          return
        }
        history.goBack()
        dispatch(addNotification({
          style: "success",
          msg: `Registro ${action === "edit" ? "actualizado" : "guardado"}`
        }))
      })
      .catch((err) => dispatch(addNotification({
        style: "error",
        msg: "Ha ocurrido un error"
      })))

  }

  useEffect(() => register("description"), [])

  useEffect(() => {
    if (action === "edit") {
      axios.get(actionLink)
        .then(({ data }) => {
          const respData = data.data

          if (data.success) {
            setValue("name", respData.name)
            setValue("description", respData.description)
            setLocationLabel(respData.formatted_address)
            setYear(respData.last_date)
            respData.status === "a" ? setIsActive(true) : setIsActive(false)

            Object.entries(respData.job_category.category_options).map(([value, label]) => {
              setJobsCategory(prev => [...prev, { value: value, label: label }])
            })

            Object.entries(respData.industry.industry_options).map(([value, label]) => {
              setIndustry(prev => [...prev, { value: value, label: label }])
            })

            Object.entries(respData.job_description.description_options).map(([value, label]) => {
              setJobsDescriptions(prev => [...prev, { value: value, label: label }])
            })

          }
        })
    }
  }, [action])

  return (
    <section className="container">
      <div className="row">
        <div className="col-xs-12 col-md-12">
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
              <label>Nombre</label>
              <input
                type="text"
                name="name"
                className="form-control"
                ref={register({ required: true, maxLength: 120 })}
              />
              {errors.name && <p>Este campo es requerido</p>}
            </div>
            <div className="form-group">
              <label>Cargo a evaluar</label>
              <select name="job_description_id" className="form-control" ref={register({ required: true })}>
                {
                  jobsDescriptions.map(({ label, value }) => (
                    <option value={value}>{label}</option>
                  ))
                }
              </select>
            </div>
            <div className="form-group">
              <label>Categoría de Empleo</label>
              <select name="job_category_id" className="form-control" ref={register({ required: true })}>
                {
                  jobsCategory.map(({ label, value }) => (
                    <option value={value}>{label}</option>
                  ))
                }
              </select>
            </div>
            <div className="form-group">
              <label>Ubicación</label>
              <SearchLocationInput
                value={locationLabel}
                setValue={setLocationLabel}
                googleApiKey={googleApiKey}
                updateData={setLocation}
              />
              {inputErrors.location && <p>{inputErrors.location}</p>}
            </div>
            <div className="form-group">
              <label>Industria</label>
              <select name="industry_id" className="form-control" ref={register({ required: true })}>
                {
                  industry.map(({ label, value }) => (
                    <option value={value}>{label}</option>
                  ))
                }
              </select>
            </div>
            <div className="form-group">
              <label>Último día de aplicación</label>
              <Datetime
                dateFormat="DD-MM-YYYY"
                timeFormat={false}
                initialValue={action === "edit" ? Date.UTC(year) : Date.now()}
                onChange={(e) =>
                  setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
                }
                inputProps={{ className: 'form-control' }}
                closeOnSelect
              />
              {inputErrors.year && <p>{inputErrors.year}</p>}
            </div>
            <div className="form-group">
              <label>Descripción</label>
              <DescriptionInput
                setValue={setValue}
                name="description"
                defaultValue={action === "edit" ? watch("description") : ''}
              />
            </div>
            <div className="form-group">
              <label>Estatus</label>
              <div
                className={`toggle btn btn-block 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 for="status" className="btn btn-primary toggle-on">Activo</label>
                  <label for="status" className="btn btn-light toggle-off">Inactivo</label>
                  <span className="toggle-handle btn btn-light"></span>
                </div>
              </div>
            </div>
            <div className="form-group">
              <button
                type="submit"
                className="btn btn-primary btn-form-save-close mr-2"
              >
                Guardar
              </button>
              <button
                type="button"
                className="btn btn-secondary btn-edit-cancel"
                onClick={() => history.goBack()}
              >
                Cancelar
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  )
}
export default FormView