Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7806 | Rev 14838 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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