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

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) {
                    closeModal();
                    // reset data
                    e.target.reset();
                    setValue("description", "");
                    setValue("file", "");
                    clearErrors();
                    console.log("La publicación ha sido compartida")

                    if (currentPage && timelineUrl) {
                        dispatch(fetchFeeds(timelineUrl, currentPage))
                    }

                    if (feedSharedId) {
                        return dispatch(addFeed(newFeed, feedSharedId));
                    }

                    return dispatch(addFeed(newFeed));
                }


                console.log("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>
                    <DescriptionInput
                        name="description"
                        setValue={setValue}
                    />
                    {
                        modalType !== shareModalTypes.POST
                        &&
                        <DropzoneComponent
                            modalType={modalType}
                            onUploaded={onUploadedHandler}
                            settedFile={getValues("file")}
                            recomendationText={recomendationText[modalType]}
                        />
                    }
                </Modal.Body>
                <Modal.Footer>
                    <Button
                        size="sm"
                        type="submit"
                    >
                        Enviar
                    </Button>
                    <Button
                        color="danger"
                        size="sm"
                        variant="danger"
                        onClick={closeModal}
                    >
                        Cancelar
                    </Button>
                </Modal.Footer>
            </form>
        </Modal>
    );
};

export default ShareModal