refactor: reduce browser storage dependence, remove unused code

This commit is contained in:
sethburkart123
2024-06-09 18:04:26 +10:00
parent db98f24555
commit 736cf36068
9 changed files with 53 additions and 42 deletions
+2 -2
View File
@@ -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<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {
@@ -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
}
};
+2 -2
View File
@@ -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);
}
+9 -8
View File
@@ -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 {
+3 -4
View File
@@ -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);
}
+2 -5
View File
@@ -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<ThemeList | {}> => {
try {
@@ -19,9 +18,7 @@ export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
})
);
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: [],
+4 -7
View File
@@ -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
+8 -12
View File
@@ -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);
}