Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
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, CommentTemplate } from './comments-ui'
import Options from '@app/components/UI/Option'
import ConfirmModal from '@app/components/modals/ConfirmModal'

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) => (
          <Comment
            key={comment.unique}
            comment={comment}
            onDelete={handleDelete}
            onReport={reportComment}
          />
        ))}
      </CommentsContainer>
      <ConfirmModal
        show={showConfirm}
        onClose={onCloseConfirm}
        onAccept={deleteComment}
      />
    </>
  )
}

function Comment({ comment, onReport, onDelete }) {
  const {
    user_url,
    user_name,
    time_elapsed,
    comment: content,
    link_delete,
    link_abuse_report
  } = comment

  const actions = useMemo(() => {
    const options = []

    if (link_delete)
      options.push({ label: 'Borrar', action: () => onDelete(comment) })

    if (link_abuse_report)
      options.push({
        label: 'Reportar',
        action: () => onReport(link_abuse_report)
      })

    return options
  }, [link_delete, link_abuse_report])

  return (
    <CommentTemplate>
      <div className='content'>
        <div className='info'>
          <Link to={user_url}>
            <h3>{user_name}</h3>
          </Link>
          <span>{time_elapsed}</span>
        </div>

        <Options options={actions} />

        <p>{content}</p>
      </div>
    </CommentTemplate>
  )
}