Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'
import { removeComment } from '@app/redux/feed/feed.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 }) {
  return (
    <CommentsContainer>
      {comments.map((comment) => (
        <CommentsList.Item key={comment.unique} comment={comment} />
      ))}
    </CommentsContainer>
  )
}

function Comment({ comment }) {
  const {
    unique,
    user_url,
    user_name,
    time_elapsed,
    comment: content,
    link_delete,
    link_abuse_report,
    feedId
  } = comment
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

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

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

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

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Intente más tarde.'
          throw new Error(errorMessage)
        }

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

  const actions = useMemo(() => {
    const options = []
    if (link_delete) {
      options.push({ label: 'Borrar', action: toggleModal })
    }

    if (link_abuse_report) {
      options.push({ label: 'Reportar', action: reportComment })
    }

    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>

      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleModal}
        onAccept={() => deleteComment({ id: unique, deleteUrl: link_delete })}
        acceptLabel={labels.accept}
      />
    </>
  )
}

CommentsList.Item = Comment