Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import { useAlertModal, useModal } from '@shared/hooks';
import { useAnswers, useQuestion } from '@my-coach/hooks';

import { List, Spinner } from '@shared/components';
import { AnswerCard, AnswerForm, QuestionCard } from '@my-coach/components';
import PageHeader from '@components/common/page-header';

export function MyCoachViewPage() {
  const { uuid } = useParams();
  const navigate = useNavigate();

  const { showModal, closeModal } = useModal();
  const { showAlert, closeAlert } = useAlertModal();

  const {
    question,
    loading,
    deleteQuestion,
    updateTotalAnswers,
    updateTotalComments,
    updateTotalReactions
  } = useQuestion(uuid, {
    onDeleteQuestion: () => {
      closeAlert();
      navigate('/my-coach');
    }
  });

  const {
    answers,
    loading: answersLoading,
    addAnswer,
    editAnswer,
    deleteAnswer,
    updateComments
  } = useAnswers(question, {
    onAddAnswer: (total_answers) => {
      updateTotalAnswers(total_answers);
      closeModal();
    },
    onEditAnswer: () => {
      closeModal();
    },
    onDeleteAnswer: ({ total_answers, total_comments, total_reactions }) => {
      updateTotalAnswers(total_answers);
      updateTotalComments(total_comments);
      updateTotalReactions(total_reactions);
      closeAlert();
    }
  });

  const handleDeleteQuestion = (url) => {
    showAlert({
      title: 'Eliminar pregunta',
      message: '¿Estás seguro de querer eliminar esta pregunta?',
      onConfirm: () => deleteQuestion(url)
    });
  };

  const handleDeleteAnswer = (url) => {
    showAlert({
      title: 'Eliminar respuesta',
      message: '¿Estás seguro de querer eliminar esta respuesta?',
      onConfirm: () => deleteAnswer(url)
    });
  };

  const handleAddAnswer = (addUrl) => {
    showModal('Agregar respuesta', <AnswerForm onSubmit={(answer) => addAnswer(addUrl, answer)} />);
  };

  const handleEditAnswer = (editUrl, description) => {
    showModal(
      'Editar respuesta',
      <AnswerForm
        defaultValues={{ description }}
        onSubmit={(answer) => editAnswer(editUrl, answer)}
      />
    );
  };

  if (loading || !question) {
    return <Spinner />;
  }

  return (
    <>
      <PageHeader title={question.title} goBack />
      <QuestionCard
        question={question}
        onDelete={question.link_delete ? () => handleDeleteQuestion(question.link_delete) : null}
        onReply={
          question.link_answers_add ? () => handleAddAnswer(question.link_answers_add) : null
        }
      />
      {answersLoading ? (
        <Spinner />
      ) : (
        <List
          items={answers}
          emptyMessage='No hay respuestas'
          keyExtractor={(item) => item.uuid}
          renderItem={(answer) => (
            <AnswerCard
              answer={answer}
              onEdit={
                answer.link_edit ? () => handleEditAnswer(answer.link_edit, answer.text) : null
              }
              onDelete={answer.link_delete ? () => handleDeleteAnswer(answer.link_delete) : null}
              onUpdateComments={(uuid, data) => {
                updateComments(uuid, data.total_comments_answer);
                updateTotalComments(data.total_comments_question);
              }}
            />
          )}
        />
      )}
    </>
  );
}