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