Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useForm } from 'react-hook-form';

import { useDispatch, useSelector } from 'react-redux';

import { block_options, reasons } from '@app/constants/report';

import { sendReport } from '@app/services/reports';

import { addNotification } from '@app/redux/notification/notification.actions';

import { closeReportModal } from '@app/redux/report/report.actions';

import Modal from '@components/UI/modal/Modal';

import Input from '@components/UI/inputs/Input';

import Select from '@components/UI/inputs/Select';

export default function ReportModal() {

  const { showModal, type, reportUrl, onComplete } = useSelector((state) => state.report);

  const dispatch = useDispatch();

  const {

    control,

    getValues,

    handleSubmit,

    formState: { isSubmitting, errors }

  } = useForm({

    defaultValues: {

      reason: reasons[0].value,

      block_user: block_options[1].value,

      comment: ''

    }

  });

  const onSubmit = handleSubmit(async () => {

    try {

      const formData = getValues();

      const { success, data } = await sendReport(reportUrl, formData);

      if (!success) {

        throw new Error(data);

      }

      if (onComplete) {

        onComplete();

      }

      dispatch(addNotification({ style: 'success', msg: data.message }));

      dispatch(closeReportModal());

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  });

  const closeModal = () => dispatch(closeReportModal());

  return (

    <Modal

      show={showModal}

      onClose={closeModal}

      title={`Reportar ${type.toLowerCase()}`}

      onAccept={onSubmit}

      loading={isSubmitting}

    >

      <Select

        label='Motivo'

        name='reason'

        placeholder='Seleccione un motivo'

        options={reasons}

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.reason?.message}

        defaultValue={reasons[0].value}

      />

      <Select

        name='block_user'

        label='Bloquear a este usuario'

        options={block_options}

        placeholder='Seleccione un opción'

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.block_user?.message}

        defaultValue={block_options[1].value}

      />

      <Input

        name='comment'

        label='Comentario'

        placeholder='(Opcional)'

        control={control}

        error={errors.comment?.message}

      />

    </Modal>

  );

}