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);

              }}

            />

          )}

        />

      )}

    </>

  );

}