Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14899 | Rev 15215 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11166 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import axios from 'axios'
15214 stevensc 3 
import { Modal } from 'react-bootstrap'
11166 stevensc 4 
import { useForm } from 'react-hook-form'
5 
import { shareModalTypes } from '../redux/share-modal/shareModal.types'
6 
import { closeShareModal } from '../redux/share-modal/shareModal.actions'
7 
import { useDispatch, useSelector } from 'react-redux'
8 
import DropzoneComponent from './Dropzone/DropzoneComponent'
9 
import { addFeed, fetchFeeds } from '../redux/feed/feed.actions'
10 
import { addNotification } from '../redux/notification/notification.actions'
11 
import Spinner from './Spinner'
14864 stevensc 12 
import { CKEditor } from 'ckeditor4-react'
13 
import { config } from './helpers/ckeditor_config'
7386 stevensc 14 
 
7387 stevensc 15 
const ShareModal = () => {
7386 stevensc 16 
 
11166 stevensc 17 
	const [loading, setLoading] = useState(false)
18 
	const { postUrl, isOpen, modalType } = useSelector(state => state.shareModal)
19 
	const { currentPage, timelineUrl, feedSharedId } = useSelector(state => state.feed)
7388 stevensc 20 
 
11166 stevensc 21 
	const dispatch = useDispatch()
7386 stevensc 22 
 
11166 stevensc 23 
	const {
24 
		register,
25 
		unregister,
26 
		errors,
27 
		handleSubmit,
28 
		setValue,
29 
		getValues,
30 
		clearErrors,
31 
	} = useForm({
32 
		defaultValues: {
33 
			description: '',
34 
			share_width: '',
35 
		}
36 
	})
7386 stevensc 37 
 
11166 stevensc 38 
	useEffect(() => {
39 
		register('description', {
40 
			required: { value: 'true', message: 'El campo es requerido' },
41 
		})
42 
		register('posted_or_shared')
14865 stevensc 43 
		if (modalType !== shareModalTypes.POST && modalType !== shareModalTypes.SHARE) {
11166 stevensc 44 
			register('file', {
45 
				required: { value: 'true', message: 'El campo es requerido' },
46 
			})
47 
		} else {
48 
			if (!getValues('file')) unregister('file')
49 
		}
14866 stevensc 50 
		if (modalType === shareModalTypes.SHARE) setValue('posted_or_shared', shareModalTypes.POST)
11166 stevensc 51 
	}, [modalType])
7386 stevensc 52 
 
11166 stevensc 53 
	const recomendationText = {
54 
		IMAGE: 'Tamaño recomendado: 720x720',
55 
		FILE: 'solo documentos PDF',
56 
		VIDEO: 'Video de extensión mp4, mpeg, webm'
57 
	}
7386 stevensc 58 
 
15214 stevensc 59 
	const closeModal = () => dispatch(closeShareModal())
7390 stevensc 60 
 
15214 stevensc 61 
	useEffect(() => clearErrors(), [isOpen])
7386 stevensc 62 
 
11166 stevensc 63 
	const onSubmit = (data, e) => {
64 
		setLoading(true)
65 
		const currentFormData = new FormData()
66 
		for (let input in data) {
14865 stevensc 67 
			currentFormData.append(input, data[input])
11166 stevensc 68 
		}
7386 stevensc 69 
 
11166 stevensc 70 
		axios.post(postUrl, currentFormData)
71 
			.then(({ data }) => {
14865 stevensc 72 
				const newFeed = data.data
11166 stevensc 73 
				if (data.success) {
74 
					setLoading(false)
75 
					e.target.reset()
76 
					setValue('description', '')
77 
					setValue('file', '')
78 
					clearErrors()
79 
					closeModal()
80 
					dispatch(addNotification({
81 
						style: 'success',
82 
						msg: 'La publicación ha sido compartida',
83 
					}))
7806 stevensc 84 
 
11166 stevensc 85 
					if (currentPage && timelineUrl) {
86 
						dispatch(fetchFeeds(timelineUrl, currentPage))
87 
					}
7806 stevensc 88 
 
11166 stevensc 89 
					if (feedSharedId) {
90 
						return dispatch(addFeed(newFeed, feedSharedId))
91 
					}
7806 stevensc 92 
 
11166 stevensc 93 
					return dispatch(addFeed(newFeed))
94 
				}
14865 stevensc 95 
				typeof data.data === 'string'
96 
					?
97 
					dispatch(addNotification({
98 
						style: 'danger',
99 
						msg: data.data
100 
					}))
101 
					: Object.entries(data.data).map(([key, value]) =>
102 
						value.map(err =>
103 
							dispatch(addNotification({
104 
								style: 'danger',
105 
								msg: `${key}: ${err}`
106 
							}))
107 
						)
108 
					)
14873 stevensc 109 
				setLoading(false)
110 
				closeModal()
11166 stevensc 111 
			})
112 
	}
7386 stevensc 113 
 
11166 stevensc 114 
	const onUploadedHandler = (files) => {
115 
		setValue('file', files)
116 
		clearErrors('file')
117 
	}
7386 stevensc 118 
 
11166 stevensc 119 
	return (
120 
		<Modal
121 
			show={isOpen}
122 
			onHide={closeModal}
123 
			autoFocus={false}
124 
		>
125 
			<form encType="multipart/form-data" onSubmit={handleSubmit(onSubmit)}>
126 
				<Modal.Header closeButton>
127 
					<Modal.Title>Compartir una publicación</Modal.Title>
128 
				</Modal.Header>
129 
				<Modal.Body>
130 
					{loading
15214 stevensc 131 
						? <Spinner />
132 
						: <>
14864 stevensc 133 
							<CKEditor
134 
								onChange={(e) => setValue('description', e.editor.getData())}
135 
								config={config}
11166 stevensc 136 
							/>
137 
							{errors.description && <p>{errors.description.message}</p>}
138 
							{
15214 stevensc 139 
								(modalType !== shareModalTypes.POST || modalType !== shareModalTypes.SHARE)
14864 stevensc 140 
								&&
141 
								<DropzoneComponent
142 
									modalType={modalType}
143 
									onUploaded={onUploadedHandler}
144 
									settedFile={getValues('file')}
145 
									recomendationText={recomendationText[modalType]}
146 
								/>
11166 stevensc 147 
							}
148 
							{errors.file && <p>{errors.file.message}</p>}
149 
						</>
150 
					}
151 
				</Modal.Body>
152 
				<Modal.Footer>
14899 stevensc 153 
					<button className='btn btn-sm btn-primary' disabled={loading}>
14864 stevensc 154 
						Enviar
14897 stevensc 155 
					</button>
156 
					<button className='btn btn-sm btn-tertiary' onClick={closeModal} disabled={loading} >
14864 stevensc 157 
						Cancelar
14897 stevensc 158 
					</button>
11166 stevensc 159 
				</Modal.Footer>
160 
			</form>
161 
		</Modal>
162 
	)
163 
}
7386 stevensc 164 
 
165 
export default ShareModal