From 1c86fd3f9b04765b6f3a71f1a5f4da631fdb9437 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 2 Nov 2023 18:14:13 +1100
Subject: [PATCH] separate theme management

---
 .../src/components/BackgroundSelector.tsx     |  2 +
 interface/src/components/ThemeSelector.tsx    | 56 +------------------
 interface/src/hooks/ThemeManagment.tsx        | 52 +++++++++++++++++
 3 files changed, 55 insertions(+), 55 deletions(-)
 create mode 100644 interface/src/hooks/ThemeManagment.tsx

diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx
index 439efe73..ccc11fd9 100644
--- a/interface/src/components/BackgroundSelector.tsx
+++ b/interface/src/components/BackgroundSelector.tsx
@@ -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);
   };
diff --git a/interface/src/components/ThemeSelector.tsx b/interface/src/components/ThemeSelector.tsx
index 4d241495..de19c1e9 100644
--- a/interface/src/components/ThemeSelector.tsx
+++ b/interface/src/components/ThemeSelector.tsx
@@ -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>('');
diff --git a/interface/src/hooks/ThemeManagment.tsx b/interface/src/hooks/ThemeManagment.tsx
new file mode 100644
index 00000000..71d36679
--- /dev/null
+++ b/interface/src/hooks/ThemeManagment.tsx
@@ -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',
+  });
+};
\ No newline at end of file