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