Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from "react";

import axios from "axios";

import { Button, Modal } from "react-bootstrap";

import { useForm } from "react-hook-form";

import DescriptionInput from "./DescriptionInput";

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";

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,

        setError,

    } = 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");

        }

    }, [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 = async (data, e) => {

        setLoading(true);

        const currentFormData = new FormData();

        for (let input in data) {

            currentFormData.append(input, data[input]);

            (`${input}:${data[input]}`);

        }

        axios.post(postUrl, currentFormData)

            .then(({ data }) => {

                const newFeed = data.data;

                /* if (data.data.description || data.data.file || data.data.share_width) {

                    return Object.entries(data.data).map(([key, value]) => {

                        setError(key, { type: "required", message: value })

                    })

                } */

                if (data.success) {

                    e.target.reset();

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

                }

                dispatch(addNotification({

                    style: "error",

                    msg: "Ha ocurrido un error",

                }))

            })

        setLoading(false);

    };

    const onUploadedHandler = (files) => {

        setValue("file", files);

        clearErrors("file");

    };

    return (

        <Modal

            show={isOpen}

            onHide={closeModal}

            autoFocus={false}

        >

            <form encType="multipart/form-data" onSubmit={handleSubmit(onSubmit)}>

                <Modal.Header closeButton>

                    <Modal.Title>Compartir una publicación</Modal.Title>

                </Modal.Header>

                <Modal.Body>

                    {

                        loading

                            ? <Spinner />

                            :

                            <>

                                <DescriptionInput

                                    name="description"

                                    setValue={setValue}

                                />

                                {errors.description && <p>{errors.description.message}</p>}

                                {

                                    modalType !== shareModalTypes.POST

                                    &&

                                    <DropzoneComponent

                                        modalType={modalType}

                                        onUploaded={onUploadedHandler}

                                        settedFile={getValues("file")}

                                        recomendationText={recomendationText[modalType]}

                                    />

                                }

                                {errors.file && <p>{errors.file.message}</p>}

                            </>

                    }

                </Modal.Body>

                <Modal.Footer>

                    <Button

                        size="sm"

                        type="submit"

                        disabled={loading}

                    >

                        Enviar

                    </Button>

                    <Button

                        color="danger"

                        size="sm"

                        variant="danger"

                        onClick={closeModal}

                        disabled={loading}

                    >

                        Cancelar

                    </Button>

                </Modal.Footer>

            </form>

        </Modal>

    );

};

export default ShareModal