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 (

        <ul className='comment-list'>

            {comments.reverse().map((comment) => {

                return (

                    <FeedCommentSection.CommentTemplate

                        commentData={comment}

                        onDeleteHandler={deleteCommentHandler}

                        key={comment.unique}

                    />

                );

            })}

        </ul>

    )

}

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

                    <img

                        src={user_image}

                        alt="user-image"

                        className='user-image'

                    />

                    <div className='comment-content'>

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

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