Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3156 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 { Avatar } from '@mui/material'
 3 
import { Avatar } from "@mui/material";
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 5 
import { axios } from "@app/utils";
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 6 
import { addNotification } from "@app/redux/notification/notification.actions";
7 
 
 7 
 
8 
import Button from '@app/components/UI/buttons/Buttons'
 8 
import Button from "@app/components/UI/buttons/Buttons";
9 
import Widget from '@app/components/UI/Widget'
 9 
import Widget from "@app/components/UI/Widget";
10 
import Spinner from '@app/components/UI/Spinner'
 10 
import Spinner from "@app/components/UI/Spinner";
11 
import DropzoneComponent from '@app/components/dropzone/DropzoneComponent'
 11 
import DropzoneComponent from "@app/components/dropzone/DropzoneComponent";
12 
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'
 12 
import FormErrorFeedback from "@app/components/UI/form/FormErrorFeedback";
Línea 13... Línea 13...
13 
 
 13 
 
14 
const ChangeImage = ({ addNotification }) => {
 14 
const ChangeImage = ({ addNotification }) => {
15 
  const [imageUrl, setImageUrl] = useState('')
 15 
  const [imageUrl, setImageUrl] = useState("");
16 
  const [imageFile, setImageFile] = useState(null)
 16 
  const [imageFile, setImageFile] = useState(null);
17 
  const [loading, setLoading] = useState(false)
 17 
  const [loading, setLoading] = useState(false);
Línea 18... Línea 18...
18 
  const [error, setError] = useState('')
 18 
  const [error, setError] = useState("");
19 
 
 19 
 
20 
  const handleOnDropImage = (acceptedFile) => {
 20 
  const handleOnDropImage = (acceptedFile) => {
21 
    if (!acceptedFile) {
 21 
    if (!acceptedFile) {
22 
      setImageUrl('')
 22 
      setImageUrl("");
23 
      setImageFile(null)
 23 
      setImageFile(null);
24 
      setError('')
 24 
      setError("");
Línea 25... Línea 25...
25 
      return
 25 
      return;
26 
    }
 26 
    }
27 
 
 27 
 
28 
    setError('')
 28 
    setError("");
29 
    const newImgUrl = URL.createObjectURL(acceptedFile)
 29 
    const newImgUrl = URL.createObjectURL(acceptedFile);
Línea 30... Línea 30...
30 
    setImageUrl(newImgUrl)
 30 
    setImageUrl(newImgUrl);
31 
    setImageFile(acceptedFile)
 31 
    setImageFile(acceptedFile);
Línea 32... Línea 32...
32 
  }
 32 
  };
Línea 33... Línea 33...
33 
 
 33 
 
34 
  const handleSubmit = async () => {
 34 
  const handleSubmit = async () => {
Línea 35... Línea 35...
35 
    if (!validate()) return
 35 
    if (!validate()) return;
36 
 
 36 
 
37 
    setLoading(true)
 37 
    setLoading(true);
38 
 
 38 
 
Línea 39... Línea 39...
39 
    const formData = new FormData()
 39 
    const formData = new FormData();
40 
    formData.append('image', imageFile)
 40 
    formData.append("image", imageFile);
41 
 
 41 
 
42 
    axios
 42 
    axios
43 
      .post('/account-settings/image/upload', formData)
 43 
      .post("/account-settings/image/upload", formData)
44 
      .then(({ data: responseData }) => {
 44 
      .then((response) => {
45 
        const { data, success } = responseData
 45 
        const { data, success } = response.data;
Línea 46... Línea 46...
46 
 
 46 
 
47 
        if (!success) {
 47 
        if (!success) {
48 
          const errorMessage =
 48 
          const errorMessage =
49 
            typeof data === 'string'
 49 
            typeof data === "string"
50 
              ? data
 50 
              ? data
51 
              : 'Ha ocurrido un error, Por favor intente más tarde'
 51 
              : "Ha ocurrido un error, Por favor intente más tarde";
52 
          throw new Error(errorMessage)
 52 
          throw new Error(errorMessage);
53 
        }
 53 
        }
54 
 
 54 
 
Línea 55... Línea 55...
55 
        sessionStorage.setItem('user_session_image', data)
 55 
        sessionStorage.setItem("user_session_image", data);
56 
        addNotification({
 56 
        addNotification({
Línea 57... Línea 57...
57 
          style: 'success',
 57 
          style: "success",
58 
          msg: 'Imagen cambiada exitosamente'
 58 
          msg: "Imagen cambiada exitosamente",
59 
        })
 59 
        });
60 
      })
 60 
      })
61 
      .catch((err) => addNotification({ style: 'danger', msg: err.message }))
 61 
      .catch((err) => addNotification({ style: "danger", msg: err.message }))
Línea 62... Línea 62...
62 
      .finally(() => setLoading(false))
 62 
      .finally(() => setLoading(false));
63 
  }
 63 
  };
Línea 64... Línea 64...
64 
 
 64 
 
65 
  const validate = () => {
 65 
  const validate = () => {
Línea 66... Línea 66...
66 
    let errorMsg = ''
 66 
    let errorMsg = "";
67 
 
 67 
 
68 
    if (!imageFile) {
 68 
    if (!imageFile) {
69 
      errorMsg = 'Por favor ingrese una imagen'
 69 
      errorMsg = "Por favor ingrese una imagen";
Línea 70... Línea 70...
70 
      setError(errorMsg)
 70 
      setError(errorMsg);
71 
      return false
 71 
      return false;
72 
    }
 72 
    }
Línea 73... Línea 73...
73 
 
 73 
 
74 
    return true
 74 
    return true;
75 
  }
 75 
  };
76 
 
 76 
 
77 
  const getUserImage = () => {
 77 
  const getUserImage = () => {
78 
    setLoading(true)
 78 
    setLoading(true);
79 
 
 79 
 
Línea 80... Línea 80...
80 
    axios
 80 
    axios
81 
      .get('/account-settings/image/upload')
 81 
      .get("/account-settings/image/upload")
82 
      .then(({ data: responseData }) => {
 82 
      .then((response) => {
Línea 83... Línea 83...
83 
        const { data, success } = responseData
 83 
        const { data, success } = response.data;
84 
 
 84 
 
85 
        if (!success) {
 85 
        if (!success) {
Línea 86... Línea 86...
86 
          throw new Error(data)
 86 
          throw new Error(data);
87 
        }
 87 
        }
88 
 
 88 
 
89 
        setImageUrl(data)
 89 
        setImageUrl(data);
90 
      })
 90 
      })
91 
      .catch((err) => {
 91 
      .catch((err) => {
92 
        addNotification({ style: 'danger', msg: err.message })
 92 
        addNotification({ style: "danger", msg: err.message });
Línea 93... Línea 93...
93 
      })
 93 
      })
94 
      .finally(() => setLoading(false))
 94 
      .finally(() => setLoading(false));
Línea 95... Línea 95...
95 
  }
 95 
  };
Línea 96... Línea 96...
96 
 
 96 
 
97 
  useEffect(() => {
 97 
  useEffect(() => {
98 
    getUserImage()
 98 
    getUserImage();
99 
  }, [])
 99 
  }, []);
100 
 
 100 
 
101 
  return (
 101 
  return (
102 
    <Widget>
 102 
    <Widget>
103 
      <Widget.Header title='Cambiar Imagen' />
 103 
      <Widget.Header title="Cambiar Imagen" />
104 
 
 104 
 
105 
      <Widget.Body>
 105 
      <Widget.Body>
106 
        {imageUrl && (
 106 
        {imageUrl && (
107 
          <Avatar
 107 
          <Avatar
Línea 108... Línea 108...
108 
            src={imageUrl}
 108 
            src={imageUrl}
109 
            sx={{ width: 100, height: 100, margin: 'auto' }}
 109 
            sx={{ width: 100, height: 100, margin: "auto" }}
110 
          />
 110 
          />
Línea 111... Línea 111...
111 
        )}
 111 
        )}