Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7387 | Ir a la última revisión | | Ultima modificación | Ver Log |

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