Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Button, 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,
        } = useForm({
                defaultValues: {
                        description: '',
                        share_width: '',
                }
        })

        useEffect(() => {
                register('description', {
                        required: { value: 'true', message: 'El campo es requerido' },
                })
                register('posted_or_shared')
                if (modalType !== shareModalTypes.POST && modalType !== shareModalTypes.SHARE) {
                        register('file', {
                                required: { value: 'true', message: 'El campo es requerido' },
                        })
                } else {
                        if (!getValues('file')) unregister('file')
                }
                if (modalType === shareModalTypes.SHARE) setValue('posted_or_shared', shareModalTypes.POST)
        }, [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, e) => {
                setLoading(true)
                const currentFormData = new FormData()
                for (let input in data) {
                        currentFormData.append(input, data[input])
                }

                axios.post(postUrl, currentFormData)
                        .then(({ data }) => {
                                /* if (data.data.description || data.data.file || data.data.share_width) {
                                        return Object.entries(data.data).map(([key, value]) => {
                                                setError(key, { type: "required", message: value })
                                        })
                                } */
                                const newFeed = data.data
                                if (data.success) {
                                        setLoading(false)
                                        e.target.reset()
                                        setValue('description', '')
                                        setValue('file', '')
                                        clearErrors()
                                        closeModal()
                                        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))
                                }
                                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}`
                                                        }))
                                                )
                                        )
                                setLoading(false)
                                closeModal()
                        })
        }

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

        return (
                <Modal
                        show={isOpen}
                        onHide={closeModal}
                        autoFocus={false}
                >
                        <form encType="multipart/form-data" 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}>
                                                Enviar
                                        </button>
                                        <button className='btn btn-sm btn-tertiary' onClick={closeModal} disabled={loading} >
                                                Cancelar
                                        </button>
                                </Modal.Footer>
                        </form>
                </Modal>
        )
}

export default ShareModal