Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15215 | Rev 15354 | 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(() => {
15353 stevensc 39 
		register('description', { required: 'El campo es requerido' })
11166 stevensc 40 
		register('posted_or_shared')
15353 stevensc 41 
 
42 
		if (modalType !== shareModalTypes.POST) {
43 
			register('file', { required: 'El campo es requerido' })
44 
		}
45 
 
46 
		if (modalType === shareModalTypes.POST) {
11166 stevensc 47 
			if (!getValues('file')) unregister('file')
15353 stevensc 48 
			setValue('posted_or_shared', shareModalTypes.POST)
11166 stevensc 49 
		}
50 
	}, [modalType])
7386 stevensc 51 
 
11166 stevensc 52 
	const recomendationText = {
53 
		IMAGE: 'Tamaño recomendado: 720x720',
54 
		FILE: 'solo documentos PDF',
55 
		VIDEO: 'Video de extensión mp4, mpeg, webm'
56 
	}
7386 stevensc 57 
 
15214 stevensc 58 
	const closeModal = () => dispatch(closeShareModal())
7390 stevensc 59 
 
15214 stevensc 60 
	useEffect(() => clearErrors(), [isOpen])
7386 stevensc 61 
 
15215 stevensc 62 
	const onSubmit = (data) => {
11166 stevensc 63 
		setLoading(true)
64 
		const currentFormData = new FormData()
7386 stevensc 65 
 
15215 stevensc 66 
		Object.entries(data)
67 
			.map(([entry, value]) => currentFormData.append(entry, value))
68 
 
11166 stevensc 69 
		axios.post(postUrl, currentFormData)
70 
			.then(({ data }) => {
14865 stevensc 71 
				const newFeed = data.data
15215 stevensc 72 
				if (!data.success) {
73 
					typeof data.data === 'string'
74 
						? dispatch(addNotification({
75 
							style: 'danger',
76 
							msg: data.data
77 
						}))
78 
						: Object.entries(data.data).map(([key, value]) =>
79 
							value.map(err =>
80 
								dispatch(addNotification({
81 
									style: 'danger',
82 
									msg: `${key}: ${err}`
83 
								}))
84 
							))
11166 stevensc 85 
					setLoading(false)
86 
					closeModal()
15215 stevensc 87 
				}
88 
				setLoading(false)
89 
				setValue('description', '')
90 
				setValue('file', '')
91 
				clearErrors()
92 
				closeModal()
93 
				dispatch(addNotification({
94 
					style: 'success',
95 
					msg: 'La publicación ha sido compartida',
96 
				}))
7806 stevensc 97 
 
15215 stevensc 98 
				if (currentPage && timelineUrl) {
99 
					dispatch(fetchFeeds(timelineUrl, currentPage))
100 
				}
7806 stevensc 101 
 
15215 stevensc 102 
				if (feedSharedId) {
103 
					return dispatch(addFeed(newFeed, feedSharedId))
104 
				}
7806 stevensc 105 
 
15215 stevensc 106 
				return dispatch(addFeed(newFeed))
107 
 
11166 stevensc 108 
			})
109 
	}
7386 stevensc 110 
 
11166 stevensc 111 
	const onUploadedHandler = (files) => {
112 
		setValue('file', files)
113 
		clearErrors('file')
114 
	}
7386 stevensc 115 
 
11166 stevensc 116 
	return (
117 
		<Modal
118 
			show={isOpen}
119 
			onHide={closeModal}
15215 stevensc 120 
			autoFocus={false}>
121 
			<form onSubmit={handleSubmit(onSubmit)}>
11166 stevensc 122 
				<Modal.Header closeButton>
123 
					<Modal.Title>Compartir una publicación</Modal.Title>
124 
				</Modal.Header>
125 
				<Modal.Body>
126 
					{loading
15214 stevensc 127 
						? <Spinner />
128 
						: <>
14864 stevensc 129 
							<CKEditor
130 
								onChange={(e) => setValue('description', e.editor.getData())}
131 
								config={config}
11166 stevensc 132 
							/>
133 
							{errors.description && <p>{errors.description.message}</p>}
15353 stevensc 134 
							{modalType !== shareModalTypes.POST &&
14864 stevensc 135 
								<DropzoneComponent
136 
									modalType={modalType}
137 
									onUploaded={onUploadedHandler}
138 
									settedFile={getValues('file')}
139 
									recomendationText={recomendationText[modalType]}
140 
								/>
11166 stevensc 141 
							}
142 
							{errors.file && <p>{errors.file.message}</p>}
143 
						</>
144 
					}
145 
				</Modal.Body>
146 
				<Modal.Footer>
15215 stevensc 147 
					<button
148 
						className='btn btn-sm btn-primary'
149 
						disabled={loading}
150 
						type='submit'>
14864 stevensc 151 
						Enviar
14897 stevensc 152 
					</button>
15215 stevensc 153 
					<button
154 
						className='btn btn-sm btn-tertiary'
155 
						disabled={loading}
156 
						onClick={closeModal}>
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