6206 get table page size from local storage

Updates AdguardTeam#6206

Squashed commit of the following:

commit 0308913
Merge: 7078c44 3ce3c41
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Oct 11 15:25:11 2023 +0300

    Merge branch 'master' into ADG-7558

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

    fix default page size

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

    remove unused

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

    ADG-7473 get table page size from local storage

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')}

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 (
             <ReactTable
                 data={filters}
                 columns={this.columns}
                 showPagination
-                defaultPageSize={10}
+                defaultPageSize={LocalStorageHelper.getItem(localStorageKey) || 10}
+                onPageSizeChange={(size) => LocalStorageHelper.setItem(localStorageKey, size)}
                 loading={loading}
                 minRows={6}
                 ofText="/"

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')}

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')}

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';

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.

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}`);
+        }
+    },
+};