Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { shareModalTypes } from '../redux/share-modal/shareModal.types'
import { closeShareModal } from '../redux/share-modal/shareModal.actions'
import { useDispatch, useSelector } from 'react-redux'
import DropzoneComponent from './Dropzone/DropzoneComponent'
import { addFeed, fetchFeeds } from '../redux/feed/feed.actions'
import { addNotification } from '../redux/notification/notification.actions'
import Spinner from './Spinner'
import { CKEditor } from 'ckeditor4-react'
import { config } from './helpers/ckeditor_config'

const ShareModal = () => {

        const [loading, setLoading] = useState(false)
        const { postUrl, isOpen, modalType } = useSelector(state => state.shareModal)
        const { currentPage, timelineUrl, feedSharedId } = useSelector(state => state.feed)

        const dispatch = useDispatch()

        const {
                register,
                unregister,
                errors,
                handleSubmit,
                setValue,
                getValues,
                clearErrors,
                reset
        } = useForm({
                defaultValues: {
                        description: '',
                        share_width: '',
                }
        })

        useEffect(() => {
                register('description', { required: 'El campo es requerido' })
                register('posted_or_shared')
                setValue('posted_or_shared', shareModalTypes.POST)

                if (modalType !== shareModalTypes.POST) {
                        register('file', { required: 'El campo es requerido' })
                }

                if (modalType === shareModalTypes.POST) {
                        unregister('file')
                }
        }, [modalType])

        const recomendationText = {
                IMAGE: 'Tamaño recomendado: 720x720',
                FILE: 'solo documentos PDF',
                VIDEO: 'Video de extensión mp4, mpeg, webm'
        }

        const closeModal = () => dispatch(closeShareModal())

        useEffect(() => clearErrors(), [isOpen])

        const onSubmit = (data) => {
                setLoading(true)
                const currentFormData = new FormData()

                Object.entries(data)
                        .map(([entry, value]) => currentFormData.append(entry, value))

                axios.post(postUrl, currentFormData)
                        .then(({ data }) => {
                                const newFeed = data.data
                                if (!data.success) {
                                        typeof data.data === 'string'
                                                ? dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: data.data
                                                }))
                                                : Object.entries(data.data).map(([key, value]) =>
                                                        value.map(err =>
                                                                dispatch(addNotification({
                                                                        style: 'danger',
                                                                        msg: `${key}: ${err}`
                                                                }))
                                                        ))
                                        return
                                }
                                reset()
                                clearErrors()
                                dispatch(addNotification({
                                        style: 'success',
                                        msg: 'La publicación ha sido compartida',
                                }))

                                if (currentPage && timelineUrl) dispatch(fetchFeeds(timelineUrl, currentPage))

                                if (feedSharedId) return dispatch(addFeed(newFeed, feedSharedId))

                                return dispatch(addFeed(newFeed))
                        })
                        .catch((err) => dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` })))
                        .finally(() => {
                                setLoading(false)
                                closeModal()
                        })
        }

        const onUploadedHandler = (files) => {
                setValue('file', files)
                clearErrors('file')
        }

        return (
                <Modal
                        show={isOpen}
                        onHide={closeModal}
                        autoFocus={false}>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Header closeButton>
                                        <Modal.Title>Compartir una publicación</Modal.Title>
                                </Modal.Header>
                                <Modal.Body>
                                        {loading
                                                ? <Spinner />
                                                : <>
                                                        <CKEditor
                                                                onChange={(e) => setValue('description', e.editor.getData())}
                                                                config={config}
                                                        />
                                                        {errors.description && <p>{errors.description.message}</p>}
                                                        {modalType !== shareModalTypes.POST &&
                                                                <DropzoneComponent
                                                                        modalType={modalType}
                                                                        onUploaded={onUploadedHandler}
                                                                        settedFile={getValues('file')}
                                                                        recomendationText={recomendationText[modalType]}
                                                                />
                                                        }
                                                        {errors.file && <p>{errors.file.message}</p>}
                                                </>
                                        }
                                </Modal.Body>
                                <Modal.Footer>
                                        <button
                                                className='btn btn-sm btn-primary'
                                                disabled={loading}
                                                type='submit'>
                                                Enviar
                                        </button>
                                        <button
                                                className='btn btn-sm btn-tertiary'
                                                disabled={loading}
                                                onClick={closeModal}>
                                                Cancelar
                                        </button>
                                </Modal.Footer>
                        </form>
                </Modal>
        )
}

export default ShareModal