Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 1214
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
 - 
 
3 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
- 
 
 3 
import { useDispatch } from 'react-redux'
- 
 
 4 
 
4 
import { axios } from '../../utils'
 5 
import { axios } from '../../utils'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import { useDispatch } from 'react-redux'
 - 
 
Línea 7... Línea 7...
7 
 
 7 
 
8 
import Spinner from '../UI/Spinner'
 - 
 
9 
import FormErrorFeedback from '../UI/FormErrorFeedback'
 8 
import Modal from 'components/UI/Modal'
- 
 
 9 
import DropzoneComponent from '../dropzone/DropzoneComponent'
Línea 10... Línea 10...
10 
import DropzoneComponent from '../dropzone/DropzoneComponent'
 10 
import FormErrorFeedback from '../UI/FormErrorFeedback'
11 
 
 - 
 
12 
const ImageModal = ({ show, onClose, sizes, id, onComplete }) => {
 11 
 
Línea 13... Línea 12...
13 
  const [loading, setLoading] = useState(false)
 12 
const ImageModal = ({ show, onClose, sizes, id, onComplete }) => {
14 
  const dispatch = useDispatch()
 13 
  const dispatch = useDispatch()
15 
 
 14 
 
16 
  const {
 15 
  const {
17 
    register,
 16 
    register,
18 
    errors,
 17 
    errors,
19 
    handleSubmit,
 18 
    handleSubmit,
20 
    setValue,
 19 
    setValue,
21 
    clearErrors,
 20 
    clearErrors,
Línea 22... Línea 21...
22 
    setError,
 21 
    setError,
23 
    getValues,
 22 
    getValues
24 
  } = useForm()
 23 
  } = useForm()
25 
 
 24 
 
Línea 26... Línea 25...
26 
  const onUploadedHandler = (files) => {
 25 
  const onUploadedHandler = (files) => {
27 
    setValue('image', files)
 26 
    setValue('image', files)
28 
    clearErrors('image')
 27 
    clearErrors('image')
29 
  }
 28 
  }
30 
 
 29 
 
31 
  const onSubmitHandler = ({ image }) => {
 30 
  const onSubmitHandler = handleSubmit(({ image }) => {
32 
    const type = window.location.pathname.split('/')[1]
 31 
    const type = window.location.pathname.split('/')[1]
Línea 33... Línea -...
33 
    const typesUrl = {
 - 
 
34 
      profile: `/profile/my-profiles/image/${id}/operation/upload`,
 - 
 
35 
      company: `/my-company/${id}/profile/image/upload`,
 32 
    const typesUrl = {
36 
      group: `/group/my-groups/image/${id}/operation/upload`,
 33 
      profile: `/profile/my-profiles/image/${id}/operation/upload`,
Línea 37... Línea -...
37 
    }
 - 
 
38 
 
 - 
 
39 
    setLoading(true)
 34 
      company: `/my-company/${id}/profile/image/upload`,
40 
 
 35 
      group: `/group/my-groups/image/${id}/operation/upload`
41 
    const formData = new FormData()
 36 
    }
42 
    formData.append('image', image)
 37 
 
43 
 
 38 
    const formData = new FormData()
44 
    axios
 39 
    formData.append('image', image)
45 
      .post(typesUrl[type], formData)
 40 
 
46 
      .then(({ data: response }) => {
 41 
    axios.post(typesUrl[type], formData).then(({ data: response }) => {
47 
        const { data, success } = response
 42 
      const { data, success } = response
48 
 
 43 
 
49 
        if (!success) {
 44 
      if (!success) {
50 
          const resError = data
 45 
        const resError = data
51 
          if (resError.constructor.name === 'Object') {
 46 
        if (resError.constructor.name === 'Object') {
52 
            Object.entries(resError).map(([key, value]) => {
 47 
          Object.entries(resError).forEach(([key, value]) => {
53 
              if (key in getValues()) {
 48 
            if (key in getValues()) {
54 
                setError(key, {
 49 
              setError(key, {
55 
                  type: 'manual',
 - 
 
56 
                  message: Array.isArray(value) ? value[0] : value,
 50 
                type: 'manual',
- 
 
 51 
                message: Array.isArray(value) ? value[0] : value
Línea 57... Línea 52...
57 
                })
 52 
              })
Línea 58... Línea 53...
58 
              }
 53 
            }
59 
            })
 54 
          })
60 
          } else {
 55 
        } else {
Línea 61... Línea 56...
61 
            dispatch(addNotification({ style: 'danger', msg: resError }))
 56 
          dispatch(addNotification({ style: 'danger', msg: resError }))
Línea 62... Línea 57...
62 
          }
 57 
        }
63 
        }
 58 
      }
64 
 
 59 
 
65 
        const newImage = data.profile ?? data
 60 
      const newImage = data.profile ?? data
66 
 
 61 
 
67 
        if (data.update_navbar) {
 62 
      if (data.update_navbar) {
68 
          sessionStorage.setItem('user_session_image', data.user)
 - 
 
69 
        }
 63 
        sessionStorage.setItem('user_session_image', data.user)
Línea 70... Línea 64...
70 
 
 64 
      }
71 
        onComplete(newImage)
 65 
 
72 
 
 66 
      onComplete(newImage)
73 
        setValue('image', '')
 67 
 
74 
        dispatch(
 68 
      setValue('image', '')
Línea 75... Línea 69...
75 
          addNotification({ style: 'success', msg: 'Registro actualizado' })
 69 
      dispatch(
76 
        )
 70 
        addNotification({ style: 'success', msg: 'Registro actualizado' })
77 
        onClose()
 71 
      )
78 
      })
 - 
 
79 
      .finally(() => setLoading(false))
 72 
      onClose()
80 
  }
 73 
    })
81 
 
 74 
  })
82 
  useEffect(() => {
 75 
 
83 
    register('image', {
 76 
  useEffect(() => {
84 
      required: { value: 'true', message: 'El campo es requerido' },
 - 
 
85 
    })
 77 
    register('image', {
86 
  }, [])
 78 
      required: { value: 'true', message: 'El campo es requerido' }
87 
 
 79 
    })
88 
  return (
 80 
  }, [])
89 
    <Modal show={show} onHide={onClose}>
 81 
 
- 
 
 82 
  return (
90 
      <Modal.Header closeButton>
 83 
    <Modal
91 
        <Modal.Title>Imagen</Modal.Title>
 84 
      show={show}
92 
      </Modal.Header>
 85 
      title='Imagen'
93 
      <form
 - 
 
94 
        encType="multipart/form-data"
 - 
 
95 
        onSubmit={handleSubmit(onSubmitHandler)}
 - 
 
96 
      >
 - 
 
97 
        <Modal.Body>
 - 
 
98 
          <DropzoneComponent
 - 
 
99 
            modalType="IMAGE"
 - 
 
100 
            onUploaded={onUploadedHandler}
 - 
 
101 
            recomendationText={`Imágenes recomendadas de ${sizes}`}
 - 
 
102 
          />
 86 
      onClose={onClose}
103 
          {errors.image && (
 87 
      onReject={onClose}
104 
            <FormErrorFeedback>{errors.image.message}</FormErrorFeedback>
 88 
      onAccept={onSubmitHandler}
Línea 105... Línea 89...
105 
          )}
 89 
    >