Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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

import { connect, useSelector } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

import ConfirmModal from '../modals/ConfirmModal'

import useOutsideClick from '../../hooks/useOutsideClick'

import FormErrorFeedback from '../UI/FormErrorFeedback'

const FeedComments = ({

  isShow = true,

  image = '/images/avatar.jpg',

  addUrl = '',

  currentComments = [],

  addNotification,

  updateTotalComments = function () {},

}) => {

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

  const [comments, setComments] = useState(currentComments)

  const labels = useSelector(({ intl }) => intl.labels)

  const submitCommet = (data) => {

    const currentFormData = new FormData()

    Object.entries(data).forEach(([key, value]) =>

      currentFormData.append(key, value)

    )

    axios.post(addUrl, currentFormData).then(({ data: response }) => {

      const { success, data: message, total_comments } = response

      if (!success) {

        addNotification({ style: 'danger', msg: message })

        return

      }

      updateTotalComments(total_comments)

      setComments((prevMessages) => [...prevMessages, message])

      reset()

    })

  }

  const deleteComment = (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 }))

  }

  useEffect(() => {

    setComments(currentComments)

  }, [currentComments])

  return (

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

      <form

        className="feedCommentContainer"

        onSubmit={handleSubmit(submitCommet)}

      >

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

      )}

      <FeedComments.List comments={comments} onDelete={deleteComment} />

    </div>

  )

}

const CommentsList = ({ comments, onDelete }) => {

  return (

    <ul className="comment-list">

      {comments.map((comment) => {

        return (

          <CommentsList.Item

            comment={comment}

            onDelete={onDelete}

            key={comment.unique}

          />

        )

      })}

    </ul>

  )

}

const CommentTemplate = ({ onDelete, comment }) => {

  const {

    unique,

    user_url,

    user_name,

    user_image = '/images/avatar.jpg',

    time_elapsed,

    comment: content,

    link_delete,

  } = comment

  const [showConfirmModal, setShowConfirmModal] = useState(false)

  const [displayOption, setDisplayOption] = useState(false)

  const deleteButton = useRef(null)

  const labels = useSelector(({ intl }) => intl.labels)

  useOutsideClick(deleteButton, () => setDisplayOption(false))

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

  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>

              {time_elapsed}

              {comment.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={toggleModal}

                          ref={deleteButton}

                        >

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

                          {labels.delete}

                        </button>

                      </li>

                    </ul>

                  </div>

                </>

              )}

            </span>

          </div>

          <p>{content}</p>

        </div>

      </div>

      <ConfirmModal

        show={showConfirmModal}

        onClose={toggleModal}

        onAccept={() => onDelete(unique, link_delete)}

        acceptLabel={labels.accept}

      />

    </li>

  )

}

FeedComments.List = CommentsList

CommentsList.Item = CommentTemplate

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

}

export default connect(null, mapDispatchToProps)(FeedComments)