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 UbicationInput from "../../../../../../shared/ubication-input/UbicationInput";
import FormErrorFeedback from "../../../../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../../../../shared/loading-spinner/Spinner";

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 Location = (props) => {
  // props destructuring
  const { formattedAddress, companyId, jobId, addNotification } = props;

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

  // states
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);
  const [settedAddress, setSettedAddress] = useState(formattedAddress);
  // 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 handleModalOpen = (event) => {
    event && event.preventDefault();
    Object.entries(getValues()).map(([key, value]) => {
      setValue(key, "");
    });
    setIsModalOpen(!isModalOpen);
  };

  const handleEdit = async (e) => {
    e.preventDefault();
    handleModalOpen();
    // if (formattedAddress) {
    //   await axios
    //     .get(`/my-company/${companyId}/job/edit/${jobId}/location`)
    //     .then((response) => {
    //       const resData = response.data;
    //        (resData);
    //       if (resData.success) {
    //         Object.entries(resData.data).map(async ([key, value]) => {
    //           if (value && value !== "n") {
    //             setValue(key, value);
    //           }
    //         });
    //         isAddressEmpty.current = false;
    //       }
    //     });
    // }
  };

  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) => {
    setModalLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    await axios
      .post(`/my-company/${companyId}/job/edit/${jobId}/location`, formData)
      .then((response) => {
        const resData = response.data;
         (resData);
        if (resData.success) {
          setSettedAddress(resData.data);
          handleModalOpen();
        } 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,
            });
          }
        }
      });
    setModalLoading(false);
  };
  // https://leaderslinked.com/profile/my-profiles/location/MTI3NjkxNTAg
  return (
    <React.Fragment>
      <div className="user-profile-ov">
        <h3 style={{ display: "flex" }}>
          Ubicación
          <div>
            <a
              href="#"
              title=""
              className="btn-location-edit"
              onClick={handleEdit}
            >
              <i className="fa fa-pencil"></i>
            </a>
          </div>
        </h3>
        <p id="location-formatted_address">{settedAddress}</p>
      </div>

      {/* modal */}
      <Modal
        show={isModalOpen}
        onHide={handleModalOpen}
        style={{ overflowY: "scroll" }}
      >
        <Modal.Header closeButton>
          <Modal.Title>Ubicación</Modal.Title>
        </Modal.Header>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <Modal.Body>
            <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>
          </Modal.Body>
          <Modal.Footer>
            <Button type="submit">Enviar</Button>
            <Button variant="danger" onClick={handleModalOpen}>
              Cancel
            </Button>
          </Modal.Footer>
        </form>
        {modalLoading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
      </Modal>
    </React.Fragment>
  );
};

export default Location;