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 CommentItem from './comment-item'

import ConfirmModal from '@app/components/modals/ConfirmModal'

import EmptySection from '@components/UI/EmptySection'

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

  if (!comments.length) {

    return <EmptySection message='No hay comentarios' />

  }

  return (

    <>

      {comments.map((comment) => (

        <CommentItem

          key={comment.unique}

          comment={comment}

          onDelete={handleDelete}

          onReport={reportComment}

        />

      ))}

      <ConfirmModal

        show={showConfirm}

        onClose={onCloseConfirm}

        onAccept={deleteComment}

      />

    </>

  )

}