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'

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,

		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: 'danger',

					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 />

						:

						<>

							<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

						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