Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useForm } from 'react-hook-form'

import { useFetch } from '@hooks'
import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'

import Modal from '@components/UI/modal/Modal'
import Input from '@components/UI/inputs/Input'
import Select from '@components/UI/inputs/Select'
import Ckeditor from '@components/common/ckeditor/Ckeditor'

const KnowledgeEditModal = ({
  show,
  categories = [],
  url,
  onComplete,
  onClose
}) => {
  const { data: formValues } = useFetch(url)
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const {
    control,
    formState: { errors },
    handleSubmit,
    reset
  } = useForm({
    defaultValues: {
      category_id: '',
      title: '',
      description: '',
      image: '',
      attachment: ''
    },
    values: formValues
  })

  const onSubmit = handleSubmit(async (data) => {
    console.log(data)
    const { image, title, attachment, description, category_id } = data
    try {
      const formData = new FormData()
      formData.append('image', image[0])
      formData.append('title', title)
      formData.append('attachment', attachment[0])
      formData.append('description', description)
      formData.append('category_id', category_id)

      const response = await axios.post(url, formData)

      const { success } = response.data

      if (!success) throw new Error('No se pudo guardar el conocimiento')
      onComplete()
      reset()
      onClose()
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  return (
    <Modal
      title='Editar Conocimiento'
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
    >
      <Select
        name='category_id'
        label='Categoría'
        placeholder='Seleccione un opción'
        options={categories}
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.category_id?.message}
      />

      <Input
        name='title'
        label={labels.title}
        placeholder='Ingrese el título del conocimiento'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.title?.message}
      />

      <Ckeditor
        name='description'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.description?.message}
      />

      <Input
        name='image'
        type='file'
        label={labels.image}
        accept='image/*'
        placeholder='Seleccione una imagen'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.image?.message}
      />

      <Input
        name='attachment'
        type='file'
        label={labels.attachment}
        control={control}
        placeholder='Seleccione un archivo'
        accept='application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        rules={{ required: 'Este campo es requerido' }}
        error={errors.attachment?.message}
      />
    </Modal>
  )
}

export default KnowledgeEditModal