Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'
import { showReportModal } from '@app/redux/report/report.actions'

import { CommentsContainer } from './comments-ui'
import ConfirmModal from '@app/components/modals/ConfirmModal'
import CommentItem from './comment-item'

export default function CommentsList({ comments: defaultComments = [] }) {
  const [comments, setComments] = useState(defaultComments)
  const [currentComment, setCurrentComment] = useState(null)
  const [showConfirm, setShowConfirm] = useState(false)
  const dispatch = useDispatch()

  const handleDelete = (comment) => {
    setCurrentComment(comment)
    setShowConfirm(true)
  }

  const removeComment = () => {
    setComments((prev) =>
      prev.filter((comment) => comment.unique !== currentComment.unique)
    )
  }

  const onCloseConfirm = () => {
    setShowConfirm(false)
    setCurrentComment(null)
  }

  const reportComment = (reportUrl) =>
    dispatch(
      showReportModal({
        reportUrl,
        type: 'Comentario',
        onComplete: () => removeComment()
      })
    )

  const deleteComment = () => {
    axios
      .post(currentComment.link_delete)
      .then((response) => {
        const { success, data } = response.data

        if (!success) {
          throw new Error(
            'Error al eliminar un comentario, por favor intente más tarde'
          )
        }

        dispatch(addNotification({ style: 'success', msg: data }))
        removeComment()
        onCloseConfirm()
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  useEffect(() => setComments(defaultComments), [defaultComments])

  return (
    <>
      <CommentsContainer>
        {comments.map((comment) => (
          <CommentItem
            key={comment.unique}
            comment={comment}
            onDelete={handleDelete}
            onReport={reportComment}
          />
        ))}
      </CommentsContainer>
      <ConfirmModal
        show={showConfirm}
        onClose={onCloseConfirm}
        onAccept={deleteComment}
      />
    </>
  )
}