Proyectos de Subversion LeadersLinked - Antes de SPA

import { axios } from "../../../utils";
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";
import styled from "styled-components";
import { addNotification } from "../../../redux/notification/notification.actions";
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 Location = (props) => {
  // redux destructuring
  const { addNotification } = props;

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

  // states
  const [loading, setLoading] = useState(false);

  // 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 handleOnSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    await axios
      .post("/account-settings/location", formData)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          addNotification({
            style: "success",
            msg: resData.data.message,
          });
        } else {
          if (typeof resData.data === "object") {
            resData.data;
            Object.entries(resData.data).map(([key, value]) => {
              setError(key, { type: "manual", message: value[0] });
            });
          } else {
            const errorMessage =
              typeof resData.data === "string"
                ? resData.data
                : "Ha ocurrido un error, Por favor intente mas tarde";
            addNotification({
              style: "danger",
              msg: errorMessage,
            });
          }
        }
      });
    setLoading(false);
  };

  useEffect(async () => {
    setLoading(true);
    await axios.get("account-settings/location").then((response) => {
      const resData = response.data;
      if (resData.success) {
        Object.entries(resData.data).map(([key, value]) => {
          setValue(key, value);
        });
      }
    });
    setLoading(false);
  }, []);

  return (
    <div className="settings-container">
      <h2>Cambiar Ubicación</h2>
      <div className="acc-setting_content">
        <form onSubmit={handleSubmit(handleOnSubmit)}>
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
            <div className="cp-field cp-field2">
              <label htmlFor="first_name">Ubicación</label>
              <div className="cpp-fiel">
                <UbicationInput
                  onGetAddress={getAddressHandler}
                  settedQuery={watch("formatted_address")}
                />
                <i className="fa fa-map-marker"></i>
              </div>
              {
                <FormErrorFeedback>
                  {errors?.formatted_address?.message}
                </FormErrorFeedback>
              }
            </div>
            <div className="col-2 mx-auto d-flex align-items-center justify-content-center">
              <button type="submit" className="btn btn-secondary mt-3">
                Guardar
              </button>
            </div>
          </div>
        </form>
      </div>
      {loading &&
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      }
    </div>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(Location);