Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { Box, Typography } from '@mui/material';

import { useFetch } from '@shared/hooks';

import { List } from '@shared/components';
import { DetailTag } from '@microlearning/components';

export function TimelinePage() {
  const loaderRef = useRef(null);

  const { data, loading, refetch } = useFetch('/microlearning/timeline');

  const fetchData = useCallback(
    (url = '') => {
      if (isLoading || !url) return;

      setIsLoading(true);

      api
        .get(`${url}?page=${currentPage}`)
        .then((data) => {
          setCurrentPage((prevCurrentPage) => prevCurrentPage + 1);
          setTotalPages(data.total.pages);
          setItems((prevItems) => [...prevItems, ...data.current.items]);
        })
        .catch((err) => console.log(err.message))
        .finally(() => setIsLoading(false));
    },
    [currentPage, isLoading, totalPages, linkTimeline]
  );

  useEffect(() => {
    if (isIntercepting) fetchData(linkTimeline);
  }, [isIntercepting]);

  return (
    <>
      <Typography variant='h2'>Linea de tiempo</Typography>

      <Box
        display='flex'
        flexDirection='column'
        gap={1}
        width='100%'
        mt={2}
        maxHeight='60vh'
        overflow='auto'
      >
        <TimelineList items={items} />

        <div ref={loaderRef}>{currentPage < totalPages ? <Spinner /> : null}</div>
      </Box>
    </>
  );
}

const TimelineList = ({ items = [] }) => {
  const labels = useSelector(({ intl }) => intl.labels);

  return (
    <List
      items={items}
      emptyMessage={labels.datatable_szerorecords}
      renderItem={({ activity, added_on }, i) => (
        <DetailTag key={i} title={activity} label={added_on} />
      )}
    />
  );
};