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 { StyledCommentList, StyledCommentTemplate } from './comments-ui'

import Options from '@app/components/UI/Option'

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

export default function CommentsList({ comments }) {

  return (

    <>

      <StyledCommentList>

        {comments.map((comment) => {

          return (

            <li key={comment.unique}>

              <CommentsList.Item comment={comment} />

            </li>

          )

        })}

      </StyledCommentList>

    </>

  )

}

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

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

      })

  }

  return (

    <>

      <StyledCommentTemplate>

        <div className='content'>

          <div className='info'>

            <Link to={user_url}>

              <h3>{user_name}</h3>

            </Link>

            <span>{time_elapsed}</span>

          </div>

          <Options options={actions} right='0.5rem' top='1.5rem' />

          <p>{content}</p>

        </div>

      </StyledCommentTemplate>

      <ConfirmModal

        show={showConfirmModal}

        onClose={toggleModal}

        onAccept={() => deleteComment({ id: unique, deleteUrl: link_delete })}

        acceptLabel={labels.accept}

      />

    </>

  )

}

CommentsList.Item = Comment