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} />

      )}

    />

  );

};