Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2846 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2846 Rev 3719
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react';
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux';
3 
 
 3 
 
4 
import { axios } from '@app/utils'
 4 
import { axios } from '@app/utils';
5 
import { showReportModal } from '@app/redux/report/report.actions'
 5 
import { showReportModal } from '@app/redux/report/report.actions';
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 6 
import { addNotification } from '@app/redux/notification/notification.actions';
7 
 
 7 
 
8 
import CommentForm from './comment-form'
 8 
import CommentForm from './comment-form';
9 
import CommentsList from './comment-list'
 9 
import CommentsList from './comment-list';
10 
import ConfirmModal from '@components/modals/ConfirmModal'
 10 
import ConfirmModal from '@components/modals/ConfirmModal';
11 
 
 11 
 
12 
export default function Comments({
 12 
export default function Comments({
13 
  comments: defaultComments = [],
 13 
  comments: defaultComments = [],
14 
  onAdd = ({ totalComments, comment }) => {},
 14 
  onAdd = () => {},
15 
  addUrl = ''
 15 
  addUrl = ''
16 
}) {
 16 
}) {
17 
  const [comments, setComments] = useState(defaultComments)
 17 
  const [comments, setComments] = useState(defaultComments);
18 
  const [currentComment, setCurrentComment] = useState(null)
 18 
  const [currentComment, setCurrentComment] = useState(null);
19 
  const [showConfirm, setShowConfirm] = useState(false)
 19 
  const [showConfirm, setShowConfirm] = useState(false);
20 
  const dispatch = useDispatch()
 20 
  const dispatch = useDispatch();
21 
 
 21 
 
22 
  const handleDelete = (comment) => {
 22 
  const handleDelete = (comment) => {
23 
    setCurrentComment(comment)
 23 
    setCurrentComment(comment);
24 
    setShowConfirm(true)
 24 
    setShowConfirm(true);
25 
  }
 25 
  };
26 
 
 26 
 
27 
  const removeComment = () => {
 27 
  const removeComment = () => {
28 
    setComments((prev) =>
 - 
 
29 
      prev.filter((c) => c.unique !== currentComment.unique)
 28 
    setComments((prev) => prev.filter((c) => c.unique !== currentComment.unique));
30 
    )
 - 
 
31 
  }
 29 
  };
32 
 
 30 
 
33 
  const reportComment = (reportUrl) =>
 31 
  const reportComment = (reportUrl) =>
34 
    dispatch(
 32 
    dispatch(
35 
      showReportModal({
 33 
      showReportModal({
36 
        reportUrl,
 34 
        reportUrl,
37 
        type: 'Comentario',
 35 
        type: 'Comentario',
38 
        onComplete: () => removeComment()
 36 
        onComplete: () => removeComment()
39 
      })
 37 
      })
40 
    )
 38 
    );
41 
 
 39 
 
42 
  const deleteComment = async () => {
 40 
  const deleteComment = async () => {
43 
    axios
 41 
    axios
44 
      .post(currentComment.link_delete)
 42 
      .post(currentComment.link_delete)
45 
      .then((response) => {
 43 
      .then((response) => {
46 
        const { success, data } = response.data
 44 
        const { success, data } = response.data;
47 
 
 45 
 
48 
        if (!success) {
 46 
        if (!success) {
49 
          throw new Error(
 - 
 
50 
            'Ha ocurrido un error al intentar eliminar el comentario.'
 47 
          throw new Error('Ha ocurrido un error al intentar eliminar el comentario.');
51 
          )
 - 
 
52 
        }
 48 
        }
53 
 
 49 
 
54 
        removeComment()
 50 
        removeComment();
55 
        setCurrentComment(null)
 51 
        setCurrentComment(null);
56 
        setShowConfirm(false)
 52 
        setShowConfirm(false);
57 
        dispatch(addNotification({ style: 'success', msg: data }))
 53 
        dispatch(addNotification({ style: 'success', msg: data }));
58 
      })
 54 
      })
59 
      .catch((error) => {
 55 
      .catch((error) => {
60 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 56 
        dispatch(addNotification({ style: 'danger', msg: error.message }));
61 
      })
 57 
      });
62 
  }
 58 
  };
63 
 
 59 
 
64 
  const addComment = async (comment) => {
 60 
  const addComment = async (comment) => {
65 
    try {
 61 
    try {
66 
      const formData = new FormData()
 62 
      const formData = new FormData();
67 
      formData.append('comment', comment)
 63 
      formData.append('comment', comment);
68 
 
 64 
 
69 
      const response = await axios.post(addUrl, formData)
 65 
      const response = await axios.post(addUrl, formData);
70 
      const {
 - 
 
71 
        success,
 - 
 
72 
        data: newComment,
 - 
 
73 
        total_comments: totalComments
 66 
      const { success, data: newComment, total_comments: totalComments } = response.data;
74 
      } = response.data
 - 
 
75 
 
 67 
 
76 
      if (!success) {
 68 
      if (!success) {
77 
        throw new Error(
 - 
 
78 
          'Ha ocurrido un error al intentar agregar el comentario.'
 69 
        throw new Error('Ha ocurrido un error al intentar agregar el comentario.');
79 
        )
 - 
 
80 
      }
 70 
      }
81 
 
 71 
 
82 
      setComments((prev) => [...prev, newComment])
 72 
      setComments((prev) => [...prev, newComment]);
83 
      onAdd({ comment: newComment, totalComments })
 73 
      onAdd({ comment: newComment, totalComments });
84 
    } catch (error) {
 74 
    } catch (error) {
85 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 75 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
86 
    }
 76 
    }
87 
  }
 77 
  };
88 
 
 78 
 
89 
  useEffect(() => setComments(defaultComments), [defaultComments])
 79 
  useEffect(() => setComments(defaultComments), [defaultComments]);
90 
 
 80 
 
91 
  return (
 81 
  return (
92 
    <>
 82 
    <>
93 
      <CommentForm onSubmit={addComment} />
 83 
      <CommentForm onSubmit={addComment} />
94 
      <CommentsList
 - 
 
95 
        comments={comments}
 - 
 
96 
        onReport={reportComment}
 84 
      <CommentsList comments={comments} onReport={reportComment} onDelete={handleDelete} />
97 
        onDelete={handleDelete}
 - 
 
98 
      />
 - 
 
99 
      <ConfirmModal
 85 
      <ConfirmModal
100 
        show={showConfirm}
 86 
        show={showConfirm}
101 
        onClose={() => setShowConfirm(false)}
 87 
        onClose={() => setShowConfirm(false)}
102 
        onAccept={deleteComment}
 88 
        onAccept={deleteComment}
103 
      />
 89 
      />
104 
    </>
 90 
    </>
105 
  )
 91 
  );
106 
}
 92 
}