Proyectos de Subversion LeadersLinked - SPA

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

import { useAlertModal, useModal } from '@shared/hooks';
import { useCategories, useQuestions } from '@my-coach/hooks';
import { parseHelperToSelect } from '@shared/utils';

import {
  FilterSelect,
  FiltersRow,
  PageHeader,
  SearchBar,
  Spinner,
  Button,
  Grid
} from '@shared/components';
import { QuestionCard, QuestionForm } from '@my-coach/components';

export function MyCoachPage() {
  const navigate = useNavigate();

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

  const { categories, loading: categoriesLoading } = useCategories();

  const {
    questions,
    loading,
    hasMore,
    search,
    category,
    loadMore,
    searchQuestion,
    searchCategory,
    clearFilters,
    editQuestion,
    deleteQuestion,
    addQuestion
  } = useQuestions();

  const handleAddQuestion = () => {
    showModal(
      'Agregar pregunta',
      <QuestionForm
        categories={categories}
        onSubmit={(data) => {
          addQuestion(data);
          closeModal();
        }}
      />
    );
  };

  const handleEditQuestion = async (question) => {
    showModal(
      'Editar pregunta',
      <QuestionForm
        question={question}
        categories={categories}
        onSubmit={(data) => {
          editQuestion(question.link_edit, data);
          closeModal();
        }}
      />
    );
  };

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

  if (categoriesLoading || loading || !categories || !questions) {
    return <Spinner />;
  }

  return (
    <>
      <PageHeader title='Mi Coach' labelAdd='Agregar pregunta' onAdd={handleAddQuestion} />

      <FiltersRow>
        <FilterSelect
          options={parseHelperToSelect(categories)}
          value={category}
          onChange={searchCategory}
          placeholder='Filtrar por categoría'
        />
        <SearchBar onChange={searchQuestion} value={search} />
        <Button onClick={clearFilters}>Limpiar filtros</Button>
      </FiltersRow>

      <Grid
        items={questions}
        emptyMessage='No hay preguntas para mostrar'
        keyExtractor={(question) => question.uuid}
        renderItem={(question) => (
          <QuestionCard
            question={question}
            onEdit={question.link_edit ? () => handleEditQuestion(question) : null}
            onDelete={question.link_delete ? () => handleDeleteQuestion(question) : null}
            onView={question.link_view ? () => navigate(question.link_view) : null}
          />
        )}
        renderFooter={() => (hasMore ? <Button onClick={loadMore}>Cargar más</Button> : null)}
      />
    </>
  );
}