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 ConfirmModal from '../../../components/modals/ConfirmModal';

import GoBackLayout from '@layouts/go-back';

import { AnswerCard, AnswerModal, QuestionCard } from '@my-coach/components';

export function 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={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>

  );

}