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 DescriptionInput from './DescriptionInput'
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'

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,
                setError,
        } = 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')
                }
        }, [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]);
                        (`${input}:${data[input]}`)
                }

                axios.post(postUrl, currentFormData)
                        .then(({ data }) => {
                                const newFeed = data.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 })
                    })
                } */

                                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))
                                }


                                dispatch(addNotification({
                                        style: 'error',
                                        msg: 'Ha ocurrido un error',
                                }))

                        })

        }

        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 />
                                                :
                                                <>
                                                        <DescriptionInput
                                                                name="description"
                                                                onChange={setValue}
                                                        />
                                                        {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
                                                size="sm"
                                                type="submit"
                                                disabled={loading}
                                        >
                        Enviar
                                        </Button>
                                        <Button
                                                color="danger"
                                                size="sm"
                                                variant="danger"
                                                onClick={closeModal}
                                                disabled={loading}
                                        >
                        Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal>
        )
}

export default ShareModal