Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { useForm } from "react-hook-form";
import { styled } from "@mui/material";

import { axios } from "utils";
import { addNotification } from "@app/redux/notification/notification.actions";

import Spinner from "@components/UI/Spinner";
import UbicationInput from "@components/UI/inputs/UbicationInput";
import FormErrorFeedback from "@components/UI/form/FormErrorFeedback";

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 = ({ addNotification }) => {
  const [loading, setLoading] = useState(false);

  const {
    register,
    handleSubmit,
    setValue,
    clearErrors,
    watch,
    setError,
    formState: { errors },
  } = useForm();

  const getLocations = () => {
    axios
      .get("account-settings/location")
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          throw new Error("Error interno. Por favor, intente mas tarde");
        }

        Object.entries(data).forEach(([key, value]) => {
          setValue(key, value);
        });
      })
      .catch((err) => {
        addNotification({ style: "danger", msg: err.message });
      });
  };

  const getAddress = (address) => {
    Object.entries(address).forEach(([key, value]) => {
      if (value) {
        register(key);
        clearErrors(key);
        setValue(key, value);
      }
    });
  };

  const onSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => formData.append(key, value));

    axios.post("/account-settings/location", formData).then((response) => {
      const { data, success } = response.data;

      if (success) {
        addNotification({
          style: "success",
          msg: data.message,
        });
      } else {
        if (typeof data === "object") {
          Object.entries(data).forEach(([key, value]) => {
            setError(key, { type: "manual", message: value[0] });
          });
        } else {
          const errorMessage =
            typeof data === "string"
              ? data
              : "Ha ocurrido un error, Por favor intente mas tarde";
          addNotification({
            style: "danger",
            msg: errorMessage,
          });
        }
      }
    });
    setLoading(false);
  };

  useEffect(() => {
    getLocations();

    register("formatted_address", {
      required: "por favor seleccione una ubicación correcta",
    });
  }, []);

  return (
    <div className="settings-container">
      <h2>Cambiar Ubicación</h2>
      <div className="acc-setting_content">
        <form onSubmit={handleSubmit(onSubmit)}>
          <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={getAddress}
                  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);