Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2802 Rev 3277
Línea 1... Línea 1...
1 
import React, { useEffect } from 'react'
 1 
import React from 'react'
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
3 
import { useForm } from 'react-hook-form'
 3 
import { Controller, useForm } from 'react-hook-form'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 5 
import { axios } from '@utils'
Línea 6... Línea 6...
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 6 
import { addNotification } from '@store/notification/notification.actions'
7 
 
 - 
 
8 
import Modal from '../modal/Modal'
 7 
 
- 
 
 8 
import Modal from '../modal/Modal'
Línea 9... Línea 9...
9 
import DropzoneComponent from '../../dropzone/DropzoneComponent'
 9 
import FormErrorFeedback from '../form/FormErrorFeedback'
10 
import FormErrorFeedback from '../form/FormErrorFeedback'
 10 
import DropzoneComponent from '@components/dropzone/DropzoneComponent'
11 
 
 11 
 
12 
const CoverModal = ({
 12 
const CoverModal = ({
Línea 18... Línea 18...
18 
}) => {
 18 
}) => {
19 
  const labels = useSelector(({ intl }) => intl.labels)
 19 
  const labels = useSelector(({ intl }) => intl.labels)
20 
  const dispatch = useDispatch()
 20 
  const dispatch = useDispatch()
Línea 21... Línea 21...
21 
 
 21 
 
22 
  const {
 22 
  const {
23 
    register,
 23 
    control,
24 
    handleSubmit,
 24 
    formState: { isSubmitting },
25 
    setValue,
 - 
 
26 
    watch,
 - 
 
27 
    formState: { errors }
 25 
    handleSubmit
Línea 28... Línea 26...
28 
  } = useForm()
 26 
  } = useForm()
29 
 
 - 
 
30 
  const onUploadedHandler = (files) => {
 27 
 
31 
    setValue('cover', files)
 - 
 
32 
  }
 - 
 
33 
 
 28 
  const onSubmit = handleSubmit(async ({ cover }) => {
34 
  const onSubmit = handleSubmit(({ cover }) => {
 29 
    try {
35 
    const formData = new FormData()
 30 
      const formData = new FormData()
36 
    formData.append('cover', cover)
 - 
 
37 
 
 31 
      formData.append('cover', cover)
38 
    axios
 - 
 
- 
 
 32 
 
39 
      .post(url, formData)
 33 
      const response = await axios.post(url, formData)
40 
      .then(({ data: response }) => {
 34 
 
41 
        const { data, success } = response
 - 
 
42 
 
 - 
 
43 
        if (!success) {
 - 
 
44 
          const errorMessage =
 35 
      const { data, success } = response
45 
            typeof data === 'string' ? data : 'Intente mas tarde'
 - 
 
46 
          throw new Error(errorMessage)
 36 
 
47 
        }
 37 
      if (!success) throw new Error('Error al actualizar el portada')
48 
 
 38 
 
49 
        onChange(data)
 - 
 
50 
        onClose()
 - 
 
51 
        setValue('cover', '')
 39 
      onChange(data)
52 
      })
 40 
      onClose()
53 
      .catch((error) => {
 41 
    } catch (error) {
54 
        console.log(error)
 42 
      console.log(error)
55 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 43 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
Línea 56... Línea -...
56 
      })
 - 
 
57 
  })
 - 
 
58 
 
 - 
 
59 
  useEffect(() => {
 - 
 
60 
    register('cover', {
 - 
 
61 
      required: 'Este campo es requerido'
 - 
 
62 
    })
 44 
    }
63 
  }, [])
 45 
  })
64 
 
 46 
 
65 
  return (
 47 
  return (
66 
    <Modal
 48 
    <Modal
67 
      title={labels.cover}
 49 
      title={labels.cover}
- 
 
 50 
      show={show}
68 
      show={show}
 51 
      onClose={onClose}
- 
 
 52 
      onAccept={onSubmit}
- 
 
 53 
      loading={isSubmitting}
- 
 
 54 
    >
- 
 
 55 
      <Controller
- 
 
 56 
        name='cover'
- 
 
 57 
        control={control}
69 
      onClose={onClose}
 58 
        rules={{ required: 'Portada requerida' }}
70 
      onAccept={onSubmit}
 59 
        render={({ field: { onChange, value }, fieldState: { error } }) => (
71 
    >
 60 
          <>
72 
      <DropzoneComponent
 61 
            <DropzoneComponent
73 
        modalType='IMAGE'
 62 
              modalType='IMAGE'
- 
 
 63 
              onUploaded={onChange}
- 
 
 64 
              settedFile={value}
- 
 
 65 
              recomendationText={`Imágenes recomendadas de ${sizes}`}
- 
 
 66 
            />
74 
        onUploaded={onUploadedHandler}
 67 
            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
75 
        settedFile={watch('cover')}
 - 
 
76 
        recomendationText={`Imágenes recomendadas de ${sizes}`}
 - 
 
77 
      />
 - 
 
78 
      {errors.cover && (
 68 
          </>
79 
        <FormErrorFeedback>{errors.cover.message}</FormErrorFeedback>
 69 
        )}
80 
      )}
 70 
      />
Línea 81... Línea 71...
81 
    </Modal>
 71 
    </Modal>