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 = (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) {
                    setLoading(false);
                    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",
                }))

            })

    };

    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