Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3511 Rev 3527
Línea 1... Línea 1...
1 
import React, { useCallback, useEffect, useRef } from 'react';
 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
 2 
import { useSelector } from 'react-redux';
3 
import { Box, Typography } from '@mui/material';
 3 
import { Box, Typography } from '@mui/material';
Línea 4... Línea 4...
4 
 
 4 
 
Línea 5... Línea 5...
5 
import { useFetch } from '@shared/hooks';
 5 
import { useTimeline } from '@microlearning/hooks';
6 
 
 6 
 
Línea 7... Línea 7...
7 
import { List } from '@shared/components';
 7 
import { InfinityList } from '@shared/components';
8 
import { DetailTag } from '@microlearning/components';
 - 
 
9 
 
 - 
 
10 
export function TimelinePage() {
 8 
import { DetailTag } from '@microlearning/components';
11 
  const loaderRef = useRef(null);
 - 
 
12 
 
 - 
 
13 
  const { data, loading, refetch } = useFetch('/microlearning/timeline');
 - 
 
14 
 
 - 
 
15 
  const fetchData = useCallback(
 - 
 
16 
    (url = '') => {
 - 
 
17 
      if (isLoading || !url) return;
 - 
 
18 
 
 - 
 
19 
      setIsLoading(true);
 - 
 
20 
 
 - 
 
21 
      api
 9 
 
22 
        .get(`${url}?page=${currentPage}`)
 - 
 
23 
        .then((data) => {
 - 
 
24 
          setCurrentPage((prevCurrentPage) => prevCurrentPage + 1);
 - 
 
25 
          setTotalPages(data.total.pages);
 - 
 
26 
          setItems((prevItems) => [...prevItems, ...data.current.items]);
 - 
 
27 
        })
 - 
 
28 
        .catch((err) => console.log(err.message))
 - 
 
29 
        .finally(() => setIsLoading(false));
 - 
 
30 
    },
 - 
 
31 
    [currentPage, isLoading, totalPages, linkTimeline]
 - 
 
32 
  );
 - 
 
33 
 
 - 
 
Línea 34... Línea 10...
34 
  useEffect(() => {
 10 
export function TimelinePage() {
35 
    if (isIntercepting) fetchData(linkTimeline);
 11 
  const { items, loading, hasMore, loadMore } = useTimeline();
36 
  }, [isIntercepting]);
 12 
  const labels = useSelector(({ intl }) => intl.labels);
Línea 46... Línea 22...
46 
        width='100%'
 22 
        width='100%'
47 
        mt={2}
 23 
        mt={2}
48 
        maxHeight='60vh'
 24 
        maxHeight='60vh'
49 
        overflow='auto'
 25 
        overflow='auto'
50 
      >
 26 
      >
- 
 
 27 
        <InfinityList
51 
        <TimelineList items={items} />
 28 
          items={items}
52 
 
 - 
 
- 
 
 29 
          loading={loading}
- 
 
 30 
          emptyMessage={labels.datatable_szerorecords}
- 
 
 31 
          onEnd={loadMore}
- 
 
 32 
          hasMore={hasMore}
- 
 
 33 
          renderItem={({ activity, added_on }, i) => (
53 
        <div ref={loaderRef}>{currentPage < totalPages ? <Spinner /> : null}</div>
 34 
            <DetailTag key={i} title={activity} label={added_on} />
- 
 
 35 
          )}
- 
 
 36 
        />
54 
      </Box>
 37 
      </Box>
55 
    </>
 38 
    </>
56 
  );
 39 
  );
57 
}
 40 
}
58 
 
 - 
 
59 
const TimelineList = ({ items = [] }) => {
 - 
 
60 
  const labels = useSelector(({ intl }) => intl.labels);
 - 
 
61 
 
 - 
 
62 
  return (
 - 
 
63 
    <List
 - 
 
64 
      items={items}
 - 
 
65 
      emptyMessage={labels.datatable_szerorecords}
 - 
 
66 
      renderItem={({ activity, added_on }, i) => (
 - 
 
67 
        <DetailTag key={i} title={activity} label={added_on} />
 - 
 
68 
      )}
 - 
 
69 
    />
 - 
 
70 
  );
 - 
 
71 
};
 -