separate theme management

This commit is contained in:
SethBurkart123
2023-11-02 18:14:13 +11:00
parent 49bf19afd5
commit 1c86fd3f9b
3 changed files with 55 additions and 55 deletions
@@ -2,6 +2,7 @@ import { ChangeEvent, useEffect, useState } from "react";
import { downloadPresetBackground, openDB, readAllData, writeData } from "../hooks/BackgroundDataLoader";
import presetBackgrounds from "../assets/presetBackgrounds";
import "./BackgroundSelector.css";
import { disableTheme } from "../hooks/ThemeManagment";
// Custom Types and Interfaces
export interface Background {
@@ -69,6 +70,7 @@ export default function BackgroundSelector() {
};
const selectBackground = (fileId: string): void => {
disableTheme();
setSelectedBackground(fileId);
localStorage.setItem('selectedBackground', fileId);
};
+1 -55
View File
@@ -1,7 +1,6 @@
/* global chrome */
import { useEffect, useState } from "react";
import themesList from '../assets/themes';
import { listThemes, disableTheme, downloadTheme, setTheme } from "../hooks/ThemeManagment";
interface Theme {
name: string;
@@ -11,59 +10,6 @@ interface Theme {
coverImage: JSX.Element;
}
interface ThemeList {
themes: string[];
}
const downloadTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'DownloadTheme',
body: {
themeName: themeName,
themeURL: themeURL
}
});
console.log("Response: ", response);
}
const setTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'SetTheme',
body: {
themeName: themeName,
themeURL: themeURL
}
});
console.log("Response: ", response);
}
const listThemes = async () => {
// send message to the background script
const response: ThemeList = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'ListThemes',
body: {}
});
// response.themes is an array of strings that are identical to the theme names that we loop over. Use this list to see which ones are downloaded and which ones need to see the download icon.
console.log("Response: ", response);
return response.themes;
}
const disableTheme = async () => {
await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'DisableTheme',
});
};
const ThemeSelector = () => {
const [themes, setThemes] = useState<Theme[]>([]);
const [enabledThemeName, setEnabledThemeName] = useState<string>('');
+52
View File
@@ -0,0 +1,52 @@
interface ThemeList {
themes: string[];
}
export const downloadTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'DownloadTheme',
body: {
themeName: themeName,
themeURL: themeURL
}
});
console.log("Response: ", response);
}
export const setTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'SetTheme',
body: {
themeName: themeName,
themeURL: themeURL
}
});
console.log("Response: ", response);
}
export const listThemes = async () => {
// send message to the background script
const response: ThemeList = await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'ListThemes',
body: {}
});
// response.themes is an array of strings that are identical to the theme names that we loop over. Use this list to see which ones are downloaded and which ones need to see the download icon.
console.log("Response: ", response);
return response.themes;
}
export const disableTheme = async () => {
await chrome.runtime.sendMessage({
type: 'currentTab',
info: 'DisableTheme',
});
};