Created
August 20, 2019 14:56
-
-
Save lostpebble/be0ed70f07fa30e45fc47986dfbfa635 to your computer and use it in GitHub Desktop.
One way to create a local storage solution with Pullstate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Store } from "pullstate"; | |
import { LocalStorage } from "@gt/gt-frontend/build/localStorage/LocalStorage"; | |
import { get, pick, set } from "lodash"; | |
interface IStoreWithValues<S> { | |
key: string; | |
store: Store<S>; | |
values?: Array<keyof S>; | |
deepValues?: string[]; | |
} | |
export class StoreLocalStorage { | |
storesWithValues: Required<IStoreWithValues<any>>[] = []; | |
namespace: string; | |
constructor(namespace: string = "store-local-storage") { | |
this.namespace = namespace; | |
} | |
addStore<S>({ key, store, values = [], deepValues = [] }: IStoreWithValues<S>) { | |
this.storesWithValues.push({ | |
key, | |
store, | |
values, | |
deepValues, | |
}); | |
} | |
async initiateLocalStorageValues() { | |
for (const SV of this.storesWithValues) { | |
const localStorageValue = await LocalStorage.get(`${this.namespace}_${SV.key}`); | |
const foundLocal = JSON.parse(localStorageValue != null ? localStorageValue : "{}"); | |
let foundDeepValues: any = {}; | |
if (SV.deepValues.length > 0) { | |
const localStorageDeepValue = await LocalStorage.get(`${this.namespace}_${SV.key}_deep`); | |
foundDeepValues = JSON.parse(localStorageDeepValue != null ? localStorageDeepValue : "{}"); | |
} | |
SV.store.update(s => { | |
for (const [key, value] of Object.entries(foundLocal)) { | |
s[key] = value; | |
} | |
for (const deepValPath of SV.deepValues) { | |
if (foundDeepValues.hasOwnProperty(deepValPath)) { | |
set(s, deepValPath, foundDeepValues[deepValPath]); | |
} | |
} | |
}); | |
SV.store.subscribe( | |
s => pick(s, SV.values), | |
keepLocal => { | |
LocalStorage.set(`${this.namespace}_${SV.key}`, JSON.stringify(keepLocal)); | |
} | |
); | |
if (SV.deepValues.length > 0) { | |
SV.store.subscribe( | |
s => { | |
const resp: any = {}; | |
for (const deepValPath of SV.deepValues) { | |
resp[deepValPath] = get(s, deepValPath); | |
} | |
return resp; | |
}, | |
keepLocal => { | |
LocalStorage.set(`${this.namespace}_${SV.key}_deep`, JSON.stringify(keepLocal)); | |
} | |
); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
And then you need to wait for it to pull the values from local storage before doing the first render: