diff --git a/src/interface/components/ThemeCover.tsx b/src/interface/components/ThemeCover.tsx index e2b1cb5b..e87c7ed5 100644 --- a/src/interface/components/ThemeCover.tsx +++ b/src/interface/components/ThemeCover.tsx @@ -25,14 +25,17 @@ export const ThemeCover: React.FC = ({ const handleThemeClick = async () => { if (isEditMode) return; if (downloaded) { + // move the theme from temporary storage to SEQTAs storage await sendThemeUpdate(theme as DownloadedTheme, true) + // remove from temp storage await browser.runtime.sendMessage({ type: 'DeleteDownloadedTheme', body: theme.id }) + // set it! setTheme(theme.id); } else { - console.log(theme) + console.debug(theme) onThemeSelect(theme.id); } }; diff --git a/src/interface/components/ThemeSelector.tsx b/src/interface/components/ThemeSelector.tsx index 4c0f6bce..fcc6e89a 100644 --- a/src/interface/components/ThemeSelector.tsx +++ b/src/interface/components/ThemeSelector.tsx @@ -79,10 +79,20 @@ const ThemeSelector: ForwardRefExoticComponent & useEffect(() => { fetchThemes(); + + /* const interval = setInterval(() => { + console.log("Done!"); + if (isLoading == true) { + fetchThemes(); + } else { + clearInterval(interval); + } + }, 1000); */ }, []); const handleThemeSelect = useCallback( async (themeId: string) => { + console.log(themeId === settingsState.selectedTheme); if (themeId === settingsState.selectedTheme) { await disableTheme(); setSelectedTheme(''); diff --git a/src/seqta/utils/listeners/StorageListener.ts b/src/seqta/utils/listeners/StorageListener.ts index e66d0ac8..6c9f6be8 100644 --- a/src/seqta/utils/listeners/StorageListener.ts +++ b/src/seqta/utils/listeners/StorageListener.ts @@ -1,4 +1,5 @@ import browser from 'webextension-polyfill' +import { debounce } from 'lodash'; import { CreateBackground, @@ -11,13 +12,18 @@ import { } from '../../../SEQTA'; import { updateBgDurations } from '../../ui/Animation'; import { getDarkMode, updateAllColors } from '../../ui/colors/Manager'; -import { appendBackgroundToUI } from '../../ui/ImageBackgrounds'; +//import { appendBackgroundToUI } from '../../ui/ImageBackgrounds'; +import { setTheme } from '../../ui/themes/setTheme'; +import { disableTheme } from '../../ui/themes/disableTheme'; export default class StorageListener { darkMode: any; + debouncedSetTheme: any; + constructor() { this.darkMode = getDarkMode(); + this.debouncedSetTheme = debounce(this.applyTheme, 300); // 300 ms debounce period browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this)); } @@ -82,15 +88,23 @@ export default class StorageListener { } break; - case 'theme': - console.log(changes.theme.newValue) + case 'selectedTheme': + this.debouncedSetTheme(changes.selectedTheme.newValue); break; default: break; } }); - } + } + + applyTheme(theme: string) { + if (theme === '') { + disableTheme(); + } else { + setTheme(theme); + } + } handleSelectedColorChange(newColor: any) { try {