Proyectos de Subversion LeadersLinked - SPA

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

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

import Spinner from 'components/UI/Spinner';
import EmptySection from 'components/UI/EmptySection';
import DetailTag from 'components/micro-learning/DetailTag';

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

      axios
        .get(`${url}?page=${currentPage}`)
        .then((response) => {
          const { data, success } = response.data;

          if (!success) {
            throw new Error(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);

      axios
        .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);

  if (!items.length) {
    return <EmptySection message={labels.datatable_szerorecords} />;
  }

  return (
    <>
      {items.map(({ activity, added_on }, i) => (
        <DetailTag key={i} title={activity} label={added_on} />
      ))}
    </>
  );
};

export default TimelinePage;