From ead7c4f2276cac9604636e62f8e9664093a94c18 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Tue, 7 Apr 2020 21:02:44 +0200 Subject: [PATCH 1/9] Persist page size in local storage --- .../Data/TableBrowseRows/FilterQuery.js | 6 +-- .../Services/Data/TableBrowseRows/ViewRows.js | 10 ++++- .../Data/TableBrowseRows/localStorageUtils.js | 38 +++++++++++++++++++ 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js index cc511b6ecfba3..6ea4c0e664ef8 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js @@ -202,7 +202,7 @@ const renderSorts = (orderBy, tableSchema, dispatch) => { class FilterQuery extends Component { componentDidMount() { - const dispatch = this.props.dispatch; + const { dispatch, limit, tableSchema } = this.props; if (!this.props.urlQuery) { dispatch(setDefaultQuery(this.props.curQuery)); return; @@ -239,8 +239,8 @@ class FilterQuery extends Component { return { column, type, nulls }; }); - dispatch(setDefaultQuery({ where, order_by })); - dispatch(runQuery(this.props.tableSchema)); + dispatch(setDefaultQuery({ where, order_by, limit })); + dispatch(runQuery(tableSchema)); } setParams(query = { filters: [], sorts: [] }) { diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js index 0e1d5c7e43b98..8bfc5dc7c3f0c 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js @@ -53,6 +53,8 @@ import { getCollapsedColumns, handleOrderChange, getColumnsOrder, + getPageSize, + handlePageSizeStateChange, } from './localStorageUtils'; const ViewRows = ({ @@ -675,7 +677,12 @@ const ViewRows = ({ if ('order_by' in curFilter) { orderBy = [...curFilter.order_by]; } - const limit = 'limit' in curFilter ? curFilter.limit : 10; + + let limit = getPageSize(curTableName, currentSchema); + if (!limit) { + limit = 'limit' in curFilter ? curFilter.limit : 10; + } + const offset = 'offset' in curFilter ? curFilter.offset : 0; _filterQuery = ( @@ -923,6 +930,7 @@ const ViewRows = ({ dispatch(setOffset(0)); dispatch(runQuery(tableSchema)); setSelectedRows([]); + handlePageSizeStateChange(curTableName, currentSchema, size); } }; diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js index add3367e857d3..41e7c1063ce9b 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js @@ -140,3 +140,41 @@ export const getColumnsOrder = (tableName, schemaName) => { const orderData = getColumnsOrderState(); return orderData[`${schemaName}.${tableName}`]; }; + +const pageSizeState = 'data:pageSize'; +const defaultPageSizeState = {}; + +const setPageSizeState = data => { + window.localStorage.setItem(pageSizeState, JSON.stringify(data)); +}; + +const getPageSizeState = () => { + try { + const p = window.localStorage.getItem(pageSizeState); + if (p) { + return JSON.parse(p); + } + window.localStorage.setItem( + pageSizeState, + JSON.stringify(defaultPageSizeState) + ); + return defaultPageSizeState; + } catch (e) { + console.error(e); + return defaultPageSizeState; + } +}; + +export const handlePageSizeStateChange = (tableName, schemaName, pageSize) => { + const currentState = getPageSizeState(); + + setPageSizeState({ + ...currentState, + [`${schemaName}.${tableName}`]: pageSize, + }); +}; + +export const getPageSize = (tableName, schemaName) => { + const pageSizeData = getPageSizeState(); + return pageSizeData[`${schemaName}.${tableName}`]; +}; From 1e5eeb844ca3d8e7bfb0a222b7173c22a7537673 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Tue, 7 Apr 2020 21:14:10 +0200 Subject: [PATCH 2/9] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b430e18ed6583..9a5cca84b6a5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ ### console: persist columns state in data browser -The order and collapsed state of columns is now persisted across page navigation +The order, collapsed state of columns and page size is now persisted across page navigation (close #3390) (#3753) From a2e906c3606e234258762ef60ccff1a2e79d9831 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Tue, 7 Apr 2020 21:33:57 +0200 Subject: [PATCH 3/9] Migrate LS utils to TypeScript --- console/.eslintrc | 3 +- ...alStorageUtils.js => localStorageUtils.ts} | 91 +++++++------------ 2 files changed, 34 insertions(+), 60 deletions(-) rename console/src/components/Services/Data/TableBrowseRows/{localStorageUtils.js => localStorageUtils.ts} (63%) diff --git a/console/.eslintrc b/console/.eslintrc index 6e6e0ab251d89..190e96dceacad 100644 --- a/console/.eslintrc +++ b/console/.eslintrc @@ -148,7 +148,8 @@ "no-dupe-class-members": "off", "no-redeclare": "off", "no-useless-constructor": "off", - "no-unused-expressions": "off" + "no-unused-expressions": "off", + "no-console": "off" } } ] diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts similarity index 63% rename from console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js rename to console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index 41e7c1063ce9b..b7c03b35a2314 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.js +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -1,21 +1,14 @@ const columnsCollapsedState = 'data:collapsed'; const defaultColumnsCollapsedState = {}; -/** - * @param {{ - * [tableName: string]: {[colName: string]: boolean} - * }} data - */ -const setColumnsCollapsedState = data => { +type CollapesEntry = Record; +type CollapesState = Record; + +const setColumnsCollapsedState = (data: CollapesState) => { window.localStorage.setItem(columnsCollapsedState, JSON.stringify(data)); }; -/** - * @returns {{ - * [tableName: string]: {[colName: string]: boolean} - * }} - */ -const getColumnsCollapsedState = () => { +const getColumnsCollapsedState = (): CollapesState => { try { const p = window.localStorage.getItem(columnsCollapsedState); if (p) { @@ -32,14 +25,11 @@ const getColumnsCollapsedState = () => { } }; -/** - * @param {string} tableName - * @param {string} schemaNae - * @param {{[colName: string]: boolean}} newCollapsedData - * - * @returns {void} - */ -export const handleCollapseChange = (tableName, schemaName, collapsedData) => { +export const handleCollapseChange = ( + tableName: string, + schemaName: string, + collapsedData: CollapesEntry +) => { const currentCollapsed = getColumnsCollapsedState(); const newCollapsed = { ...currentCollapsed, @@ -49,13 +39,7 @@ export const handleCollapseChange = (tableName, schemaName, collapsedData) => { setColumnsCollapsedState(newCollapsed); }; -/** - * @param {string} tableName - * @param {string} schemaName - * - * @returns {{[colName: string]: boolean}|void} - */ -export const getCollapsedColumns = (tableName, schemaName) => { +export const getCollapsedColumns = (tableName: string, schemaName: string) => { const collapsedData = getColumnsCollapsedState(); return collapsedData[`${schemaName}.${tableName}`]; }; @@ -63,21 +47,14 @@ export const getCollapsedColumns = (tableName, schemaName) => { const columnsOrderState = 'data:order'; const defaultColumnsOrderState = {}; -/** - * @param {{ - * [tableName: string]: {newOrder: number, defaultOrder: number}[] - * }} data - */ -const setColumnsOrderState = data => { +type OrderEntry = { newOrder: number; defaultOrder: number }; +type OrderState = Record; + +const setColumnsOrderState = (data: OrderState) => { window.localStorage.setItem(columnsOrderState, JSON.stringify(data)); }; -/** - * @returns {{ - * [tableName: string]: {newOrder: number, defaultOrder: number}[] - * }} - */ -const getColumnsOrderState = () => { +const getColumnsOrderState = (): OrderState => { try { const p = window.localStorage.getItem(columnsOrderState); if (p) { @@ -94,21 +71,19 @@ const getColumnsOrderState = () => { } }; -const compareReorderItems = item1 => item2 => +const compareReorderItems = (item1: OrderEntry) => (item2: OrderEntry) => item1.newOrder === item2.newOrder && item1.defaultOrder === item2.defaultOrder; -/** - * @param {string} tableName - * @param {string} schemaName - * - * @param {{newOrder: number, defaultOrder: number}[]} orderData - */ -export const handleOrderChange = (tableName, schemaName, orderData) => { +export const handleOrderChange = ( + tableName: string, + schemaName: string, + orderData: OrderEntry[] +) => { const currentOrders = getColumnsOrderState(); // remove duplicates - const newOrders = []; + const newOrders: OrderEntry[] = []; orderData.forEach(item => { const sameElements = orderData.filter(compareReorderItems(item)); const alreadyAdded = newOrders.some(compareReorderItems(item)); @@ -130,13 +105,7 @@ export const handleOrderChange = (tableName, schemaName, orderData) => { }); }; -/** - * @param {string} tableName - * @param {string} schemaName - * - * @returns {{newOrder: number, defaultOrder: number}[]} - */ -export const getColumnsOrder = (tableName, schemaName) => { +export const getColumnsOrder = (tableName: string, schemaName: string) => { const orderData = getColumnsOrderState(); return orderData[`${schemaName}.${tableName}`]; }; @@ -144,11 +113,11 @@ export const getColumnsOrder = (tableName, schemaName) => { const pageSizeState = 'data:pageSize'; const defaultPageSizeState = {}; -const setPageSizeState = data => { +const setPageSizeState = (data: Record) => { window.localStorage.setItem(pageSizeState, JSON.stringify(data)); }; -const getPageSizeState = () => { +const getPageSizeState = (): Record => { try { const p = window.localStorage.getItem(pageSizeState); if (p) { @@ -165,7 +134,11 @@ const getPageSizeState = () => { } }; -export const handlePageSizeStateChange = (tableName, schemaName, pageSize) => { +export const handlePageSizeStateChange = ( + tableName: string, + schemaName: string, + pageSize: number +) => { const currentState = getPageSizeState(); setPageSizeState({ @@ -174,7 +147,7 @@ export const handlePageSizeStateChange = (tableName, schemaName, pageSize) => { }); }; -export const getPageSize = (tableName, schemaName) => { +export const getPageSize = (tableName: string, schemaName: string) => { const pageSizeData = getPageSizeState(); return pageSizeData[`${schemaName}.${tableName}`]; }; From 76875b162003c9d84a886f03c8d910c22ff3748c Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Wed, 8 Apr 2020 14:42:50 +0200 Subject: [PATCH 4/9] Set limit on init --- .../Services/Data/TableBrowseRows/FilterQuery.js | 2 +- .../Services/Data/TableBrowseRows/ViewActions.js | 8 ++++++-- .../components/Services/Data/TableBrowseRows/ViewTable.js | 8 +++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js index 6ea4c0e664ef8..67259ebe21ece 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js @@ -204,7 +204,7 @@ class FilterQuery extends Component { componentDidMount() { const { dispatch, limit, tableSchema } = this.props; if (!this.props.urlQuery) { - dispatch(setDefaultQuery(this.props.curQuery)); + dispatch(setDefaultQuery({ ...this.props.curQuery, limit })); return; } diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewActions.js b/console/src/components/Services/Data/TableBrowseRows/ViewActions.js index 4b10b98791440..95885c7554f68 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewActions.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewActions.js @@ -56,7 +56,7 @@ const vCollapseRow = () => ({ type: V_COLLAPSE_ROW, }); -const vSetDefaults = () => ({ type: V_SET_DEFAULTS }); +const vSetDefaults = limit => ({ type: V_SET_DEFAULTS, limit }); const vMakeRowsRequest = () => { return (dispatch, getState) => { @@ -513,7 +513,11 @@ const viewReducer = (tableName, currentSchema, schemas, viewState, action) => { ...defaultViewState, query: { columns: currentColumns, - limit: 10, + limit: action.limit || 10, + }, + curFilter: { + ...defaultViewState.curFilter, + limit: action.limit || 10, }, activePath: [tableName], rows: [], diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js index 8cb663fa2fa02..d0cd7a07b3b66 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js @@ -14,6 +14,7 @@ import ViewRows from './ViewRows'; import { NotFoundError } from '../../../Error/PageNotFound'; import { exists } from '../../../Common/utils/jsUtils'; +import { getPageSize } from './localStorageUtils'; /* const genHeadings = headings => { @@ -92,10 +93,11 @@ class ViewTable extends Component { } getInitialData(tableName) { - const { dispatch } = this.props; + const { dispatch, currentSchema } = this.props; + const limit = getPageSize(tableName, currentSchema); Promise.all([ dispatch(setTable(tableName)), - dispatch(vSetDefaults(tableName)), + dispatch(vSetDefaults(limit)), dispatch(vMakeTableRequests()), dispatch(fetchManualTriggers(tableName)), ]); @@ -123,7 +125,7 @@ class ViewTable extends Component { componentWillUnmount() { // Remove state data beloging to this table const dispatch = this.props.dispatch; - dispatch(vSetDefaults(this.props.tableName)); + dispatch(vSetDefaults()); } updateInvocationRow = row => { From 9f3802ae9206f64e44d0e18dd278763d2d6c069e Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Wed, 8 Apr 2020 19:15:26 +0200 Subject: [PATCH 5/9] store only one page limit --- .../Data/TableBrowseRows/FilterQuery.js | 6 +- .../Services/Data/TableBrowseRows/ViewRows.js | 9 +- .../Data/TableBrowseRows/localStorageUtils.ts | 108 ++++-------------- 3 files changed, 30 insertions(+), 93 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js index 67259ebe21ece..c50927f9eaa42 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js @@ -26,6 +26,7 @@ import { setDefaultQuery, runQuery, setOffset } from './FilterActions'; import Button from '../../../Common/Button/Button'; import ReloadEnumValuesButton from '../Common/Components/ReloadEnumValuesButton'; import styles from '../../../Common/FilterQuery/FilterQuery.scss'; +import { getPageSize } from './localStorageUtils'; const history = createHistory(); @@ -202,9 +203,10 @@ const renderSorts = (orderBy, tableSchema, dispatch) => { class FilterQuery extends Component { componentDidMount() { - const { dispatch, limit, tableSchema } = this.props; + const { dispatch, tableSchema, curQuery } = this.props; + const limit = getPageSize(); if (!this.props.urlQuery) { - dispatch(setDefaultQuery({ ...this.props.curQuery, limit })); + dispatch(setDefaultQuery({ ...curQuery, limit })); return; } diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js index 8bfc5dc7c3f0c..bc2d8afe6c216 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js @@ -53,7 +53,6 @@ import { getCollapsedColumns, handleOrderChange, getColumnsOrder, - getPageSize, handlePageSizeStateChange, } from './localStorageUtils'; @@ -678,11 +677,6 @@ const ViewRows = ({ orderBy = [...curFilter.order_by]; } - let limit = getPageSize(curTableName, currentSchema); - if (!limit) { - limit = 'limit' in curFilter ? curFilter.limit : 10; - } - const offset = 'offset' in curFilter ? curFilter.offset : 0; _filterQuery = ( @@ -691,7 +685,6 @@ const ViewRows = ({ whereAnd={wheres} tableSchema={tableSchema} orderBy={orderBy} - limit={limit} dispatch={dispatch} count={count} tableName={curTableName} @@ -930,7 +923,7 @@ const ViewRows = ({ dispatch(setOffset(0)); dispatch(runQuery(tableSchema)); setSelectedRows([]); - handlePageSizeStateChange(curTableName, currentSchema, size); + handlePageSizeStateChange(size); } }; diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index b7c03b35a2314..28546a4a4fbd2 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -1,76 +1,50 @@ -const columnsCollapsedState = 'data:collapsed'; -const defaultColumnsCollapsedState = {}; - -type CollapesEntry = Record; -type CollapesState = Record; - -const setColumnsCollapsedState = (data: CollapesState) => { - window.localStorage.setItem(columnsCollapsedState, JSON.stringify(data)); +const setLSState = (key: string, data: any) => { + window.localStorage.setItem(key, JSON.stringify(data)); }; -const getColumnsCollapsedState = (): CollapesState => { +const getLSState = (key: string, defaultValue = {}) => { try { - const p = window.localStorage.getItem(columnsCollapsedState); + const p = window.localStorage.getItem(key); if (p) { return JSON.parse(p); } - window.localStorage.setItem( - columnsCollapsedState, - JSON.stringify(defaultColumnsCollapsedState) - ); - return defaultColumnsCollapsedState; + setLSState(key, defaultValue); + return defaultValue; } catch (e) { console.error(e); - return defaultColumnsCollapsedState; + return defaultValue; } }; +const columnsCollapsedKey = 'data:collapsed'; + +type CollapesEntry = Record; +type CollapesState = Record; + export const handleCollapseChange = ( tableName: string, schemaName: string, collapsedData: CollapesEntry ) => { - const currentCollapsed = getColumnsCollapsedState(); + const currentCollapsed = getLSState(columnsCollapsedKey); const newCollapsed = { ...currentCollapsed, [`${schemaName}.${tableName}`]: collapsedData, }; - setColumnsCollapsedState(newCollapsed); + setLSState(columnsCollapsedKey, newCollapsed); }; export const getCollapsedColumns = (tableName: string, schemaName: string) => { - const collapsedData = getColumnsCollapsedState(); + const collapsedData = getLSState(columnsCollapsedKey) as CollapesState; return collapsedData[`${schemaName}.${tableName}`]; }; -const columnsOrderState = 'data:order'; -const defaultColumnsOrderState = {}; +const columnsOrderKey = 'data:order'; type OrderEntry = { newOrder: number; defaultOrder: number }; type OrderState = Record; -const setColumnsOrderState = (data: OrderState) => { - window.localStorage.setItem(columnsOrderState, JSON.stringify(data)); -}; - -const getColumnsOrderState = (): OrderState => { - try { - const p = window.localStorage.getItem(columnsOrderState); - if (p) { - return JSON.parse(p); - } - window.localStorage.setItem( - columnsOrderState, - JSON.stringify(defaultColumnsOrderState) - ); - return defaultColumnsOrderState; - } catch (e) { - console.error(e); - return defaultColumnsOrderState; - } -}; - const compareReorderItems = (item1: OrderEntry) => (item2: OrderEntry) => item1.newOrder === item2.newOrder && item1.defaultOrder === item2.defaultOrder; @@ -80,7 +54,7 @@ export const handleOrderChange = ( schemaName: string, orderData: OrderEntry[] ) => { - const currentOrders = getColumnsOrderState(); + const currentOrders = getLSState(columnsOrderKey); // remove duplicates const newOrders: OrderEntry[] = []; @@ -95,59 +69,27 @@ export const handleOrderChange = ( if (!newOrders.length) { delete currentOrders[`${schemaName}.${tableName}`]; - setColumnsOrderState(currentOrders); + setLSState(columnsOrderKey, currentOrders); return; } - setColumnsOrderState({ + setLSState(columnsOrderKey, { ...currentOrders, [`${schemaName}.${tableName}`]: newOrders, }); }; export const getColumnsOrder = (tableName: string, schemaName: string) => { - const orderData = getColumnsOrderState(); + const orderData = getLSState(columnsOrderKey) as OrderState; return orderData[`${schemaName}.${tableName}`]; }; -const pageSizeState = 'data:pageSize'; -const defaultPageSizeState = {}; - -const setPageSizeState = (data: Record) => { - window.localStorage.setItem(pageSizeState, JSON.stringify(data)); -}; +const pageSizeKey = 'data:pageSize'; -const getPageSizeState = (): Record => { - try { - const p = window.localStorage.getItem(pageSizeState); - if (p) { - return JSON.parse(p); - } - window.localStorage.setItem( - pageSizeState, - JSON.stringify(defaultPageSizeState) - ); - return defaultPageSizeState; - } catch (e) { - console.error(e); - return defaultPageSizeState; - } -}; - -export const handlePageSizeStateChange = ( - tableName: string, - schemaName: string, - pageSize: number -) => { - const currentState = getPageSizeState(); - - setPageSizeState({ - ...currentState, - [`${schemaName}.${tableName}`]: pageSize, - }); +export const handlePageSizeStateChange = (pageSize: number) => { + setLSState(pageSizeKey, pageSize); }; -export const getPageSize = (tableName: string, schemaName: string) => { - const pageSizeData = getPageSizeState(); - return pageSizeData[`${schemaName}.${tableName}`]; +export const getPageSize = () => { + return getLSState(pageSizeKey); }; From dedb610ccd12ffc8e9c878654456e64310c0a37e Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Thu, 9 Apr 2020 10:48:56 +0200 Subject: [PATCH 6/9] Set default page size to null --- .../Services/Data/TableBrowseRows/localStorageUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index 28546a4a4fbd2..0342044b51a99 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -2,7 +2,7 @@ const setLSState = (key: string, data: any) => { window.localStorage.setItem(key, JSON.stringify(data)); }; -const getLSState = (key: string, defaultValue = {}) => { +const getLSState = (key: string, defaultValue: null | {} = {}) => { try { const p = window.localStorage.getItem(key); if (p) { @@ -91,5 +91,5 @@ export const handlePageSizeStateChange = (pageSize: number) => { }; export const getPageSize = () => { - return getLSState(pageSizeKey); + return getLSState(pageSizeKey, null); }; From 4e5952da8d0cc381344f11f0a6c3d444eb19d424 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Thu, 9 Apr 2020 10:56:51 +0200 Subject: [PATCH 7/9] Set default only on parse error --- .../components/Services/Data/TableBrowseRows/FilterActions.js | 3 ++- .../Services/Data/TableBrowseRows/localStorageUtils.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterActions.js b/console/src/components/Services/Data/TableBrowseRows/FilterActions.js index a2cc7c39787eb..71b9ae85d1ae1 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterActions.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterActions.js @@ -133,7 +133,8 @@ const filterReducer = (state = defaultCurFilter, action) => { 'order_by' in q ? [...q.order_by, ...defaultCurFilter.order_by] : [...defaultCurFilter.order_by]; - newCurFilterQ.limit = 'limit' in q ? q.limit : defaultCurFilter.limit; + newCurFilterQ.limit = + 'limit' in q && q.limit ? q.limit : defaultCurFilter.limit; newCurFilterQ.offset = 'offset' in q ? q.offset : defaultCurFilter.offset; return newCurFilterQ; diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index 0342044b51a99..542a5b623ba04 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -8,10 +8,10 @@ const getLSState = (key: string, defaultValue: null | {} = {}) => { if (p) { return JSON.parse(p); } - setLSState(key, defaultValue); return defaultValue; } catch (e) { console.error(e); + setLSState(key, defaultValue); return defaultValue; } }; From 2d65483b96c5b225931aeaa20f48ec5f3456f861 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Mon, 13 Apr 2020 12:45:28 +0200 Subject: [PATCH 8/9] Review changes --- .../Data/TableBrowseRows/FilterActions.js | 6 +- .../Data/TableBrowseRows/FilterQuery.js | 4 +- .../Services/Data/TableBrowseRows/ViewRows.js | 27 ++++--- .../Data/TableBrowseRows/ViewTable.js | 4 +- .../Data/TableBrowseRows/localStorageUtils.ts | 71 +++++++++++-------- 5 files changed, 64 insertions(+), 48 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterActions.js b/console/src/components/Services/Data/TableBrowseRows/FilterActions.js index 71b9ae85d1ae1..f5aa7774b193d 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterActions.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterActions.js @@ -133,10 +133,8 @@ const filterReducer = (state = defaultCurFilter, action) => { 'order_by' in q ? [...q.order_by, ...defaultCurFilter.order_by] : [...defaultCurFilter.order_by]; - newCurFilterQ.limit = - 'limit' in q && q.limit ? q.limit : defaultCurFilter.limit; - newCurFilterQ.offset = - 'offset' in q ? q.offset : defaultCurFilter.offset; + newCurFilterQ.limit = q.limit || defaultCurFilter.limit; + newCurFilterQ.offset = q.offset || defaultCurFilter.offset; return newCurFilterQ; } return defaultCurFilter; diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js index c50927f9eaa42..c259cb4f9fd03 100644 --- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js +++ b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js @@ -26,7 +26,7 @@ import { setDefaultQuery, runQuery, setOffset } from './FilterActions'; import Button from '../../../Common/Button/Button'; import ReloadEnumValuesButton from '../Common/Components/ReloadEnumValuesButton'; import styles from '../../../Common/FilterQuery/FilterQuery.scss'; -import { getPageSize } from './localStorageUtils'; +import { getPersistedPageSize } from './localStorageUtils'; const history = createHistory(); @@ -204,7 +204,7 @@ const renderSorts = (orderBy, tableSchema, dispatch) => { class FilterQuery extends Component { componentDidMount() { const { dispatch, tableSchema, curQuery } = this.props; - const limit = getPageSize(); + const limit = getPersistedPageSize(); if (!this.props.urlQuery) { dispatch(setDefaultQuery({ ...curQuery, limit })); return; diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js index bc2d8afe6c216..8b3c49fee593e 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js @@ -49,11 +49,11 @@ import { } from '../../../Common/utils/pgUtils'; import { updateSchemaInfo } from '../DataActions'; import { - handleCollapseChange, - getCollapsedColumns, - handleOrderChange, - getColumnsOrder, - handlePageSizeStateChange, + persistColumnCollapseChange, + getPersistedCollapsedColumns, + persistColumnOrderChange, + getPersistedColumnsOrder, + persistPageSizeChange, } from './localStorageUtils'; const ViewRows = ({ @@ -821,8 +821,11 @@ const ViewRows = ({ ); } - const collapsedColumns = getCollapsedColumns(curTableName, currentSchema); - const columnsOrder = getColumnsOrder(curTableName, currentSchema); + const collapsedColumns = getPersistedCollapsedColumns( + curTableName, + currentSchema + ); + const columnsOrder = getPersistedColumnsOrder(curTableName, currentSchema); let disableSortColumn = false; @@ -923,7 +926,7 @@ const ViewRows = ({ dispatch(setOffset(0)); dispatch(runQuery(tableSchema)); setSelectedRows([]); - handlePageSizeStateChange(size); + persistPageSizeChange(size); } }; @@ -946,11 +949,15 @@ const ViewRows = ({ onPageSizeChange={handlePageSizeChange} page={Math.floor(curFilter.offset / curFilter.limit)} onCollapseChange={collapsedData => - handleCollapseChange(curTableName, currentSchema, collapsedData) + persistColumnCollapseChange( + curTableName, + currentSchema, + collapsedData + ) } defaultCollapsed={collapsedColumns} onOrderChange={reorderData => - handleOrderChange(curTableName, currentSchema, reorderData) + persistColumnOrderChange(curTableName, currentSchema, reorderData) } defaultReorders={columnsOrder} /> diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js index d0cd7a07b3b66..b86cbd251dccf 100644 --- a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js +++ b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js @@ -14,7 +14,7 @@ import ViewRows from './ViewRows'; import { NotFoundError } from '../../../Error/PageNotFound'; import { exists } from '../../../Common/utils/jsUtils'; -import { getPageSize } from './localStorageUtils'; +import { getPersistedPageSize } from './localStorageUtils'; /* const genHeadings = headings => { @@ -94,7 +94,7 @@ class ViewTable extends Component { getInitialData(tableName) { const { dispatch, currentSchema } = this.props; - const limit = getPageSize(tableName, currentSchema); + const limit = getPersistedPageSize(tableName, currentSchema); Promise.all([ dispatch(setTable(tableName)), dispatch(vSetDefaults(limit)), diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index 542a5b623ba04..7451349cf49e0 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -1,18 +1,19 @@ -const setLSState = (key: string, data: any) => { - window.localStorage.setItem(key, JSON.stringify(data)); +export const setLSState = (key: string, data: string) => { + window.localStorage.setItem(key, data); }; -const getLSState = (key: string, defaultValue: null | {} = {}) => { +export const getLSState = (key: string) => { + return window.localStorage.getItem(key); +}; + +export const parseLSState = (data: any) => { try { - const p = window.localStorage.getItem(key); - if (p) { - return JSON.parse(p); + if (data) { + return JSON.parse(data); } - return defaultValue; - } catch (e) { - console.error(e); - setLSState(key, defaultValue); - return defaultValue; + return null; + } catch { + return null; } }; @@ -21,22 +22,26 @@ const columnsCollapsedKey = 'data:collapsed'; type CollapesEntry = Record; type CollapesState = Record; -export const handleCollapseChange = ( +export const persistColumnCollapseChange = ( tableName: string, schemaName: string, collapsedData: CollapesEntry ) => { - const currentCollapsed = getLSState(columnsCollapsedKey); + const state = getLSState(columnsCollapsedKey); + const currentCollapsed = parseLSState(state) || {}; const newCollapsed = { ...currentCollapsed, [`${schemaName}.${tableName}`]: collapsedData, }; - setLSState(columnsCollapsedKey, newCollapsed); + setLSState(columnsCollapsedKey, JSON.stringify(newCollapsed)); }; -export const getCollapsedColumns = (tableName: string, schemaName: string) => { - const collapsedData = getLSState(columnsCollapsedKey) as CollapesState; +export const getPersistedCollapsedColumns = ( + tableName: string, + schemaName: string +) => { + const collapsedData = parseLSState(getLSState(columnsCollapsedKey)) || {}; return collapsedData[`${schemaName}.${tableName}`]; }; @@ -49,12 +54,12 @@ const compareReorderItems = (item1: OrderEntry) => (item2: OrderEntry) => item1.newOrder === item2.newOrder && item1.defaultOrder === item2.defaultOrder; -export const handleOrderChange = ( +export const persistColumnOrderChange = ( tableName: string, schemaName: string, orderData: OrderEntry[] ) => { - const currentOrders = getLSState(columnsOrderKey); + const currentOrders = parseLSState(getLSState(columnsOrderKey)) || {}; // remove duplicates const newOrders: OrderEntry[] = []; @@ -69,27 +74,33 @@ export const handleOrderChange = ( if (!newOrders.length) { delete currentOrders[`${schemaName}.${tableName}`]; - setLSState(columnsOrderKey, currentOrders); + setLSState(columnsOrderKey, JSON.stringify(currentOrders)); return; } - setLSState(columnsOrderKey, { - ...currentOrders, - [`${schemaName}.${tableName}`]: newOrders, - }); + setLSState( + columnsOrderKey, + JSON.stringify({ + ...currentOrders, + [`${schemaName}.${tableName}`]: newOrders, + }) + ); }; -export const getColumnsOrder = (tableName: string, schemaName: string) => { - const orderData = getLSState(columnsOrderKey) as OrderState; - return orderData[`${schemaName}.${tableName}`]; +export const getPersistedColumnsOrder = ( + tableName: string, + schemaName: string +) => { + const orderData = parseLSState(getLSState(columnsOrderKey)); + return orderData ? orderData[`${schemaName}.${tableName}`] : []; }; const pageSizeKey = 'data:pageSize'; -export const handlePageSizeStateChange = (pageSize: number) => { - setLSState(pageSizeKey, pageSize); +export const persistPageSizeChange = (pageSize: number) => { + setLSState(pageSizeKey, JSON.stringify(pageSize)); }; -export const getPageSize = () => { - return getLSState(pageSizeKey, null); +export const getPersistedPageSize = () => { + return parseLSState(getLSState(pageSizeKey)); }; From 7de80a962ef400f5de022ac9b468acfbd8127c03 Mon Sep 17 00:00:00 2001 From: Aleksandra Sikora Date: Mon, 13 Apr 2020 12:58:04 +0200 Subject: [PATCH 9/9] Remove redundant types --- .../Services/Data/TableBrowseRows/localStorageUtils.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts index 7451349cf49e0..052e107f5f45c 100644 --- a/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts +++ b/console/src/components/Services/Data/TableBrowseRows/localStorageUtils.ts @@ -20,7 +20,6 @@ export const parseLSState = (data: any) => { const columnsCollapsedKey = 'data:collapsed'; type CollapesEntry = Record; -type CollapesState = Record; export const persistColumnCollapseChange = ( tableName: string, @@ -48,7 +47,6 @@ export const getPersistedCollapsedColumns = ( const columnsOrderKey = 'data:order'; type OrderEntry = { newOrder: number; defaultOrder: number }; -type OrderState = Record; const compareReorderItems = (item1: OrderEntry) => (item2: OrderEntry) => item1.newOrder === item2.newOrder &&