Proyectos de Subversion LeadersLinked - SPA

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

import { useDispatch } from 'react-redux'

import { axios } from '@app/utils'

import { showReportModal } from '@app/redux/report/report.actions'

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

import CommentForm from './comment-form'

import CommentsList from './comment-list'

import ConfirmModal from '@components/modals/ConfirmModal'

export default function Comments({

  comments: defaultComments = [],

  onAdd = ({ totalComments, comment }) => {},

  addUrl = ''

}) {

  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((c) => c.unique !== currentComment.unique)

    )

  }

  const reportComment = (reportUrl) =>

    dispatch(

      showReportModal({

        reportUrl,

        type: 'Comentario',

        onComplete: () => removeComment()

      })

    )

  const deleteComment = async () => {

    axios

      .post(currentComment.link_delete)

      .then((response) => {

        const { success, data } = response.data

        if (!success) {

          throw new Error(

            'Ha ocurrido un error al intentar eliminar el comentario.'

          )

        }

        removeComment()

        setCurrentComment(null)

        setShowConfirm(false)

        dispatch(addNotification({ style: 'success', msg: data }))

      })

      .catch((error) => {

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

      })

  }

  const addComment = async (comment) => {

    try {

      const formData = new FormData()

      formData.append('comment', comment)

      const response = await axios.post(addUrl, formData)

      const {

        success,

        data: newComment,

        total_comments: totalComments

      } = response.data

      if (!success) {

        throw new Error(

          'Ha ocurrido un error al intentar agregar el comentario.'

        )

      }

      setComments((prev) => [...prev, newComment])

      onAdd({ comment: newComment, totalComments })

    } catch (error) {

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

    }

  }

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

  return (

    <>

      <CommentForm onSubmit={addComment} />

      <CommentsList

        comments={comments}

        onReport={reportComment}

        onDelete={handleDelete}

      />

      <ConfirmModal

        show={showConfirm}

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

        onAccept={deleteComment}

      />

    </>

  )

}