From 736cf3606801760f5bdaa132b37d1c596a306735 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Sun, 9 Jun 2024 18:04:26 +1000 Subject: [PATCH] refactor: reduce browser storage dependence, remove unused code --- src/SEQTA.ts | 3 +-- src/seqta/ui/themes/UpdateThemePreview.ts | 4 ++-- src/seqta/ui/themes/deleteTheme.ts | 4 ++-- src/seqta/ui/themes/disableTheme.ts | 17 +++++++++-------- src/seqta/ui/themes/enableCurrent.ts | 7 +++---- src/seqta/ui/themes/getAvailableThemes.ts | 7 ++----- src/seqta/ui/themes/removeTheme.ts | 11 ++++------- src/seqta/ui/themes/setTheme.ts | 20 ++++++++------------ src/seqta/utils/listeners/SettingsState.ts | 22 ++++++++++++++++++++++ 9 files changed, 53 insertions(+), 42 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index bd5d07bf..1ed82248 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -33,7 +33,6 @@ declare global { } } -export let isChrome = window.chrome let SettingsClicked = false export let MenuOptionsOpen = false let currentSelectedDate = new Date() @@ -283,7 +282,7 @@ export function OpenWhatsNewPopup() { } ) - browser.storage.local.remove(['justupdated']) + delete settingsState.justupdated bkelement!.addEventListener('click', function (event) { // Check if the click event originated from the element itself and not any of its children diff --git a/src/seqta/ui/themes/UpdateThemePreview.ts b/src/seqta/ui/themes/UpdateThemePreview.ts index 2ccf4cfa..b968a32d 100644 --- a/src/seqta/ui/themes/UpdateThemePreview.ts +++ b/src/seqta/ui/themes/UpdateThemePreview.ts @@ -1,6 +1,6 @@ -import browser from 'webextension-polyfill'; import { CustomThemeBase64 } from '../../../interface/types/CustomThemes'; import { imageData, removeImageFromDocument, UpdateImageData, applyCustomCSS } from './Themes'; +import { settingsState } from '../../utils/listeners/SettingsState'; export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit & { CustomImages: Omit[] } */) => { @@ -52,6 +52,6 @@ export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit // Apply default color if (defaultColour !== '') { - browser.storage.local.set({ selectedColor: defaultColour }); + settingsState.selectedColor = defaultColour } }; diff --git a/src/seqta/ui/themes/deleteTheme.ts b/src/seqta/ui/themes/deleteTheme.ts index 2c44fcfd..75e4c6a4 100644 --- a/src/seqta/ui/themes/deleteTheme.ts +++ b/src/seqta/ui/themes/deleteTheme.ts @@ -1,7 +1,7 @@ -import browser from 'webextension-polyfill'; import localforage from 'localforage'; import { CustomTheme } from '../../../interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; +import { settingsState } from '../../utils/listeners/SettingsState'; export const deleteTheme = async (themeId: string) => { @@ -16,7 +16,7 @@ export const deleteTheme = async (themeId: string) => { await localforage.setItem('customThemes', updatedThemeIds); } - await browser.storage.local.set({ selectedTheme: '' }); + settingsState.selectedTheme = '' } catch (error) { console.error('Error deleting theme:', error); } diff --git a/src/seqta/ui/themes/disableTheme.ts b/src/seqta/ui/themes/disableTheme.ts index 0576c391..ea77d5dc 100644 --- a/src/seqta/ui/themes/disableTheme.ts +++ b/src/seqta/ui/themes/disableTheme.ts @@ -1,32 +1,33 @@ -import browser from 'webextension-polyfill'; import localforage from 'localforage'; import { CustomTheme } from '../../../interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { Mutex } from '../../utils/mutex'; +import { settingsState } from '../../utils/listeners/SettingsState'; const mutex = new Mutex(); let isDisabling = false; export const disableTheme = async () => { + console.log('Disabling theme', isDisabling) if (isDisabling) return; - const { selectedTheme } = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; }; - if (!selectedTheme || selectedTheme === '') { + if (!settingsState.selectedTheme || settingsState.selectedTheme === '') { + console.log('Theme is already disabled, exit early') // Theme is already disabled, exit early return; } isDisabling = true; const unlock = await mutex.lock(); try { - await browser.storage.local.set({ selectedTheme: '' }); - - if (selectedTheme) { - const theme = await localforage.getItem(selectedTheme) as CustomTheme; + if (settingsState.selectedTheme) { + console.log('Disabling theme:', settingsState.selectedTheme); + const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme; if (theme) { await removeTheme(theme); } } - await browser.storage.local.set({ selectedTheme: '' }); + + settingsState.selectedTheme = '' } catch (error) { console.error('Error disabling theme:', error); } finally { diff --git a/src/seqta/ui/themes/enableCurrent.ts b/src/seqta/ui/themes/enableCurrent.ts index ead51e20..4ce9e82d 100644 --- a/src/seqta/ui/themes/enableCurrent.ts +++ b/src/seqta/ui/themes/enableCurrent.ts @@ -1,13 +1,12 @@ -import browser from 'webextension-polyfill'; import localforage from 'localforage'; import { CustomTheme } from '../../../interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; +import { settingsState } from '../../utils/listeners/SettingsState'; export const enableCurrentTheme = async () => { - const { selectedTheme } = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; }; - if (selectedTheme) { - const theme = await localforage.getItem(selectedTheme) as CustomTheme; + if (settingsState.selectedTheme) { + const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme; if (theme) { await applyTheme(theme); } diff --git a/src/seqta/ui/themes/getAvailableThemes.ts b/src/seqta/ui/themes/getAvailableThemes.ts index ae5680ef..a587fa57 100644 --- a/src/seqta/ui/themes/getAvailableThemes.ts +++ b/src/seqta/ui/themes/getAvailableThemes.ts @@ -1,8 +1,7 @@ -import browser from 'webextension-polyfill'; import localforage from 'localforage'; import { CustomTheme, ThemeList } from '../../../interface/types/CustomThemes'; import { blobToBase64 } from '../../utils/blobToBase64'; - +import { settingsState } from '../../utils/listeners/SettingsState'; export const getAvailableThemes = async (): Promise => { try { @@ -19,9 +18,7 @@ export const getAvailableThemes = async (): Promise => { }) ); - const selectedTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; }; - - return { themes, selectedTheme: selectedTheme.selectedTheme ? selectedTheme.selectedTheme : '' }; + return { themes, selectedTheme: settingsState.selectedTheme ? settingsState.selectedTheme : '' }; } return { themes: [], diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts index 650888d9..040923df 100644 --- a/src/seqta/ui/themes/removeTheme.ts +++ b/src/seqta/ui/themes/removeTheme.ts @@ -1,6 +1,6 @@ import localforage from 'localforage'; import { CustomTheme } from '../../../interface/types/CustomThemes'; -import browser from 'webextension-polyfill'; +import { settingsState } from '../../utils/listeners/SettingsState'; export const removeTheme = async (theme: CustomTheme) => { // Remove custom CSS @@ -9,18 +9,15 @@ export const removeTheme = async (theme: CustomTheme) => { styleElement.parentNode?.removeChild(styleElement); } - const themeSelectedColor = await browser.storage.local.get('selectedColor') as { selectedColor: string; }; - const selectedTheme = await localforage.getItem(theme.id) as CustomTheme; localforage.setItem(theme.id, { ...selectedTheme, - selectedColor: themeSelectedColor.selectedColor + selectedColor: settingsState.selectedColor }) // Reset default color - const originalSelectedColor = await browser.storage.local.get('originalSelectedColor') as { originalSelectedColor: string; }; - if (originalSelectedColor.originalSelectedColor !== '') { - await browser.storage.local.set({ selectedColor: originalSelectedColor.originalSelectedColor }); + if (settingsState.originalSelectedColor !== '') { + settingsState.selectedColor = settingsState.originalSelectedColor } // Remove custom images diff --git a/src/seqta/ui/themes/setTheme.ts b/src/seqta/ui/themes/setTheme.ts index 1355e768..ca1f3759 100644 --- a/src/seqta/ui/themes/setTheme.ts +++ b/src/seqta/ui/themes/setTheme.ts @@ -3,11 +3,11 @@ import localforage from 'localforage'; import { CustomTheme } from '../../../interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { removeTheme } from './removeTheme'; +import { settingsState } from '../../utils/listeners/SettingsState'; export const setTheme = async (themeId: string) => { try { - const enabledTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string; }; const theme = await localforage.getItem(themeId) as CustomTheme; console.debug('Loading theme', theme); @@ -17,25 +17,21 @@ export const setTheme = async (themeId: string) => { const styleElement = document.getElementById('custom-theme'); // Remove the currently enabled theme - if (enabledTheme.selectedTheme || styleElement) { - const currentTheme = await localforage.getItem(enabledTheme.selectedTheme) as CustomTheme; + if (settingsState.selectedTheme || styleElement) { + const currentTheme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme; if (currentTheme) { await removeTheme(currentTheme); } - const color = await browser.storage.local.get('originalSelectedColor') as { originalSelectedColor: string; }; - originalSelectedColor = { selectedColor: color.originalSelectedColor }; + originalSelectedColor = { selectedColor: settingsState.originalSelectedColor }; } else { - originalSelectedColor = await browser.storage.local.get('selectedColor') as { selectedColor: string; }; + originalSelectedColor = { selectedColor: settingsState.selectedColor }; } await applyTheme(theme); - await browser.storage.local.set({ - selectedTheme: themeId, - selectedColor: theme.selectedColor ? theme.selectedColor : (theme.defaultColour !== '' ? theme.defaultColour : '#007bff'), - originalSelectedColor: originalSelectedColor.selectedColor - }); - + settingsState.selectedTheme = themeId + settingsState.selectedColor = theme.selectedColor ? theme.selectedColor : (theme.defaultColour !== '' ? theme.defaultColour : '#007bff') + settingsState.originalSelectedColor = originalSelectedColor.selectedColor } catch (error) { console.error('Error setting theme:', error); } diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts index 0dc77941..e4543c2e 100644 --- a/src/seqta/utils/listeners/SettingsState.ts +++ b/src/seqta/utils/listeners/SettingsState.ts @@ -24,6 +24,19 @@ class StorageManager { Reflect.set(target.data, prop, value); target.saveToStorage(); return true; + }, + deleteProperty: (target, prop: keyof SettingsState) => { + const oldValue = target.data[prop]; + if (oldValue !== undefined) { + delete target.data[prop]; + target.removeFromStorage(prop); + if (target.listeners[prop]) { + for (const listener of target.listeners[prop]) { + listener(undefined, oldValue); + } + } + } + return true; } }; @@ -54,6 +67,10 @@ class StorageManager { await browser.storage.local.set(this.data); } + private async removeFromStorage(key: string): Promise { + await browser.storage.local.remove(key); + } + private initStorageListener(): void { browser.storage.onChanged.addListener((changes, areaName) => { if (areaName === 'local') { @@ -73,6 +90,11 @@ class StorageManager { }); } + /** + * Register a listener for a setting. + * @param prop The setting to listen to. + * @param listener The listener to call when the setting changes. + */ public register(prop: keyof SettingsState, listener: ChangeListener): void { if (!this.listeners[prop]) { this.listeners[prop] = [];