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;