Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Grid } from '@mui/material';

import { axios } from '../../utils';
import { addNotification } from '../../redux/notification/notification.actions';

import QuestionCard from '../../components/my-coach/QuestionCard';
import AnswerCard from '../../components/my-coach/AnswerCard';
import AnswerModal from '../../components/my-coach/AnswerModal';
import ConfirmModal from '../../components/modals/ConfirmModal';
import GoBackLayout from '@layouts/go-back';

const MyCoachViewPage = () => {
  const [question, setQuestion] = useState({});
  const [answers, setAnswers] = useState([]);
  const [modalShow, setModalShow] = useState(null);
  const [currentAnswer, setCurrentAnswer] = useState('');
  const addUrl = useRef('');
  const actionUrl = useRef('');
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();
  const { pathname } = useLocation();
  const navigate = useNavigate();

  const getQuestion = () => {
    axios
      .get(pathname, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.';

          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
          return;
        }

        addUrl.current = data.link_answers_add;
        setQuestion(data);
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }));
      });
  };

  const confirmDelete = () => {
    axios
      .post(actionUrl.current)
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error, por favor intente más tarde.';

          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
          return;
        }

        closeModal();
        dispatch(addNotification({ style: 'success', msg: data }));
        navigate('/my-coach');
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }));
      });
  };

  const confirmDeleteAnswer = () => {
    axios
      .post(actionUrl.current)
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error, por favor intente más tarde.';

          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
          return;
        }

        setQuestion((prevQuestion) => ({
          ...prevQuestion,
          comments: data.total_comments,
          answers: data.total_answers,
          reactions: data.total_reactions
        }));
        closeModal();
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }));
      });
  };

  const deleteQuestion = (url) => {
    actionUrl.current = url;
    setModalShow('delete');
  };

  const editQuestion = (url) => {
    actionUrl.current = url;
    setModalShow('edit');
  };

  const closeModal = () => {
    actionUrl.current = '';
    setModalShow(null);
    setCurrentAnswer('');
  };

  const addAnswer = () => {
    setModalShow('addAnswer');
  };

  const editAnswer = (url, text) => {
    setModalShow('editAnswer');
    actionUrl.current = url;
    setCurrentAnswer(text);
  };

  const deleteAnswer = (url) => {
    setModalShow('deleteAnswer');
    actionUrl.current = url;
  };

  const onAddAnswer = ({ answers, item }) => {
    setQuestion((prevQuestion) => ({ ...prevQuestion, answers }));
    setAnswers((prevAnswers) => [item, ...prevAnswers]);
  };

  const onEditAnswer = ({ description }) => {
    const newAnswers = answers.map((answer) => {
      if (answer.link_edit === actionUrl.current) {
        return { ...answer, text: description };
      }

      return answer;
    });

    setAnswers(newAnswers);
  };

  const updateTotalComments = (total) => {
    setQuestion({
      ...question,
      comments: total
    });
  };

  const updateTotalReactions = (total) => {
    setQuestion({
      ...question,
      reactions: total
    });
  };

  useEffect(() => {
    getQuestion();
  }, []);

  useEffect(() => {
    if (question.link_answers) {
      axios
        .get(question.link_answers)
        .then((response) => {
          const { data, success } = response.data;

          if (!success) {
            const errorMessage =
              typeof data === 'string'
                ? data
                : 'Error interno. Por favor, inténtelo de nuevo más tarde.';

            dispatch(addNotification({ style: 'danger', msg: errorMessage }));
            return;
          }

          setAnswers(data.items);
        })
        .catch((error) => {
          dispatch(addNotification({ style: 'danger', msg: error.message }));
        });
    }
  }, [question]);

  return (
    <GoBackLayout title={labels.my_coach}>
      <Grid container>
        <Grid size={{ xs: 12, md: 8 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <QuestionCard
            key={question.uuid}
            onEdit={editQuestion}
            onDelete={deleteQuestion}
            onReply={addAnswer}
            {...question}
          />

          {answers.map((answer) => (
            <AnswerCard
              key={answer.unique}
              {...answer}
              onEdit={editAnswer}
              onDelete={deleteAnswer}
              updateComments={updateTotalComments}
              updateReactions={updateTotalReactions}
            />
          ))}
        </Grid>
      </Grid>

      <AnswerModal
        url={currentAnswer ? actionUrl.current : addUrl.current}
        show={['addAnswer', 'editAnswer'].includes(modalShow)}
        currentAnswer={currentAnswer}
        onClose={closeModal}
        onComplete={currentAnswer ? onEditAnswer : onAddAnswer}
      />
      <ConfirmModal
        show={modalShow === 'deleteAnswer'}
        onClose={closeModal}
        onAccept={confirmDeleteAnswer}
      />
      <ConfirmModal show={modalShow === 'delete'} onClose={closeModal} onAccept={confirmDelete} />
    </GoBackLayout>
  );
};

export default MyCoachViewPage;