Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2801 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2801 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form';
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux';
4 
 
 4 
 
5 
import { block_options, reasons } from '@app/constants/report'
 5 
import { block_options, reasons } from '@app/constants/report';
6 
import { sendReport } from '@app/services/reports'
 6 
import { sendReport } from '@app/services/reports';
7 
import { addNotification } from '@app/redux/notification/notification.actions'
 7 
import { addNotification } from '@app/redux/notification/notification.actions';
8 
import { closeReportModal } from '@app/redux/report/report.actions'
 8 
import { closeReportModal } from '@app/redux/report/report.actions';
9 
 
 9 
 
10 
import Modal from '@components/UI/modal/Modal'
 10 
import Modal from '@components/UI/modal/Modal';
11 
import Input from '@components/UI/inputs/Input'
 11 
import Input from '@components/UI/inputs/Input';
12 
import Select from '@components/UI/inputs/Select'
 12 
import Select from '@components/UI/inputs/Select';
13 
 
 13 
 
14 
export default function ReportModal() {
 14 
export default function ReportModal() {
15 
  const { showModal, type, reportUrl, onComplete } = useSelector(
 15 
  const { showModal, type, reportUrl, onComplete } = useSelector((state) => state.report);
16 
    (state) => state.report
 - 
 
17 
  )
 - 
 
18 
  const dispatch = useDispatch()
 16 
  const dispatch = useDispatch();
19 
 
 17 
 
20 
  const {
 18 
  const {
21 
    control,
 19 
    control,
22 
    getValues,
 20 
    getValues,
23 
    handleSubmit,
 21 
    handleSubmit,
24 
    formState: { isSubmitting, errors }
 22 
    formState: { isSubmitting, errors }
25 
  } = useForm({
 23 
  } = useForm({
26 
    defaultValues: {
 24 
    defaultValues: {
27 
      reason: reasons[0].value,
 25 
      reason: reasons[0].value,
28 
      block_user: block_options[1].value,
 26 
      block_user: block_options[1].value,
29 
      comment: ''
 27 
      comment: ''
30 
    }
 28 
    }
31 
  })
 29 
  });
32 
 
 30 
 
33 
  const onSubmit = handleSubmit(async () => {
 31 
  const onSubmit = handleSubmit(async () => {
34 
    try {
 32 
    try {
35 
      const formData = getValues()
 33 
      const formData = getValues();
36 
      const { success, data } = await sendReport(reportUrl, formData)
 34 
      const { success, data } = await sendReport(reportUrl, formData);
37 
 
 35 
 
38 
      if (!success) {
 36 
      if (!success) {
39 
        throw new Error(data)
 37 
        throw new Error(data);
40 
      }
 38 
      }
41 
 
 39 
 
42 
      if (onComplete) {
 40 
      if (onComplete) {
43 
        onComplete()
 41 
        onComplete();
44 
      }
 42 
      }
45 
 
 43 
 
46 
      dispatch(addNotification({ style: 'success', msg: data.message }))
 44 
      dispatch(addNotification({ style: 'success', msg: data.message }));
47 
      dispatch(closeReportModal())
 45 
      dispatch(closeReportModal());
48 
    } catch (error) {
 46 
    } catch (error) {
49 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 47 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
50 
    }
 48 
    }
51 
  })
 49 
  });
52 
 
 50 
 
53 
  const closeModal = () => dispatch(closeReportModal())
 51 
  const closeModal = () => dispatch(closeReportModal());
54 
 
 52 
 
55 
  return (
 53 
  return (
56 
    <Modal
 54 
    <Modal
57 
      show={showModal}
 55 
      show={showModal}
58 
      onClose={closeModal}
 56 
      onClose={closeModal}
59 
      title={`Reportar ${type.toLowerCase()}`}
 57 
      title={`Reportar ${type.toLowerCase()}`}
60 
      onAccept={onSubmit}
 58 
      onAccept={onSubmit}
61 
      loading={isSubmitting}
 59 
      loading={isSubmitting}
62 
    >
 60 
    >
63 
      <Select
 61 
      <Select
64 
        label='Motivo'
 62 
        label='Motivo'
65 
        name='reason'
 63 
        name='reason'
66 
        placeholder='Seleccione un motivo'
 64 
        placeholder='Seleccione un motivo'
67 
        options={reasons}
 65 
        options={reasons}
68 
        control={control}
 66 
        control={control}
69 
        rules={{ required: 'Este campo es requerido' }}
 67 
        rules={{ required: 'Este campo es requerido' }}
70 
        error={errors.reason?.message}
 68 
        error={errors.reason?.message}
71 
        defaultValue={reasons[0].value}
 69 
        defaultValue={reasons[0].value}
72 
      />
 70 
      />
73 
 
 71 
 
74 
      <Select
 72 
      <Select
75 
        name='block_user'
 73 
        name='block_user'
76 
        label='Bloquear a este usuario'
 74 
        label='Bloquear a este usuario'
77 
        options={block_options}
 75 
        options={block_options}
78 
        placeholder='Seleccione un opción'
 76 
        placeholder='Seleccione un opción'
79 
        control={control}
 77 
        control={control}
80 
        rules={{ required: 'Este campo es requerido' }}
 78 
        rules={{ required: 'Este campo es requerido' }}
81 
        error={errors.block_user?.message}
 79 
        error={errors.block_user?.message}
82 
        defaultValue={block_options[1].value}
 80 
        defaultValue={block_options[1].value}
83 
      />
 81 
      />
84 
 
 82 
 
85 
      <Input
 83 
      <Input
86 
        name='comment'
 84 
        name='comment'
87 
        label='Comentario'
 85 
        label='Comentario'
88 
        placeholder='(Opcional)'
 86 
        placeholder='(Opcional)'
89 
        control={control}
 87 
        control={control}
90 
        error={errors.comment?.message}
 88 
        error={errors.comment?.message}
91 
      />
 89 
      />
92 
    </Modal>
 90 
    </Modal>
93 
  )
 91 
  );
94 
}
 92 
}