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={LABELS.ACCEPT}
            />
        </li>
  )
}

FeedCommentSection.CommentsList = CommentsList
FeedCommentSection.CommentTemplate = CommentTemplate

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

export default connect(null, mapDispatchToProps)(FeedCommentSection)