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>

  )

}