Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import { axios } from '../../../../utils'

import { useForm } from 'react-hook-form'

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 = ({

  isShow = true,

  image = '',

  addUrl = '',

  updateTotalComments = function () { },

  comments = []

}) => {

  const { register, handleSubmit, errors, reset } = useForm()

  const [commentsState, setCommentsState] = useState(comments)

  useEffect(() => {

    setCommentsState(comments)

  }, [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: newComment })

        }

        updateTotalComments(total_comments)

        setCommentsState([newComment, ...commentsState])

        reset()

      })

  }

  return (

        <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>

            <form

                className='feedCommentContainer'

                onSubmit={handleSubmit(submitCommentHandler)}

            >

                {image && <img src={image} alt="User profile image" />}

                <input

                    className='commentInput'

                    type="text"

                    name="comment"

                    maxLength="256"

                    placeholder={LABELS.WRITE_A_COMMENT}

                    ref={register({ required: 'El campo es requerido' })}

                />

                <button className='shareIconContainer iconActive' >

                    <img src='/images/icons/send.png' className='fa img-icon' />

                </button>

            </form>

            {errors.comment && <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>}

            <FeedCommentSection.CommentsList

                comments={commentsState}

                updateTotalComments={updateTotalComments}

                setComments={setCommentsState}

            />

        </div>

  )

}

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 [displayOption, setDisplayOption] = useState(false)

  const deleteButton = useRef()

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

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

  useEffect(() => {

    const handleClickOutside = (event) => {

      if (deleteButton.current && !deleteButton.current.contains(event.target)) {

        setDisplayOption(false)

      }

    }

    document.addEventListener('mousedown', handleClickOutside)

    return () => {

      document.removeEventListener('mousedown', handleClickOutside)

    }

  }, [deleteButton])

  return (

        <li>

            <div className="comment-container">

                {user_image &&

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

                            {time_elapsed}

                            {link_delete &&

                                <>

                                    <img

                                        src='/images/icons/options.png'

                                        className='cursor-pointer img-icon options-sm'

                                        onClick={() => setDisplayOption(!displayOption)}

                                    />

                                    <div className={`comments-options ${displayOption ? 'active' : ''}`}>

                                        <ul>

                                            <li>

                                                <button

                                                    className="option-btn"

                                                    onClick={handleShowConfirmModal}

                                                    ref={deleteButton}

                                                >

                                                    <i className="fa fa-trash-o mr-1" />

                                                    {LABELS.DELETE}

                                                </button>

                                            </li>

                                        </ul>

                                    </div>

                                </>

                            }

                        </span>

                    </div>

                    <p>{comment}</p>

                </div>

            </div>

            <ConfirmModal

                show={showConfirmModal}

                onClose={() => setShowConfirmModal(false)}

                onAccept={handleModalAccept}

                acceptLabel="Aceptar"

            />

        </li>

  )

}

FeedCommentSection.CommentsList = CommentsList

FeedCommentSection.CommentTemplate = CommentTemplate

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(FeedCommentSection)