6206 get table page size from local storage

Updates #6206

Squashed commit of the following:

commit 03089136a749fbda7da9be1af5997a24738eabb6
Merge: 7078c449c 3ce3c41b5
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 15:25:11 2023 +0300

    Merge branch 'master' into ADG-7558

commit 7078c449cb02039b47bdd085de12145b6982ea2c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 9 19:47:58 2023 +0300

    fix default page size

commit 64569487a916797bbb42246eb935f1388626590e
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 9 19:47:22 2023 +0300

    remove unused

commit 17614fa76b5aab617b807e226f743b9fd461c247
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 9 19:30:22 2023 +0300

    ADG-7473 get table page size from local storage
This commit is contained in:
Ildar Kamalov 2023-10-11 16:17:33 +03:00
parent 3ce3c41b59
commit 6a36615629
7 changed files with 67 additions and 33 deletions

View File

@ -4,6 +4,7 @@ import ReactTable from 'react-table';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { sortIp } from '../../../helpers/helpers'; import { sortIp } from '../../../helpers/helpers';
import { MODAL_TYPE } from '../../../helpers/constants'; import { MODAL_TYPE } from '../../../helpers/constants';
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
class Table extends Component { class Table extends Component {
cellWrap = ({ value }) => ( cellWrap = ({ value }) => (
@ -85,7 +86,8 @@ class Table extends Component {
loading={processing || processingAdd || processingDelete} loading={processing || processingAdd || processingDelete}
className="-striped -highlight card-table-overflow" className="-striped -highlight card-table-overflow"
showPagination showPagination
defaultPageSize={10} defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE) || 10}
onPageSizeChange={(size) => LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE, size)}
minRows={5} minRows={5}
ofText="/" ofText="/"
previousText={t('previous_btn')} previousText={t('previous_btn')}

View File

@ -6,6 +6,7 @@ import CellWrap from '../ui/CellWrap';
import { MODAL_TYPE } from '../../helpers/constants'; import { MODAL_TYPE } from '../../helpers/constants';
import { formatDetailedDateTime } from '../../helpers/helpers'; import { formatDetailedDateTime } from '../../helpers/helpers';
import { isValidAbsolutePath } from '../../helpers/form'; import { isValidAbsolutePath } from '../../helpers/form';
import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from '../../helpers/localStorageHelper';
class Table extends Component { class Table extends Component {
getDateCell = (row) => CellWrap(row, formatDetailedDateTime); getDateCell = (row) => CellWrap(row, formatDetailedDateTime);
@ -126,12 +127,17 @@ class Table extends Component {
loading, filters, t, whitelist, loading, filters, t, whitelist,
} = this.props; } = this.props;
const localStorageKey = whitelist
? LOCAL_STORAGE_KEYS.ALLOWLIST_PAGE_SIZE
: LOCAL_STORAGE_KEYS.BLOCKLIST_PAGE_SIZE;
return ( return (
<ReactTable <ReactTable
data={filters} data={filters}
columns={this.columns} columns={this.columns}
showPagination showPagination
defaultPageSize={10} defaultPageSize={LocalStorageHelper.getItem(localStorageKey) || 10}
onPageSizeChange={(size) => LocalStorageHelper.setItem(localStorageKey, size)}
loading={loading} loading={loading}
minRows={6} minRows={6}
ofText="/" ofText="/"

View File

@ -9,6 +9,7 @@ import CellWrap from '../../ui/CellWrap';
import whoisCell from './whoisCell'; import whoisCell from './whoisCell';
import LogsSearchLink from '../../ui/LogsSearchLink'; import LogsSearchLink from '../../ui/LogsSearchLink';
import { sortIp } from '../../../helpers/helpers'; import { sortIp } from '../../../helpers/helpers';
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
const COLUMN_MIN_WIDTH = 200; const COLUMN_MIN_WIDTH = 200;
@ -85,7 +86,10 @@ class AutoClients extends Component {
]} ]}
className="-striped -highlight card-table-overflow" className="-striped -highlight card-table-overflow"
showPagination showPagination
defaultPageSize={10} defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE) || 10}
onPageSizeChange={(size) => (
LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE, size)
)}
minRows={5} minRows={5}
ofText="/" ofText="/"
previousText={t('previous_btn')} previousText={t('previous_btn')}

View File

@ -19,6 +19,7 @@ import Card from '../../../ui/Card';
import CellWrap from '../../../ui/CellWrap'; import CellWrap from '../../../ui/CellWrap';
import LogsSearchLink from '../../../ui/LogsSearchLink'; import LogsSearchLink from '../../../ui/LogsSearchLink';
import Modal from '../Modal'; import Modal from '../Modal';
import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../../helpers/localStorageHelper';
const ClientsTable = ({ const ClientsTable = ({
clients, clients,
@ -342,7 +343,10 @@ const ClientsTable = ({
]} ]}
className="-striped -highlight card-table-overflow" className="-striped -highlight card-table-overflow"
showPagination showPagination
defaultPageSize={10} defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE) || 10}
onPageSizeChange={(size) => (
LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE, size)
)}
minRows={5} minRows={5}
ofText="/" ofText="/"
previousText={t('previous_btn')} previousText={t('previous_btn')}

View File

@ -553,6 +553,4 @@ export const DISABLE_PROTECTION_TIMINGS = {
TOMORROW: 24 * 60 * 60 * 1000, TOMORROW: 24 * 60 * 60 * 1000,
}; };
export const LOCAL_STORAGE_THEME_KEY = 'account_theme';
export const LOCAL_TIMEZONE_VALUE = 'Local'; export const LOCAL_TIMEZONE_VALUE = 'Local';

View File

@ -26,8 +26,8 @@ import {
STANDARD_WEB_PORT, STANDARD_WEB_PORT,
SPECIAL_FILTER_ID, SPECIAL_FILTER_ID,
THEMES, THEMES,
LOCAL_STORAGE_THEME_KEY,
} from './constants'; } from './constants';
import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from './localStorageHelper';
/** /**
* @param time {string} The time to format * @param time {string} The time to format
@ -680,37 +680,13 @@ export const setHtmlLangAttr = (language) => {
window.document.documentElement.lang = language; window.document.documentElement.lang = language;
}; };
/**
* Set local storage field
*
* @param {string} key
* @param {string} value
*/
export const setStorageItem = (key, value) => {
if (window.localStorage) {
window.localStorage.setItem(key, value);
}
};
/**
* Get local storage field
*
* @param {string} key
*/
export const getStorageItem = (key) => (window.localStorage
? window.localStorage.getItem(key)
: null);
/** /**
* Set local storage theme field * Set local storage theme field
* *
* @param {string} theme * @param {string} theme
*/ */
export const setTheme = (theme) => { export const setTheme = (theme) => {
setStorageItem(LOCAL_STORAGE_THEME_KEY, theme); LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.THEME, theme);
}; };
/** /**
@ -719,7 +695,7 @@ export const setTheme = (theme) => {
* @returns {string} * @returns {string}
*/ */
export const getTheme = () => getStorageItem(LOCAL_STORAGE_THEME_KEY) || THEMES.light; export const getTheme = () => LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.THEME) || THEMES.light;
/** /**
* Sets UI theme. * Sets UI theme.

View File

@ -0,0 +1,44 @@
export const LOCAL_STORAGE_KEYS = {
THEME: 'account_theme',
BLOCKLIST_PAGE_SIZE: 'blocklist_page_size',
ALLOWLIST_PAGE_SIZE: 'allowlist_page_size',
CLIENTS_PAGE_SIZE: 'clients_page_size',
REWRITES_PAGE_SIZE: 'rewrites_page_size',
AUTO_CLIENTS_PAGE_SIZE: 'auto_clients_page_size',
};
export const LocalStorageHelper = {
setItem(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error(`Error setting ${key} in local storage: ${error.message}`);
}
},
getItem(key) {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
} catch (error) {
console.error(`Error getting ${key} from local storage: ${error.message}`);
return null;
}
},
removeItem(key) {
try {
localStorage.removeItem(key);
} catch (error) {
console.error(`Error removing ${key} from local storage: ${error.message}`);
}
},
clear() {
try {
localStorage.clear();
} catch (error) {
console.error(`Error clearing local storage: ${error.message}`);
}
},
};