From 46e86b964389f2e4122cad209eb1517021f1fa23 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 2 Nov 2023 16:13:45 +1100
Subject: [PATCH] add theme selector

---
 interface/src/components/ThemeSelector.tsx | 18 ++++++++++++++++++
 interface/src/pages/Themes.tsx             |  2 ++
 src/seqta/ui/Themes.js                     |  4 ++--
 src/seqta/utils/MessageListener.js         |  1 +
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 interface/src/components/ThemeSelector.tsx

diff --git a/interface/src/components/ThemeSelector.tsx b/interface/src/components/ThemeSelector.tsx
new file mode 100644
index 00000000..3e3e43ce
--- /dev/null
+++ b/interface/src/components/ThemeSelector.tsx
@@ -0,0 +1,18 @@
+const downloadTheme = (themeName: string, themeURL: string) => {
+  // send message to the background script
+  chrome.runtime.sendMessage({
+    type: 'currentTab',
+    info: 'SetTheme',
+    body: {
+      themeName: themeName,
+      themeURL: themeURL
+    }
+  });
+}
+
+
+export default function ThemeSelector() {
+  return (
+  <button onClick={() => downloadTheme('Dark', 'https://raw.githubusercontent.com/SethBurkart123/BetterSEQTA-Themes/main/themes/test.json')}>Dark</button>
+  )
+}
\ No newline at end of file
diff --git a/interface/src/pages/Themes.tsx b/interface/src/pages/Themes.tsx
index 020e4a47..a43fd084 100644
--- a/interface/src/pages/Themes.tsx
+++ b/interface/src/pages/Themes.tsx
@@ -1,11 +1,13 @@
 import { FC } from 'react';
 import BackgroundSelector from '../components/BackgroundSelector';
+import ThemeSelector from '../components/ThemeSelector';
 
 const Themes: FC = () => {
 
   return (
   <div>
     <BackgroundSelector />
+    <ThemeSelector />
   </div>
   );
 };
diff --git a/src/seqta/ui/Themes.js b/src/seqta/ui/Themes.js
index 3169b698..2ad5d8ff 100644
--- a/src/seqta/ui/Themes.js
+++ b/src/seqta/ui/Themes.js
@@ -2,7 +2,7 @@ import localforage from "localforage";
 
 // Utility function to fetch and parse JSON
 const fetchJSON = async (url) => {
-  const res = await fetch(url);
+  const res = await fetch(url, {cache: "no-store"});
   return await res.json();
 };
 
@@ -71,11 +71,11 @@ export const downloadTheme = async (themeName, themeUrl) => {
   const themeData = await fetchThemeJSON(themeUrl);
   await saveToIndexedDB(themeData, themeName);
   console.log(`Theme ${themeName} saved to IndexedDB`);
-  setTheme(themeName);
   return;
 };
 
 export const setTheme = async (themeName, themeUrl) => {
+  await downloadTheme(themeName, themeUrl);
   if (!(await themeExistsInDB(themeName))) {
     await downloadTheme(themeName, themeUrl);
   }
diff --git a/src/seqta/utils/MessageListener.js b/src/seqta/utils/MessageListener.js
index 3952a1a7..00ad3172 100644
--- a/src/seqta/utils/MessageListener.js
+++ b/src/seqta/utils/MessageListener.js
@@ -15,6 +15,7 @@ export class MessageHandler {
       this.editSidebar();
       break;
     case "SetTheme":
+      console.log(request);
       setTheme(request.body.themeName, request.body.themeURL);
       break;
     case "DownloadTheme":