diff --git a/client/src/components/Filters/Rewrites/Table.js b/client/src/components/Filters/Rewrites/Table.js index 2050e106..667f0e51 100644 --- a/client/src/components/Filters/Rewrites/Table.js +++ b/client/src/components/Filters/Rewrites/Table.js @@ -4,6 +4,7 @@ import ReactTable from 'react-table'; import { withTranslation } from 'react-i18next'; import { sortIp } from '../../../helpers/helpers'; import { MODAL_TYPE } from '../../../helpers/constants'; +import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper'; class Table extends Component { cellWrap = ({ value }) => ( @@ -85,7 +86,8 @@ class Table extends Component { loading={processing || processingAdd || processingDelete} className="-striped -highlight card-table-overflow" 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} ofText="/" previousText={t('previous_btn')} diff --git a/client/src/components/Filters/Table.js b/client/src/components/Filters/Table.js index 9ea1d348..e5b3cafb 100644 --- a/client/src/components/Filters/Table.js +++ b/client/src/components/Filters/Table.js @@ -6,6 +6,7 @@ import CellWrap from '../ui/CellWrap'; import { MODAL_TYPE } from '../../helpers/constants'; import { formatDetailedDateTime } from '../../helpers/helpers'; import { isValidAbsolutePath } from '../../helpers/form'; +import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from '../../helpers/localStorageHelper'; class Table extends Component { getDateCell = (row) => CellWrap(row, formatDetailedDateTime); @@ -126,12 +127,17 @@ class Table extends Component { loading, filters, t, whitelist, } = this.props; + const localStorageKey = whitelist + ? LOCAL_STORAGE_KEYS.ALLOWLIST_PAGE_SIZE + : LOCAL_STORAGE_KEYS.BLOCKLIST_PAGE_SIZE; + return ( LocalStorageHelper.setItem(localStorageKey, size)} loading={loading} minRows={6} ofText="/" diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js index f4f5d502..192af1f6 100644 --- a/client/src/components/Settings/Clients/AutoClients.js +++ b/client/src/components/Settings/Clients/AutoClients.js @@ -9,6 +9,7 @@ import CellWrap from '../../ui/CellWrap'; import whoisCell from './whoisCell'; import LogsSearchLink from '../../ui/LogsSearchLink'; import { sortIp } from '../../../helpers/helpers'; +import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper'; const COLUMN_MIN_WIDTH = 200; @@ -85,7 +86,10 @@ class AutoClients extends Component { ]} className="-striped -highlight card-table-overflow" 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} ofText="/" previousText={t('previous_btn')} diff --git a/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js index 96f835c3..19f57616 100644 --- a/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js +++ b/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js @@ -19,6 +19,7 @@ import Card from '../../../ui/Card'; import CellWrap from '../../../ui/CellWrap'; import LogsSearchLink from '../../../ui/LogsSearchLink'; import Modal from '../Modal'; +import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../../helpers/localStorageHelper'; const ClientsTable = ({ clients, @@ -342,7 +343,10 @@ const ClientsTable = ({ ]} className="-striped -highlight card-table-overflow" 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} ofText="/" previousText={t('previous_btn')} diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index ab8b2f93..1f72fc51 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -553,6 +553,4 @@ export const DISABLE_PROTECTION_TIMINGS = { TOMORROW: 24 * 60 * 60 * 1000, }; -export const LOCAL_STORAGE_THEME_KEY = 'account_theme'; - export const LOCAL_TIMEZONE_VALUE = 'Local'; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index c30326a7..3e4b99c5 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -26,8 +26,8 @@ import { STANDARD_WEB_PORT, SPECIAL_FILTER_ID, THEMES, - LOCAL_STORAGE_THEME_KEY, } from './constants'; +import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from './localStorageHelper'; /** * @param time {string} The time to format @@ -680,37 +680,13 @@ export const setHtmlLangAttr = (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 * * @param {string} 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} */ -export const getTheme = () => getStorageItem(LOCAL_STORAGE_THEME_KEY) || THEMES.light; +export const getTheme = () => LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.THEME) || THEMES.light; /** * Sets UI theme. diff --git a/client/src/helpers/localStorageHelper.js b/client/src/helpers/localStorageHelper.js new file mode 100644 index 00000000..d4e62383 --- /dev/null +++ b/client/src/helpers/localStorageHelper.js @@ -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}`); + } + }, +};