AdGuardHome/client/src/components/Logs/InfiniteTable.js

import React, {
    useCallback,
    useEffect,
    useRef,
} from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import propTypes from 'prop-types';
import throttle from 'lodash/throttle';
import Loading from '../ui/Loading';
import Header from './Cells/Header';
import { getLogs } from '../../actions/queryLogs';
import Row from './Cells';
import { isScrolledIntoView } from '../../helpers/helpers';
import { QUERY_LOGS_PAGE_LIMIT } from '../../helpers/constants';

const InfiniteTable = ({
    isLoading,
    items,
    isSmallScreen,
    setDetailedDataCurrent,
    setButtonType,
    setModalOpened,
}) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const loader = useRef(null);

    const {
        isEntireLog,
        processingGetLogs,
    } = useSelector((state) => state.queryLogs, shallowEqual);

    const loading = isLoading || processingGetLogs;

    const listener = useCallback(() => {
        if (loader.current && isScrolledIntoView(loader.current)) {
            dispatch(getLogs());
        }
    }, [loader.current, isScrolledIntoView, getLogs]);

    useEffect(() => {
        listener();
    }, [items.length < QUERY_LOGS_PAGE_LIMIT]);

    useEffect(() => {
        const THROTTLE_TIME = 100;
        const throttledListener = throttle(listener, THROTTLE_TIME);

        window.addEventListener('scroll', throttledListener);
        return () => {
            window.removeEventListener('scroll', throttledListener);
        };
    }, []);

    const renderRow = (row, idx) => <Row
                    key={idx}
                    rowProps={row}
                    isSmallScreen={isSmallScreen}
                    setDetailedDataCurrent={setDetailedDataCurrent}
                    setButtonType={setButtonType}
                    setModalOpened={setModalOpened}
            />;

    const isNothingFound = items.length === 0 && !processingGetLogs;

    return <div className='logs__table' role='grid'>
        {loading && <Loading />}
        <Header />
        {isNothingFound
            ? <label className="logs__no-data">{t('nothing_found')}</label>
            : <>{items.map(renderRow)}
                    {!isEntireLog && <div ref={loader} className="logs__loading text-center">{t('loading_table_status')}</div>}
            </>}
    </div>;
};

InfiniteTable.propTypes = {
    isLoading: propTypes.bool.isRequired,
    items: propTypes.array.isRequired,
    isSmallScreen: propTypes.bool.isRequired,
    setDetailedDataCurrent: propTypes.func.isRequired,
    setButtonType: propTypes.func.isRequired,
    setModalOpened: propTypes.func.isRequired,
};

export default InfiniteTable;