Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3741 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3741 stevensc 1 
import React from 'react';
3746 stevensc 2 
import { useNavigate } from 'react-router-dom';
3741 stevensc 3 
 
4 
import { useAlertModal, useModal } from '@shared/hooks';
5 
import { useCategories, useQuestions } from '@my-coach/hooks';
6 
import { parseHelperToSelect } from '@shared/utils';
7 
 
8 
import {
9 
  FilterSelect,
10 
  FiltersRow,
11 
  PageHeader,
12 
  SearchBar,
13 
  Spinner,
14 
  Button,
15 
  Grid
16 
} from '@shared/components';
17 
import { QuestionCard, QuestionForm } from '@my-coach/components';
18 
 
19 
export function MyCoachPage() {
3746 stevensc 20 
  const navigate = useNavigate();
21 
 
22 
  const { showModal, closeModal } = useModal();
23 
  const { showAlert, closeAlert } = useAlertModal();
24 
 
25 
  const { categories, loading: categoriesLoading } = useCategories();
26 
 
3741 stevensc 27 
  const {
28 
    questions,
29 
    loading,
30 
    hasMore,
31 
    search,
32 
    category,
33 
    loadMore,
34 
    searchQuestion,
35 
    searchCategory,
36 
    clearFilters,
37 
    editQuestion,
38 
    deleteQuestion,
39 
    addQuestion
40 
  } = useQuestions();
41 
 
42 
  const handleAddQuestion = () => {
43 
    showModal(
44 
      'Agregar pregunta',
45 
      <QuestionForm
46 
        categories={categories}
47 
        onSubmit={(data) => {
48 
          addQuestion(data);
49 
          closeModal();
50 
        }}
51 
      />
52 
    );
53 
  };
54 
 
55 
  const handleEditQuestion = async (question) => {
56 
    showModal(
57 
      'Editar pregunta',
58 
      <QuestionForm
59 
        question={question}
60 
        categories={categories}
61 
        onSubmit={(data) => {
3746 stevensc 62 
          editQuestion(question.link_edit, data);
3741 stevensc 63 
          closeModal();
64 
        }}
65 
      />
66 
    );
67 
  };
68 
 
69 
  const handleDeleteQuestion = (question) => {
70 
    showAlert({
71 
      title: 'Eliminar pregunta',
72 
      message: '¿Estás seguro de querer eliminar esta pregunta?',
73 
      onConfirm: () => {
74 
        deleteQuestion(question.link_delete);
75 
        closeAlert();
76 
      }
77 
    });
78 
  };
79 
 
80 
  if (categoriesLoading || loading || !categories || !questions) {
81 
    return <Spinner />;
82 
  }
83 
 
84 
  return (
85 
    <>
86 
      <PageHeader title='Mi Coach' labelAdd='Agregar pregunta' onAdd={handleAddQuestion} />
87 
 
88 
      <FiltersRow>
89 
        <FilterSelect
90 
          options={parseHelperToSelect(categories)}
91 
          value={category}
92 
          onChange={searchCategory}
93 
          placeholder='Filtrar por categoría'
94 
        />
95 
        <SearchBar onChange={searchQuestion} value={search} />
96 
        <Button onClick={clearFilters}>Limpiar filtros</Button>
97 
      </FiltersRow>
98 
 
99 
      <Grid
100 
        items={questions}
101 
        emptyMessage='No hay preguntas para mostrar'
102 
        keyExtractor={(question) => question.uuid}
103 
        renderItem={(question) => (
104 
          <QuestionCard
105 
            question={question}
3746 stevensc 106 
            onEdit={question.link_edit ? () => handleEditQuestion(question) : null}
107 
            onDelete={question.link_delete ? () => handleDeleteQuestion(question) : null}
108 
            onView={question.link_view ? () => navigate(question.link_view) : null}
3741 stevensc 109 
          />
110 
        )}
111 
        renderFooter={() => (hasMore ? <Button onClick={loadMore}>Cargar más</Button> : null)}
112 
      />
113 
    </>
114 
  );
115 
}