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);