Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2802 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3432 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { connect } from "react-redux";
3 
import { useForm } from "react-hook-form";
4 
import { styled } from "@mui/material";
2781 stevensc 5 
 
3432 stevensc 6 
import { axios } from "utils";
7 
import { addNotification } from "@app/redux/notification/notification.actions";
2781 stevensc 8 
 
3432 stevensc 9 
import Spinner from "@components/UI/Spinner";
10 
import UbicationInput from "@components/UI/inputs/UbicationInput";
11 
import FormErrorFeedback from "@components/UI/form/FormErrorFeedback";
2781 stevensc 12 
 
3432 stevensc 13 
const StyledSpinnerContainer = styled("div")`
2781 stevensc 14 
  position: absolute;
15 
  left: 0;
16 
  top: 0;
17 
  width: 100%;
18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
20 
  display: flex;
21 
  justify-content: center;
22 
  align-items: center;
23 
  z-index: 300;
3432 stevensc 24 
`;
2781 stevensc 25 
 
26 
const Location = ({ addNotification }) => {
3432 stevensc 27 
  const [loading, setLoading] = useState(false);
2781 stevensc 28 
 
29 
  const {
30 
    register,
31 
    handleSubmit,
32 
    setValue,
33 
    clearErrors,
34 
    watch,
2802 stevensc 35 
    setError,
3432 stevensc 36 
    formState: { errors },
37 
  } = useForm();
2781 stevensc 38 
 
39 
  const getLocations = () => {
40 
    axios
3432 stevensc 41 
      .get("account-settings/location")
42 
      .then((response) => {
43 
        const { data, success } = response.data;
2781 stevensc 44 
 
45 
        if (!success) {
3432 stevensc 46 
          throw new Error("Error interno. Por favor, intente mas tarde");
2781 stevensc 47 
        }
48 
 
49 
        Object.entries(data).forEach(([key, value]) => {
3432 stevensc 50 
          setValue(key, value);
51 
        });
2781 stevensc 52 
      })
53 
      .catch((err) => {
3432 stevensc 54 
        addNotification({ style: "danger", msg: err.message });
55 
      });
56 
  };
2781 stevensc 57 
 
58 
  const getAddress = (address) => {
59 
    Object.entries(address).forEach(([key, value]) => {
60 
      if (value) {
3432 stevensc 61 
        register(key);
62 
        clearErrors(key);
63 
        setValue(key, value);
2781 stevensc 64 
      }
3432 stevensc 65 
    });
66 
  };
2781 stevensc 67 
 
68 
  const onSubmit = async (data) => {
3432 stevensc 69 
    setLoading(true);
70 
    const formData = new FormData();
71 
    Object.entries(data).forEach(([key, value]) => formData.append(key, value));
2781 stevensc 72 
 
3432 stevensc 73 
    axios.post("/account-settings/location", formData).then((response) => {
74 
      const { data, success } = response.data;
2781 stevensc 75 
 
3432 stevensc 76 
      if (success) {
77 
        addNotification({
78 
          style: "success",
79 
          msg: data.message,
80 
        });
81 
      } else {
82 
        if (typeof data === "object") {
83 
          Object.entries(data).forEach(([key, value]) => {
84 
            setError(key, { type: "manual", message: value[0] });
85 
          });
86 
        } else {
87 
          const errorMessage =
88 
            typeof data === "string"
89 
              ? data
90 
              : "Ha ocurrido un error, Por favor intente mas tarde";
2781 stevensc 91 
          addNotification({
3432 stevensc 92 
            style: "danger",
93 
            msg: errorMessage,
94 
          });
2781 stevensc 95 
        }
3432 stevensc 96 
      }
97 
    });
98 
    setLoading(false);
99 
  };
2781 stevensc 100 
 
101 
  useEffect(() => {
3432 stevensc 102 
    getLocations();
2781 stevensc 103 
 
3432 stevensc 104 
    register("formatted_address", {
105 
      required: "por favor seleccione una ubicación correcta",
106 
    });
107 
  }, []);
2781 stevensc 108 
 
109 
  return (
3432 stevensc 110 
    <div className="settings-container">
2781 stevensc 111 
      <h2>Cambiar Ubicación</h2>
3432 stevensc 112 
      <div className="acc-setting_content">
2781 stevensc 113 
        <form onSubmit={handleSubmit(onSubmit)}>
3432 stevensc 114 
          <div className="d-flex flex-wrap" style={{ gap: "1rem" }}>
115 
            <div className="cp-field cp-field2">
116 
              <label htmlFor="first_name">Ubicación</label>
117 
              <div className="cpp-fiel">
2781 stevensc 118 
                <UbicationInput
119 
                  onGetAddress={getAddress}
3432 stevensc 120 
                  settedQuery={watch("formatted_address")}
2781 stevensc 121 
                />
3432 stevensc 122 
                <i className="fa fa-map-marker"></i>
2781 stevensc 123 
              </div>
124 
              {
125 
                <FormErrorFeedback>
126 
                  {errors?.formatted_address?.message}
127 
                </FormErrorFeedback>
128 
              }
129 
            </div>
3432 stevensc 130 
            <div className="col-2 mx-auto d-flex align-items-center justify-content-center">
131 
              <button type="submit" className="btn btn-secondary mt-3">
2781 stevensc 132 
                Guardar
133 
              </button>
134 
            </div>
135 
          </div>
136 
        </form>
137 
      </div>
138 
      {loading && (
139 
        <StyledSpinnerContainer>
140 
          <Spinner />
141 
        </StyledSpinnerContainer>
142 
      )}
143 
    </div>
3432 stevensc 144 
  );
145 
};
2781 stevensc 146 
 
147 
const mapDispatchToProps = {
3432 stevensc 148 
  addNotification: (notification) => addNotification(notification),
149 
};
2781 stevensc 150 
 
3432 stevensc 151 
export default connect(null, mapDispatchToProps)(Location);