Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import axios from 'axios'
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import { TbSend } from 'react-icons/tb'
import { connect } from 'react-redux'
import { addNotification } from '../../../../redux/notification/notification.actions'
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'

const FeedCommentSection = ({
    image = '',
    addUrl = '',
    updateTotalComments = function () { },
    comments = []
}) => {

    const { register, handleSubmit, errors, reset } = useForm()
    const [commentsState, setCommentsState] = useState(comments);

    const submitCommentHandler = (data) => {

        const currentFormData = new FormData();
        Object.entries(data).forEach(([key, value]) => currentFormData.append(key, value))

        axios.post(addUrl, currentFormData)
            .then(({ data: response }) => {
                const { data: newComment, success, total_comments } = response;

                if (!success) {
                    return addNotification({ style: "danger", msg: data })
                }

                updateTotalComments(total_comments)
                setCommentsState([newComment, ...commentsState]);
                reset();
            })
    };

    return (
        <>
            <form
                className='form-comment-feed'
                onSubmit={handleSubmit(submitCommentHandler)}
            >
                <div className='feedCommentContainer'>
                    <img src={image} alt="User profile image" />
                    <input
                        className='commentInput'
                        type="text"
                        name="comment"
                        maxLength="256"
                        placeholder="Escribe un comentario"
                        ref={register({ required: "El campo es requerido" })}
                    />
                    <button className='shareIconContainer iconActive' >
                        <TbSend className='shareIcon' />
                    </button>
                </div>
            </form>
            {errors.comment && <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>}
            <FeedCommentSection.CommentsList
                comments={commentsState}
                updateTotalComments={updateTotalComments}
                setComments={setCommentsState}
            />
        </>
    )
}

const CommentsList = ({ comments, updateTotalComments, setComments }) => {

    const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {
        axios.post(deleteCommentUrl)
            .then(({ data: response }) => {
                const { success, data, total_comments } = response

                if (!success) {
                    return addNotification({ style: "danger", msg: data })
                }

                updateTotalComments(total_comments)
                setComments(prevComments => prevComments.filter((comment) => comment.unique !== commentUnique))
                addNotification({ style: "success", msg: data });
            })
            .catch((error) => addNotification({ style: "danger", msg: error.message }))
    };

    return (
        <div className='commentSection'>
            <div className={`comment-sec comment-sec`}>
                <ul>
                    {comments.reverse().map((comment) => {
                        return (
                            <FeedCommentSection.CommentTemplate
                                commentData={comment}
                                onDeleteHandler={deleteCommentHandler}
                                key={comment.unique}
                            />
                        );
                    })}
                </ul>
            </div>
        </div>
    )
}

const CommentTemplate = ({ onDeleteHandler, commentData }) => {

    const {
        user_name,
        user_url,
        user_image,
        link_delete,
        time_elapsed,
        comment,
        unique,
    } = commentData;

    const [showConfirmModal, setShowConfirmModal] = useState(false);

    const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)

    const handleModalAccept = () => onDeleteHandler(unique, link_delete)

    return (
        <>
            <li>
                <div className="comment-list">
                    <div className={`comment comment-${unique}`}>
                        <div className='commentHeader'>
                            <img
                                src={user_image}
                                alt="user-image"
                                className='userImage'
                            />
                            <div className='info'>
                                <a href={user_url}>
                                    <h3>{user_name}</h3>
                                </a>
                                <span>
                                    <img
                                        src="/images/clock.png"
                                        alt="Clock"
                                        className='mr-2'
                                    />
                                    {time_elapsed}
                                    {link_delete &&
                                        <button
                                            className="btn-comment-trash"
                                            onClick={handleShowConfirmModal}
                                        >
                                            <i className="fa fa-trash"></i>
                                        </button>
                                    }
                                </span>
                            </div>
                        </div>
                        <p>{comment}</p>
                    </div>
                </div>
            </li>
            <ConfirmModal
                show={showConfirmModal}
                onClose={() => setShowConfirmModal(false)}
                onAccept={handleModalAccept}
                acceptLabel="Aceptar"
            />
        </>
    );
};


FeedCommentSection.CommentsList = CommentsList
FeedCommentSection.CommentTemplate = CommentTemplate

const mapDispatchToProps = {
    addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(FeedCommentSection)