Fix pagination

eoghan2t9 · Jun 17, 2020 · 2ebdd6a · 2ebdd6a
1 parent 5820c92
commit 2ebdd6a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 44 deletions.
diff --git a/AGHTechDoc.md b/AGHTechDoc.md
@@ -1236,7 +1236,7 @@ Request:
 	&search=...
 	&response_status="..."
 
-`older_than` setting is used for paging.  UI uses an empty value for `older_than` on the first request and gets the latest log entries.  To get the older entries, UI sets `older_than` to the `oldest` value from the server's response.
+`older_than` setting is used for paging.  UI uses an empty value for `older_than` on the first request and gets the latest log entries. To get the older entries, UI sets `older_than` to the `oldest` value from the server's response.
 
 If search settings are set, server returns only entries that match the specified request.
 

diff --git a/client/src/components/Logs/Cells/getDomainCell.js b/client/src/components/Logs/Cells/getDomainCell.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { nanoid } from 'nanoid';
 import getHintElement from './getHintElement';
 import {
     DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
@@ -62,19 +61,17 @@ const getDomainCell = (props) => {
         source_label: source && <a href={`//${source}`} className="link--green">{source}</a>,
     };
 
-    const renderGrid = (content) => {
+    const renderGrid = (content, idx) => {
         const preparedContent = typeof content === 'string' ? t(content) : content;
         const className = classNames('text-truncate key-colon o-hidden', {
             'word-break--break-all white-space--normal': preparedContent.length > 100,
         });
-        return <div key={nanoid()} className={className}>{preparedContent}</div>;
+        return <div key={idx} className={className}>{preparedContent}</div>;
     };
 
     const getGrid = (contentObj, title, className) => [
-        <div key={title}
-             className={classNames('pb-2 grid--title', className)}>{t(title)}</div>,
-        <div key={nanoid()}
-             className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
+        <div key={title} className={classNames('pb-2 grid--title', className)}>{t(title)}</div>,
+        <div key={`${title}-1`} className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
     ];
 
     const requestDetails = getGrid(requestDetailsObj, 'request_details');

diff --git a/client/src/components/Logs/Table.js b/client/src/components/Logs/Table.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation, Trans } from 'react-i18next';
 import ReactTable from 'react-table';
@@ -11,7 +11,6 @@ import {
     LONG_TIME_FORMAT,
     FILTERED_STATUS_TO_META_MAP,
     TABLE_DEFAULT_PAGE_SIZE,
-    TRANSITION_TIMEOUT,
     SCHEME_TO_PROTOCOL_MAP,
 } from '../../helpers/constants';
 import getDateCell from './Cells/getDateCell';
@@ -49,10 +48,6 @@ const Table = (props) => {
 
     const [t] = useTranslation();
 
-    useEffect(() => {
-        setTimeout(() => setIsLoading(false), TRANSITION_TIMEOUT);
-    }, [page]);
-
     const toggleBlocking = (type, domain) => {
         const {
             setRules, getFilteringStatus, addSuccessToast,
@@ -186,23 +181,21 @@ const Table = (props) => {
         },
     ];
 
-    const fetchData = (state) => {
-        const { pages } = state;
-        const { oldest, page, getLogs } = props;
+    const changePage = async (page) => {
+        setIsLoading(true);
+
+        const { oldest, getLogs, pages } = props;
         const isLastPage = pages && (page + 1 === pages);
 
-        if (isLastPage) {
-            getLogs(oldest, page);
-        }
-    };
+        await Promise.all([
+            setLogsPage(page),
+            setLogsPagination({
+                page,
+                pageSize: TABLE_DEFAULT_PAGE_SIZE,
+            }),
+        ].concat(isLastPage ? getLogs(oldest, page) : []));
 
-    const changePage = (page) => {
-        setIsLoading(true);
-        setLogsPage(page);
-        setLogsPagination({
-            page,
-            pageSize: TABLE_DEFAULT_PAGE_SIZE,
-        });
+        setIsLoading(false);
     };
 
     const tableClass = classNames('logs__table', {
@@ -219,19 +212,19 @@ const Table = (props) => {
             filterable={false}
             sortable={false}
             resizable={false}
-            data={logs || []}
+            data={logs}
             loading={isLoading}
             showPageJump={false}
             showPageSizeOptions={false}
-            onFetchData={fetchData}
             onPageChange={changePage}
             className={tableClass}
             defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
             loadingText={
                 <>
                     <Loading />
                     <h6 className="loading__text">{t('loading_table_status')}</h6>
-                </>}
+                </>
+            }
             getLoadingProps={() => ({ className: 'loading__container' })}
             rowsText={t('rows_table_footer_text')}
             noDataText={!processingGetLogs

diff --git a/client/src/components/Logs/Tooltip/CustomTooltip.js b/client/src/components/Logs/Tooltip/CustomTooltip.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { nanoid } from 'nanoid';
 import { Trans } from 'react-i18next';
 import classNames from 'classnames';
 import Tooltip from './index';
@@ -9,7 +8,7 @@ const CustomTooltip = ({
     id, title, className, contentItemClass, place = 'right', columnClass = '', content, trigger, overridePosition, scrollHide,
     renderContent = React.Children.map(
         content,
-        (item) => <div key={nanoid()} className={contentItemClass}>
+        (item, idx) => <div key={idx} className={contentItemClass}>
             <Trans>{item || '—'}</Trans>
         </div>,
     ),

diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
@@ -2,13 +2,11 @@ import React, { Fragment, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Trans } from 'react-i18next';
 import Modal from 'react-modal';
-import { nanoid } from 'nanoid';
 import { useDispatch } from 'react-redux';
 import {
     BLOCK_ACTIONS, smallScreenSize,
     TABLE_DEFAULT_PAGE_SIZE,
     TABLE_FIRST_PAGE,
-    TRANSITION_TIMEOUT,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
@@ -39,7 +37,7 @@ export const processContent = (data, buttonType) => Object.entries(data)
             keyClass = '';
         }
 
-        return isHidden ? null : <Fragment key={nanoid()}>
+        return isHidden ? null : <Fragment key={key}>
             <div
                 className={`key__${key} ${keyClass} ${(isBoolean && value === true) ? 'font-weight-bold' : ''}`}>
                 <Trans>{isButton ? value : key}</Trans>
@@ -57,7 +55,7 @@ const Logs = (props) => {
     const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
     const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
     const [isModalOpened, setModalOpened] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
 
     const {
         filtering,
@@ -110,11 +108,13 @@ const Logs = (props) => {
 
     useEffect(() => {
         (async () => {
+            setIsLoading(true);
             dispatch(setLogsPage(TABLE_FIRST_PAGE));
             dispatch(getFilteringStatus());
             dispatch(getClients());
             try {
-                await Promise.all([getLogs(...INITIAL_REQUEST_DATA),
+                await Promise.all([
+                    getLogs(...INITIAL_REQUEST_DATA),
                     dispatch(getLogsConfig()),
                     dispatch(getDnsConfig()),
                 ]);
@@ -125,11 +125,14 @@ const Logs = (props) => {
             }
         })();
     }, []);
-    const refreshLogs = () => {
+
+    const refreshLogs = async () => {
         setIsLoading(true);
-        dispatch(setLogsPage(TABLE_FIRST_PAGE));
-        getLogs(...INITIAL_REQUEST_DATA);
-        setTimeout(() => setIsLoading(false), TRANSITION_TIMEOUT);
+        await Promise.all([
+            dispatch(setLogsPage(TABLE_FIRST_PAGE)),
+            getLogs(...INITIAL_REQUEST_DATA),
+        ]);
+        setIsLoading(false);
     };
 
     return (

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -54,7 +54,6 @@ export const EMPTY_DATE = '0001-01-01T00:00:00Z';
 
 export const DEBOUNCE_TIMEOUT = 300;
 export const DEBOUNCE_FILTER_TIMEOUT = 500;
-export const TRANSITION_TIMEOUT = 250;
 export const CHECK_TIMEOUT = 1000;
 export const SUCCESS_TOAST_TIMEOUT = 5000;
 export const FAILURE_TOAST_TIMEOUT = 30000;
@@ -332,7 +331,7 @@ export const DEFAULT_LOGS_FILTER = {
 
 export const DEFAULT_LANGUAGE = 'en';
 
-export const TABLE_DEFAULT_PAGE_SIZE = 100;
+export const TABLE_DEFAULT_PAGE_SIZE = 50;
 
 export const TABLE_FIRST_PAGE = 0;