Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3274 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3274 Rev 3694
Línea 1... Línea 1...
1 
import React, { useMemo, useRef, useState } from 'react'
 1 
import React, { useMemo, useRef, useState } from 'react';
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux';
3 
import { Box, Grid, MenuItem, Select, styled } from '@mui/material'
 3 
import { Box, Grid, MenuItem, Select, styled } from '@mui/material';
4 
import { Search } from '@mui/icons-material'
 4 
import Search from '@mui/icons-material/Search';
5 
 
 5 
 
6 
import { useFetch, useSearchQuery } from '@hooks'
 6 
import { useFetch, useSearchQuery } from '@hooks';
7 
import { axios, debounce } from '@utils'
 7 
import { axios, debounce } from '@utils';
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions';
9 
 
 9 
 
10 
import TitleSection from '@components/UI/TitleSection'
 10 
import TitleSection from '@components/UI/TitleSection';
11 
import SideMenu from '@components/UI/sidemenu/SideMenu'
 11 
import SideMenu from '@components/UI/sidemenu/SideMenu';
12 
import Input from '@components/UI/inputs/Input'
 12 
import Input from '@components/UI/inputs/Input';
13 
import QuestionCard from '@components/my-coach/QuestionCard'
 13 
import QuestionCard from '@components/my-coach/QuestionCard';
14 
import EmptySection from '@components/UI/EmptySection'
 14 
import EmptySection from '@components/UI/EmptySection';
15 
import QuestionModal from '@components/my-coach/QuestionModal'
 15 
import QuestionModal from '@components/my-coach/QuestionModal';
16 
import ConfirmModal from '@components/modals/ConfirmModal'
 16 
import ConfirmModal from '@components/modals/ConfirmModal';
17 
import Pagination from '@components/common/Pagination'
 17 
import Pagination from '@components/common/Pagination';
Línea 18... Línea 18...
18 
 
 18 
 
19 
const QuestionsGrid = styled(Box)`
 19 
const QuestionsGrid = styled(Box)`
20 
  display: grid;
 20 
  display: grid;
21 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 21 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
22 
  gap: 1rem;
 22 
  gap: 1rem;
Línea 23... Línea 23...
23 
`
 23 
`;
24 
 
 24 
 
25 
const MyCoachPage = () => {
 25 
const MyCoachPage = () => {
26 
  const [modalShow, setModalShow] = useState(null)
 26 
  const [modalShow, setModalShow] = useState(null);
27 
  const actionUrl = useRef('')
 27 
  const actionUrl = useRef('');
28 
  const labels = useSelector(({ intl }) => intl.labels)
 28 
  const labels = useSelector(({ intl }) => intl.labels);
29 
  const dispatch = useDispatch()
 29 
  const dispatch = useDispatch();
30 
 
 30 
 
31 
  const { getStringParams, getParam, setParam } = useSearchQuery()
 31 
  const { getStringParams, getParam, setParam } = useSearchQuery();
Línea 32... Línea 32...
32 
  const { data: categoriesData } = useFetch(`/my-coach`)
 32 
  const { data: categoriesData } = useFetch(`/my-coach`);
33 
  const { data, refetch } = useFetch('/my-coach/questions' + getStringParams())
 33 
  const { data, refetch } = useFetch('/my-coach/questions' + getStringParams());
Línea 34... Línea 34...
34 
 
 34 
 
Línea 35... Línea 35...
35 
  const categories = useMemo(() => {
 35 
  const categories = useMemo(() => {
36 
    const defaultCategories = [{ name: 'Todas', value: '' }]
 - 
 
37 
 
 36 
    const defaultCategories = [{ name: 'Todas', value: '' }];
38 
    if (!categoriesData.categories) return defaultCategories
 37 
 
39 
 
 - 
 
40 
    const results = Object.entries(categoriesData.categories).map(
 38 
    if (!categoriesData.categories) return defaultCategories;
Línea 41... Línea 39...
41 
      ([uuid, name]) => ({
 39 
 
42 
        name,
 40 
    const results = Object.entries(categoriesData.categories).map(([uuid, name]) => ({
Línea 43... Línea 41...
43 
        value: uuid
 41 
      name,
44 
      })
 42 
      value: uuid
45 
    )
 43 
    }));
46 
 
 44 
 
47 
    return defaultCategories.concat(results)
 45 
    return defaultCategories.concat(results);
Línea 48... Línea 46...
48 
  }, [categoriesData])
 46 
  }, [categoriesData]);
49 
 
 47 
 
50 
  const confirmDelete = () => {
 - 
 
51 
    axios
 - 
 
52 
      .post(actionUrl.current)
 48 
  const confirmDelete = () => {
Línea 53... Línea 49...
53 
      .then((response) => {
 49 
    axios
54 
        const { data, success } = response.data
 50 
      .post(actionUrl.current)
55 
 
 51 
      .then((response) => {
Línea 56... Línea 52...
56 
        if (!success) {
 52 
        const { data, success } = response.data;
57 
          const errorMessage =
 53 
 
58 
            typeof data === 'string'
 54 
        if (!success) {
59 
              ? data
 55 
          const errorMessage =
60 
              : 'Ha ocurrido un error, por favor intente más tarde.'
 56 
            typeof data === 'string' ? data : 'Ha ocurrido un error, por favor intente más tarde.';
61 
 
 57 
 
62 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 58 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
63 
          return
 59 
          return;
Línea 64... Línea 60...
64 
        }
 60 
        }
65 
 
 61 
 
66 
        dispatch(addNotification({ style: 'success', msg: data }))
 62 
        dispatch(addNotification({ style: 'success', msg: data }));
67 
        refetch()
 63 
        refetch();
Línea 68... Línea 64...
68 
        closeModal()
 64 
        closeModal();
69 
      })
 65 
      })
70 
      .catch((error) => {
 66 
      .catch((error) => {
71 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 67 
        dispatch(addNotification({ style: 'danger', msg: error.message }));
Línea 72... Línea 68...
72 
      })
 68 
      });
73 
  }
 69 
  };
74 
 
 70 
 
75 
  const addQuestion = () => {
 71 
  const addQuestion = () => {
Línea 76... Línea 72...
76 
    actionUrl.current = '/my-coach/questions/add'
 72 
    actionUrl.current = '/my-coach/questions/add';
77 
    setModalShow('add')
 73 
    setModalShow('add');
78 
  }
 74 
  };
79 
 
 75 
 
Línea 80... Línea 76...
80 
  const editQuestion = (url) => {
 76 
  const editQuestion = (url) => {
Línea 81... Línea 77...
81 
    actionUrl.current = url
 77 
    actionUrl.current = url;
82 
    setModalShow('edit')
 78 
    setModalShow('edit');
83 
  }
 79 
  };
84 
 
 80 
 
Línea 153... Línea 149...
153 
                  onDelete={deleteQuestion}
 149 
                  onDelete={deleteQuestion}
154 
                  {...question}
 150 
                  {...question}
155 
                />
 151 
                />
156 
              ))
 152 
              ))
157 
            ) : (
 153 
            ) : (
158 
              <EmptySection
 - 
 
159 
                message={labels.error_no_record_matched_your_query}
 154 
              <EmptySection message={labels.error_no_record_matched_your_query} />
160 
              />
 - 
 
161 
            )}
 155 
            )}
162 
          </QuestionsGrid>
 156 
          </QuestionsGrid>
Línea 163... Línea 157...
163 
 
 157 
 
164 
          <Pagination
 158 
          <Pagination
Línea 175... Línea 169...
175 
        onComplete={refetch}
 169 
        onComplete={refetch}
176 
        url={actionUrl.current}
 170 
        url={actionUrl.current}
177 
        isEdit={modalShow === 'edit'}
 171 
        isEdit={modalShow === 'edit'}
178 
      />
 172 
      />
Línea 179... Línea -...
179 
 
 - 
 
180 
      <ConfirmModal
 173 
 
181 
        show={modalShow === 'delete'}
 - 
 
182 
        onClose={closeModal}
 - 
 
183 
        onAccept={confirmDelete}
 - 
 
184 
      />
 174 
      <ConfirmModal show={modalShow === 'delete'} onClose={closeModal} onAccept={confirmDelete} />
185 
    </>
 175 
    </>
186 
  )
 176 
  );
Línea 187... Línea 177...
187 
}
 177 
};