Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

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

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

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

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

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

import Form from '../UI/form/Form'

import FormInputText from '../UI/form/FormInputText'

import SelectInput from '../UI/form/SelectField'

import Modal from '../UI/modal/Modal'

const reasons = [

  {

    name: 'Contenido sexual',

    value: 's'

  },

  {

    name: 'Contenido ofensivo',

    value: 'o'

  },

  {

    name: 'Discriminación',

    value: 'd'

  },

  {

    name: 'Adicciones',

    value: 'a'

  },

  {

    name: 'Terrorismo',

    value: 't'

  },

  {

    name: 'Otro',

    value: 'ot'

  }

]

const block_options = [

  {

    name: 'Sí',

    value: 'y'

  },

  {

    name: 'No',

    value: 'n'

  }

]

export default function ReportModal() {

  const { showModal, type, reportUrl, onComplete } = useSelector(

    (state) => state.report

  )

  const dispatch = useDispatch()

  const { control, errors, handleSubmit } = useForm()

  const onSubmit = handleSubmit(async (formData) => {

    try {

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

      if (!success) {

        throw new Error(data)

      }

      onComplete()

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

      dispatch(closeReportModal())

    } catch (error) {

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

    }

  })

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

  useEffect(() => {

    console.log(showModal)

  }, [showModal])

  return (

    <Modal

      show={showModal}

      onClose={closeModal}

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

    >

      <Form onSubmit={onSubmit} autoComplete='off'>

        <SelectInput

          id='reason'

          name='reason'

          label='Motivo'

          options={reasons}

          control={control}

          error={errors.reason?.message}

          rules={{ required: true }}

        />

        <SelectInput

          id='block_user'

          name='block_user'

          label='Bloquear a este usuario'

          options={block_options}

          control={control}

          error={errors.block_user?.message}

          rules={{ required: true }}

        />

        <FormInputText

          name='comment'

          control={control}

          rules={{ required: false }}

        />

      </Form>

    </Modal>

  )

}