Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1661 | Rev 2186 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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