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="acc-setting"
      style={{
        position: "relative",
      }}
    >
      <h3>Básica</h3>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <div className="cp-field">
          <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="save-stngs pd2">
          <ul>
            <li>
              <button type="submit" className="btn-save-basic">
                Guardar
              </button>
            </li>
          </ul>
        </div>
        {/* <!--save-stngs end--> */}
        {/* <?php echo $this->form()->closeTag($form); ?>        */}
      </form>
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </div>
  );
};

// const mapStateToProps = (state) => ({

// })

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

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