Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useState, useEffect, useRef } from "react";
import { Button, Modal } from "react-bootstrap";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import {axios} from "../../../../../../utils";
import FormErrorFeedback from "../../../../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../../../../shared/loading-spinner/Spinner";
import UbicationInput from "../../../../../../shared/ubication-input/UbicationInput";

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const AddJobModal = (props) => {
  // props destructuring
  const {
    show,
    onHide,
    companyId,
    fetchJobs,
    addNotification,
    employmentTypes,
    jobCategories,
  } = props;

  // React hook form
  const {
    register,
    handleSubmit,
    errors,
    getValues,
    setError,
    setValue,
    watch,
    clearErrors,
  } = useForm();

  // states
  const wrapperRef = useRef();
  const [loading, setLoading] = useState(false);
  const [state, setState] = useState({ date: null, isOpen: false });
  const [settedAddress, setSettedAddress] = useState("");
  // refs
  const isAddressEmpty = useRef(true);
  const addressKeys = useRef([
    "address1",
    "address2",
    "country",
    "state",
    "city1",
    "city2",
    "postal_code",
    "latitude",
    "longitude",
  ]);

  useEffect(() => {
    addressKeys.current.map((addressKey) => {
      register(addressKey);
    });
    register("formatted_address", {
      required: "por favor seleccione una ubicación correcta",
    });
  }, []);

  const getAddressHandler = (addresObject) => {
    addressKeys.current.map((addressKey) => {
      setValue(addressKey, "");
    });
    const { address_components } = addresObject;
    if (address_components) {
      address_components.map((address_component) => {
        const address_component_name = address_component.long_name;
        const address_component_type = address_component.types[0];
        switch (address_component_type) {
          case "route":
            setValue("address1", address_component_name);
            break;
          case "sublocality":
            setValue("address2", address_component_name);
            break;
          case "locality":
            setValue("city1", address_component_name);
            break;
          case "administrative_area_level_2":
            setValue("city2", address_component_name);
            break;
          case "administrative_area_level_1":
            setValue("state", address_component_name);
            break;
          case "country":
            setValue("country", address_component_name);
            break;
          case "postal_code":
            setValue("postal_code", address_component_name);
            break;
          case "geometry":
            setValue("latitude", address_component.latitude);
            setValue("longitude", address_component.longitude);
            break;
          default:
            break;
        }
      });
      isAddressEmpty.current = false;
      clearErrors("formatted_address");
    } else {
      isAddressEmpty.current = true;
    }
    setValue("formatted_address", addresObject.formatted_address);
  };

  const onSubmitHandler = async (data) => {
     (data);
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    await axios
      .post(`/my-company/${companyId}/job/add`, formData)
      .then((response) => {
        const resData = response.data;
         (resData);
        if (resData.success) {
          fetchJobs();
          onHide();
        } else {
          const resError = resData.data;
          if (resError.constructor.name === "Object") {
            Object.entries(resError).map(([key, value]) => {
              if (key in getValues()) {
                setError(key, {
                  type: "manual",
                  message: Array.isArray(value) ? value[0] : value,
                });
              }
            });
          } else {
            addNotification({
              style: "danger",
              msg: resError,
            });
          }
        }
      });
    setLoading(false);
  };
  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Nuevo Empleo
        </Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <Modal.Body>
          <div style={{ position: "relative" }}>
            <div className="form-group">
              <input
                type="text"
                name="title"
                id="title"
                placeholder="Titulo"
                ref={register({
                  required: "Por favor ingrese el titulo",
                })}
              />
              {errors.title && (
                <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
              )}
            </div>
            <div className="form-group">
              <select
                name="employment_type"
                id="employment_type"
                defaultValue=""
                ref={register({
                  required: "Por favor eliga un tipo",
                })}
              >
                <option value="" hidden>
                  Tipo
                </option>
                {Object.entries(employmentTypes).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {errors.employment_type && (
                <FormErrorFeedback>
                  {errors.employment_type.message}
                </FormErrorFeedback>
              )}
            </div>
            <div className="form-group">
              <input
                type="date"
                name="last_date_of_application"
                id="last_date_of_application"
                ref={register({
                  required: "Por favor ingrese una fecha",
                })}
              />
              {errors.last_date_of_application && (
                <FormErrorFeedback>
                  {errors.last_date_of_application.message}
                </FormErrorFeedback>
              )}
              {/* <input type="text" onClick={openCalendar} />
              <div ref={wrapperRef}>
                {state.isOpen && (
                  <Datetime
                    input={false}
                    onChange={handleDateChange}
                  ></Datetime>
                )}
              </div> */}
            </div>
            <div className="form-group">
              <select
                name="job_category_id"
                id="job_category_id"
                defaultValue=""
                ref={register({
                  required: "Por favor eliga un tipo",
                })}
              >
                <option value="1" hidden>
                  Categoría
                </option>
                {Object.entries(jobCategories).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {errors.job_category_id && (
                <FormErrorFeedback>
                  {errors.job_category_id.message}
                </FormErrorFeedback>
              )}
            </div>
            <div className="form-group datefm">
              <UbicationInput
                onGetAddress={getAddressHandler}
                settedQuery={watch("formatted_address")}
              />
              <i className="fa fa-map-marker"></i>
              {errors.formatted_address && (
                <FormErrorFeedback>
                  {errors.formatted_address.message}
                </FormErrorFeedback>
              )}
            </div>

            {loading && (
              <StyledSpinnerContainer>
                <Spinner />
              </StyledSpinnerContainer>
            )}
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button type="submit">Crear</Button>
          <Button onClick={onHide} variant="danger">
            Cancelar
          </Button>
        </Modal.Footer>
      </form>
    </Modal>
  );
};

export default AddJobModal;