diff --git a/lib/frontend/components/AppContainer.svelte b/lib/frontend/components/AppContainer.svelte index 4669fbc..6d1b838 100644 --- a/lib/frontend/components/AppContainer.svelte +++ b/lib/frontend/components/AppContainer.svelte @@ -4,8 +4,6 @@ import { configStore } from '../stores' $: showTrackingPanel = $configStore.track === undefined - - configStore.subscribe(console.log) {#if showTrackingPanel} diff --git a/lib/frontend/index.js b/lib/frontend/index.js index 0be492e..e532f8a 100644 --- a/lib/frontend/index.js +++ b/lib/frontend/index.js @@ -1,8 +1,12 @@ import App from './components/App.svelte' import * as stores from './stores' +import * as services from './services' const boot = () => { + + services.storageListener.register() + new App({ target: document.querySelector('#root'), }) @@ -10,6 +14,7 @@ const boot = () => { if (process.env.NODE_ENV === 'development') { window._fb2ical = { ...stores, + ...services, } } } diff --git a/lib/frontend/services/index.js b/lib/frontend/services/index.js new file mode 100644 index 0000000..d05033b --- /dev/null +++ b/lib/frontend/services/index.js @@ -0,0 +1,5 @@ +import storageListener from './storageListener' + +export { + storageListener, +} diff --git a/lib/frontend/services/storageListener.js b/lib/frontend/services/storageListener.js new file mode 100644 index 0000000..08b32f6 --- /dev/null +++ b/lib/frontend/services/storageListener.js @@ -0,0 +1,45 @@ +import { configStore } from '../stores' + +const STORAGE_KEYS = { + CONFIG: 'fb-to-ical-config', +} + +class StorageListener { + constructor() { + this._storeSubscribers = new Set() + } + + register() { + window.addEventListener('storage', this._handleStorageChange) + + const unsubscribeConfigStore = configStore.subscribe(this._handleConfigStoreChange) + + this._storeSubscribers = new Set([ + ...this._storeSubscribers, + unsubscribeConfigStore, + ]) + } + + unregister() { + window.removeEventListener('storage', this._handleStorageChange) + + this._storeSubscribers.forEach((unsubscribe) => unsubscribe()) + this._storeSubscribers.clear() + } + + _handleStorageChange(event) { + switch (event.key) { + case STORAGE_KEYS.CONFIG: + configStore.set(JSON.parse(event.newValue)) + break + default: + return + } + } + + _handleConfigStoreChange(value) { + localStorage.setItem(STORAGE_KEYS.CONFIG, JSON.stringify(value)) + } +} + +export default new StorageListener() diff --git a/lib/frontend/stores/configStore.js b/lib/frontend/stores/configStore.js index adcaace..1fca9f0 100644 --- a/lib/frontend/stores/configStore.js +++ b/lib/frontend/stores/configStore.js @@ -6,24 +6,18 @@ const createConfigStore = () => { const { subscribe, set, update } = writable(state) const setValue = (key, value) => { - update((prevState) => { - const nextState = { - ...prevState, - [key]: value, - } - - localStorage.setItem('fb-to-ical-config', JSON.stringify(nextState)) - - return nextState - }) + update((prevState) => ({ ...prevState, [key]: value })) } + const getState = () => state + return { ...state, subscribe, set, update, setValue, + getState, } }