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 } = 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 }) => console.log(data))

    }

  }, [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 })} onChange={(e) => setJobsDescriptions(e.target.value)}>

                {

                  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 })} onChange={(e) => setJobsCategory(e.target.value)}>

                {

                  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 })} onChange={(e) => setIndustry(e.target.value)}>

                {

                  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}

                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"

              />

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