From 3390cccbf35eb8c1499c1f6a4f95acab1bf949e1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 16 May 2021 01:34:39 +0530 Subject: [PATCH] Persist stores --- package.json | 1 + src/global.d.ts | 2 +- src/lib/History/history.ts | 21 +++++++++++++++++---- src/lib/History/index.svelte | 6 +++--- src/lib/Util/state.ts | 8 ++++---- yarn.lock | 18 ++++++++++++++++++ 6 files changed, 44 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 1108933a..9bafd925 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "dependencies": { "@fontsource/fira-mono": "^4.2.2", "@lukeed/uuid": "^2.0.0", + "@macfja/svelte-persistent-store": "^1.1.0", "@tailwindcss/forms": "^0.3.2", "cookie": "^0.4.1", "js-base64": "^3.6.0", diff --git a/src/global.d.ts b/src/global.d.ts index 49def610..a5566b94 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -26,7 +26,7 @@ interface State { interface HistoryEntry { state: State; - time: Date; + time: number; name: string; auto: boolean; } diff --git a/src/lib/History/history.ts b/src/lib/History/history.ts index 368c3dc1..2222f520 100644 --- a/src/lib/History/history.ts +++ b/src/lib/History/history.ts @@ -1,10 +1,23 @@ import { derived, Readable, Writable, writable, get } from 'svelte/store'; +import { persist, localStorage } from '@macfja/svelte-persistent-store'; const MAX_AUTO_HISTORY_LENGTH = 10; -export const autoHistoryMode: Writable = writable(true); -const autoHistoryStore: Writable = writable([]); -const manualHistoryStore: Writable = writable([]); +export const autoHistoryMode: Writable = persist( + writable(true), + localStorage(), + 'autoHistoryMode' +); +const autoHistoryStore: Writable = persist( + writable([]), + localStorage(), + 'autoHistoryStore' +); +const manualHistoryStore: Writable = persist( + writable([]), + localStorage(), + 'manualHistoryStore' +); export const historyStore: Readable = derived( [autoHistoryMode, autoHistoryStore, manualHistoryStore], ([autoMode, autoHistories, manualHistories], set) => { @@ -24,7 +37,7 @@ export const addHistoryEntry = (entry: HistoryEntry): void => { }); }; -export const clearHistoryData = (time?: Date): void => { +export const clearHistoryData = (time?: number): void => { (get(autoHistoryMode) ? autoHistoryStore : manualHistoryStore).update((entries) => entries.filter((entry) => time && entry.time != time) ); diff --git a/src/lib/History/index.svelte b/src/lib/History/index.svelte index 0f7eb21c..f1160d2b 100644 --- a/src/lib/History/index.svelte +++ b/src/lib/History/index.svelte @@ -34,7 +34,7 @@ if (previousState !== currentState) { addHistoryEntry({ state: $codeStore, - time: new Date(), + time: Date.now(), name: 'test', auto }); @@ -43,7 +43,7 @@ } }; - const clearHistory = (date?: Date): void => { + const clearHistory = (date?: number): void => { if (!date && !prompt('Clear all saved items?')) { return; } @@ -78,7 +78,7 @@
    {#each $historyStore as { state, time, name }}
  • - {time} + {new Date(time)} {name} diff --git a/src/lib/Util/state.ts b/src/lib/Util/state.ts index dbf4d9df..72128433 100644 --- a/src/lib/Util/state.ts +++ b/src/lib/Util/state.ts @@ -1,5 +1,6 @@ import { writable, get } from 'svelte/store'; import { encode, decode } from 'js-base64'; +import { persist, localStorage } from '@macfja/svelte-persistent-store'; const defaultState: State = { code: `graph TD @@ -17,20 +18,19 @@ const defaultState: State = { updateDiagram: true }; -export const codeStore = writable(defaultState); +export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); export const loadState = (data: string): void => { let state: State; - // debugger; try { const stateStr = decode(data); console.log('state from url', stateStr); state = JSON.parse(stateStr); } catch (e) { console.error('Init error', e); - state = defaultState; + state = get(codeStore); } - codeStore.set({ ...state, updateEditor: true }); + updateCodeStore({ ...state, updateEditor: true }); }; export const updateCodeStore = (newState: State): void => { diff --git a/yarn.lock b/yarn.lock index 01d76f3a..2959d1b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -74,6 +74,14 @@ dependencies: "@lukeed/csprng" "^1.0.0" +"@macfja/svelte-persistent-store@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@macfja/svelte-persistent-store/-/svelte-persistent-store-1.1.0.tgz#9652f89f59c7a275073622718c5e9d58d4435f0a" + integrity sha512-wbx1VR6GTBc0uH9YQZc3vcvhaQdNDK6T3xGr9c/2VJng4B0hoOhOwO9HVoS15WuRu51aLHS/uTjjr26eTtba1g== + dependencies: + idb-keyval "^5.0.4" + js-cookies "^1.0.4" + "@nodelib/fs.scandir@2.1.4": version "2.1.4" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69" @@ -1475,6 +1483,11 @@ iconv-lite@0.4: dependencies: safer-buffer ">= 2.1.2 < 3" +idb-keyval@^5.0.4: + version "5.0.5" + resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.0.5.tgz#1b02984dcf42ad4aa290bf9f10935b485419df34" + integrity sha512-cqi65rrjhgPExI9vmSU7VcYEbHCUfIBY+9YUWxyr0PyGizptFgGFnvZQ0w+tqOXk1lUcGCZGVLfabf7QnR2S0g== + ignore@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" @@ -1630,6 +1643,11 @@ js-base64@^3.6.0: resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.0.tgz#773e1de628f4f298d65a7e9842c50244751f5756" integrity sha512-wVdUBYQeY2gY73RIlPrysvpYx+2vheGo8Y1SNQv/BzHToWpAZzJU7Z6uheKMAe+GLSBig5/Ps2nxg/8tRB73xg== +js-cookies@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/js-cookies/-/js-cookies-1.0.4.tgz#d46e576c420ff6d5542c0f52b6d4ef7d637e754e" + integrity sha1-1G5XbEIP9tVULA9SttTvfWN+dU4= + js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"