Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useEffect, useRef, useState } from 'react';

import { useSelector } from 'react-redux';

import { Box, Typography } from '@mui/material';

import { useNearScreen, useMicroLearning } from '@hooks';

import { api } from '@shared/libs';

import { List, Spinner } from '@shared/components';

import DetailTag from '@microlearning/components/DetailTag';

export function TimelinePage() {

  const { link_timeline: linkTimeline } = useMicroLearning();

  const [items, setItems] = useState([]);

  const [isLoading, setIsLoading] = useState(false);

  const [totalPages, setTotalPages] = useState(1);

  const [currentPage, setCurrentPage] = useState(2);

  const loaderRef = useRef(null);

  const [isIntercepting] = useNearScreen({

    externalRef: loaderRef,

    once: false,

    rootMargin: '20px'

  });

  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]);

  useEffect(() => {

    const getData = (url = '') => {

      setIsLoading(true);

      api

        .get(url)

        .then((response) => {

          const { data, success } = response.data;

          if (!success) {

            throw new Error(data);

          }

          setTotalPages(data.total.pages);

          setItems(data.current.items);

        })

        .catch((err) => console.log(err.message))

        .finally(() => setIsLoading(false));

    };

    getData(linkTimeline);

  }, [linkTimeline]);

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

      )}

    />

  );

};