From 19005aa6793b0b352b4e61d32d4d6b649d53fd53 Mon Sep 17 00:00:00 2001 From: vinu-deriv Date: Fri, 29 Nov 2024 08:45:01 +0400 Subject: [PATCH 1/3] fix: fixed trackJs error while setting chart-layout in localStorage --- package-lock.json | 9 +++++++++ package.json | 1 + src/store/ChartState.ts | 31 ++++++++++++++++++++----------- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index e4782cad6..9fb7af3f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "html2canvas": "^1.4.1", "lodash.debounce": "^4.0.8", "lodash.set": "^4.3.2", + "lz-string": "^1.5.0", "mobx": "^6.5.0", "mobx-react-lite": "^3.4.0", "moment": "^2.24.0", @@ -17623,6 +17624,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", diff --git a/package.json b/package.json index 5e4a862d6..86596d4b6 100644 --- a/package.json +++ b/package.json @@ -155,6 +155,7 @@ "html2canvas": "^1.4.1", "lodash.debounce": "^4.0.8", "lodash.set": "^4.3.2", + "lz-string": "^1.5.0", "mobx": "^6.5.0", "mobx-react-lite": "^3.4.0", "moment": "^2.24.0", diff --git a/src/store/ChartState.ts b/src/store/ChartState.ts index 1e8bad72a..31c387bdd 100644 --- a/src/store/ChartState.ts +++ b/src/store/ChartState.ts @@ -11,6 +11,7 @@ import { import debounce from 'lodash.debounce'; import { AuditDetailsForExpiredContract, ProposalOpenContract } from '@deriv/api-types'; import { isDeepEqual } from 'src/utils/object'; +import LZString from 'lz-string'; import MainStore from '.'; import Theme from '../../sass/_themes.scss'; import { STATE } from '../Constant'; @@ -461,16 +462,21 @@ class ChartState { const layoutData: TLayout = this.mainStore.view.getLayout(); const id = this.mainStore.chart.chartId; - saveToLocalStorage(`chart-layout-${id}`, { - studyItems: layoutData.studyItems, - crosshair: layoutData.crosshair, - msPerPx: layoutData.msPerPx, - }); + const layoutCompressedData = LZString.compress( + JSON.stringify({ + studyItems: layoutData.studyItems, + crosshair: layoutData.crosshair, + msPerPx: layoutData.msPerPx, + }) + ); + + saveToLocalStorage(`chart-layout-${id}`, layoutCompressedData); } // returns false if restoring layout fails restoreLayout() { const id = this.mainStore.chart.chartId; - const layout: TLayout = createObjectFromLocalStorage(`chart-layout-${id}`); + const compressedLayout = createObjectFromLocalStorage(`chart-layout-${id}`); + const layout: TLayout = JSON.parse(LZString.decompress(compressedLayout ?? undefined)); if (!layout) { this.clearLayout(); @@ -491,12 +497,15 @@ class ChartState { if (!this.chartStore.chartId) return; const layoutData: TLayout = this.mainStore.view.getLayout(); const id = this.mainStore.chart.chartId; + const layoutCompressedData = LZString.compress( + JSON.stringify({ + crosshair: layoutData.crosshair, + studyItems: layoutData.studyItems, + msPerPx: layoutData.msPerPx, + }) + ); - saveToLocalStorage(`chart-layout-${id}`, { - crosshair: layoutData.crosshair, - studyItems: layoutData.studyItems, - msPerPx: layoutData.msPerPx, - }); + saveToLocalStorage(`chart-layout-${id}`, layoutCompressedData); } cleanChart() { From 512cd4b1efa49619c4b541eca24fef793fa4a5f3 Mon Sep 17 00:00:00 2001 From: vinu-deriv Date: Fri, 29 Nov 2024 12:59:36 +0400 Subject: [PATCH 2/3] fix: fix text while decompressing the text --- src/store/ChartState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/ChartState.ts b/src/store/ChartState.ts index 31c387bdd..f46783685 100644 --- a/src/store/ChartState.ts +++ b/src/store/ChartState.ts @@ -476,7 +476,7 @@ class ChartState { restoreLayout() { const id = this.mainStore.chart.chartId; const compressedLayout = createObjectFromLocalStorage(`chart-layout-${id}`); - const layout: TLayout = JSON.parse(LZString.decompress(compressedLayout ?? undefined)); + const layout: TLayout = JSON.parse(LZString.decompress(compressedLayout ?? '')); if (!layout) { this.clearLayout(); From 5385847485dcb1302f8016f074831eb7fe5e20d1 Mon Sep 17 00:00:00 2001 From: vinu-deriv Date: Wed, 4 Dec 2024 15:31:21 +0400 Subject: [PATCH 3/3] fix: fix the consition if data is not compressed --- src/store/ChartState.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/store/ChartState.ts b/src/store/ChartState.ts index f46783685..8698a21c4 100644 --- a/src/store/ChartState.ts +++ b/src/store/ChartState.ts @@ -476,7 +476,12 @@ class ChartState { restoreLayout() { const id = this.mainStore.chart.chartId; const compressedLayout = createObjectFromLocalStorage(`chart-layout-${id}`); - const layout: TLayout = JSON.parse(LZString.decompress(compressedLayout ?? '')); + let layout: TLayout | null = null; + try { + layout = JSON.parse(LZString.decompress(compressedLayout ?? '')); + } catch (e) { + layout = compressedLayout; + } if (!layout) { this.clearLayout();