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,

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

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

								}))

							))

					setLoading(false)

					closeModal()

				}

				setLoading(false)

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

			})

	}

	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 || modalType !== shareModalTypes.SHARE)

								&&

								<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