Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

import { useDispatch } from 'react-redux';

import { axios } from '@app/utils';

import { showReportModal } from '@app/redux/report/report.actions';

import { addNotification } from '@app/redux/notification/notification.actions';

import CommentForm from './CommentForm';

import CommentsList from './CommentList';

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

export default function Comments({

  comments: defaultComments = [],

  onAdd = ({ totalComments, comment }) => {},

  addUrl = ''

}) {

  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((c) => c.unique !== currentComment.unique));

  };

  const reportComment = (reportUrl) =>

    dispatch(

      showReportModal({

        reportUrl,

        type: 'Comentario',

        onComplete: () => removeComment()

      })

    );

  const deleteComment = async () => {

    axios

      .post(currentComment.link_delete)

      .then((response) => {

        const { success, data } = response.data;

        if (!success) {

          throw new Error('Ha ocurrido un error al intentar eliminar el comentario.');

        }

        removeComment();

        setCurrentComment(null);

        setShowConfirm(false);

        dispatch(addNotification({ style: 'success', msg: data }));

      })

      .catch((error) => {

        dispatch(addNotification({ style: 'danger', msg: error.message }));

      });

  };

  const addComment = async (comment) => {

    try {

      const formData = new FormData();

      formData.append('comment', comment);

      const response = await axios.post(addUrl, formData);

      const { success, data: newComment, total_comments: totalComments } = response.data;

      if (!success) {

        throw new Error('Ha ocurrido un error al intentar agregar el comentario.');

      }

      setComments((prev) => [...prev, newComment]);

      onAdd({ comment: newComment, totalComments });

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  };

  useEffect(() => setComments(defaultComments), [defaultComments]);

  return (

    <>

      <CommentForm onSubmit={addComment} />

      <CommentsList comments={comments} onReport={reportComment} onDelete={handleDelete} />

      <ConfirmModal

        show={showConfirm}

        onClose={() => setShowConfirm(false)}

        onAccept={deleteComment}

      />

    </>

  );

}