Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1660 | Rev 2185 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1657 stevensc 1
import React, { useMemo, useState } from 'react'
1650 stevensc 2
import { Link } from 'react-router-dom'
1657 stevensc 3
import { useDispatch, useSelector } from 'react-redux'
1650 stevensc 4
 
1657 stevensc 5
import { axios } from '@app/utils'
6
import { addNotification } from '@app/redux/notification/notification.actions'
7
import { removeComment } from '@app/redux/feed/feed.actions'
8
import { showReportModal } from '@app/redux/report/report.actions'
9
 
1661 stevensc 10
import { CommentsContainer, CommentTemplate } from './comments-ui'
1650 stevensc 11
import Options from '@app/components/UI/Option'
12
import ConfirmModal from '@app/components/modals/ConfirmModal'
13
 
1657 stevensc 14
export default function CommentsList({ comments }) {
1650 stevensc 15
  return (
1661 stevensc 16
    <CommentsContainer>
17
      {comments.map((comment) => (
18
        <CommentsList.Item key={comment.unique} comment={comment} />
19
      ))}
20
    </CommentsContainer>
1650 stevensc 21
  )
22
}
23
 
1657 stevensc 24
function Comment({ comment }) {
1650 stevensc 25
  const {
26
    unique,
27
    user_url,
28
    user_name,
29
    time_elapsed,
30
    comment: content,
1657 stevensc 31
    link_delete,
32
    link_abuse_report,
33
    feedId
1650 stevensc 34
  } = comment
1657 stevensc 35
  const [showConfirmModal, setShowConfirmModal] = useState(false)
36
  const labels = useSelector(({ intl }) => intl.labels)
37
  const dispatch = useDispatch()
1650 stevensc 38
 
1657 stevensc 39
  const toggleModal = () => setShowConfirmModal(!showConfirmModal)
40
 
41
  const reportComment = () =>
42
    dispatch(
43
      showReportModal({
44
        reportUrl: link_abuse_report,
45
        type: 'Comentario',
46
        onComplete: () => dispatch(removeComment({ commentId: unique, feedId }))
47
      })
48
    )
49
 
50
  const deleteComment = ({ id, deleteUrl }) => {
51
    axios
52
      .post(deleteUrl)
53
      .then((response) => {
54
        const { success, data } = response.data
55
 
56
        if (!success) {
57
          const errorMessage =
58
            typeof data === 'string'
59
              ? data
60
              : 'Error interno. Intente más tarde.'
61
          throw new Error(errorMessage)
62
        }
63
 
64
        dispatch(addNotification({ style: 'success', msg: data }))
65
        dispatch(removeComment({ feedId, commentId: id }))
66
      })
67
      .catch((error) => {
68
        dispatch(addNotification({ style: 'danger', msg: error.message }))
69
      })
1650 stevensc 70
  }
71
 
1660 stevensc 72
  const actions = useMemo(() => {
73
    const options = []
74
    if (link_delete) {
75
      options.push({ label: 'Borrar', action: toggleModal })
76
    }
77
 
78
    if (link_abuse_report) {
79
      options.push({ label: 'Reportar', action: reportComment })
80
    }
81
 
82
    return options
83
  }, [link_delete, link_abuse_report])
84
 
1650 stevensc 85
  return (
86
    <>
1661 stevensc 87
      <CommentTemplate>
1650 stevensc 88
        <div className='content'>
89
          <div className='info'>
90
            <Link to={user_url}>
91
              <h3>{user_name}</h3>
92
            </Link>
93
            <span>{time_elapsed}</span>
94
          </div>
1657 stevensc 95
 
1660 stevensc 96
          <Options options={actions} />
1657 stevensc 97
 
1650 stevensc 98
          <p>{content}</p>
99
        </div>
1661 stevensc 100
      </CommentTemplate>
1657 stevensc 101
 
1650 stevensc 102
      <ConfirmModal
103
        show={showConfirmModal}
104
        onClose={toggleModal}
1657 stevensc 105
        onAccept={() => deleteComment({ id: unique, deleteUrl: link_delete })}
1650 stevensc 106
        acceptLabel={labels.accept}
107
      />
108
    </>
109
  )
110
}
111
 
112
CommentsList.Item = Comment