Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2802 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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