From 4a29885e62fe6622c8a145b3c7778c9308c38c3e Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Thu, 11 Apr 2024 08:42:33 +1000
Subject: [PATCH] make downloading themes possible from background script

---
 src/background.ts                    |  5 ++++
 src/interface/pages/Theme.tsx        |  2 +-
 src/interface/pages/ThemeCreator.tsx |  2 +-
 src/seqta/ui/themes/downloadTheme.ts | 41 ++++++++++++++++++++++++++++
 src/seqta/ui/themes/shareTheme.ts    |  1 -
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/background.ts b/src/background.ts
index e458bf53..2084324e 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -2,6 +2,7 @@ import * as Sentry from "@sentry/browser";
 import browser from 'webextension-polyfill'
 import { onError } from './seqta/utils/onError';
 import { SettingsState } from "./types/storage";
+import DownloadTheme from "./seqta/ui/themes/downloadTheme";
 
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   if (telemetry.telemetry === true) {
@@ -140,6 +141,10 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
 
     GetNews(sendResponse, url);
     return true;
+  
+  case 'DownloadTheme':
+    DownloadTheme(request.body.theme);
+    break;
       
   default:
     console.log('Unknown request type');
diff --git a/src/interface/pages/Theme.tsx b/src/interface/pages/Theme.tsx
index f4fbac40..61195e84 100644
--- a/src/interface/pages/Theme.tsx
+++ b/src/interface/pages/Theme.tsx
@@ -96,7 +96,7 @@ const Theme = () => {
             <p className="mb-8">{theme.description}</p>
             <button
                 className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
-                onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'DownloadTheme', body: { themeID: themeID } }) }
+                onClick={() => browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } }) }
             >
               Install Theme
             </button>
diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index 6f520e89..7f96a00b 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/src/interface/pages/ThemeCreator.tsx
@@ -99,7 +99,7 @@ function ThemeCreator() {
   }, []);
 
   const generateImageId = () => {
-    return '_' + Math.random().toString(36).substr(2, 9);
+    return Math.random().toString(36).substr(2, 9);
   };
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts
index e69de29b..5331b8f8 100644
--- a/src/seqta/ui/themes/downloadTheme.ts
+++ b/src/seqta/ui/themes/downloadTheme.ts
@@ -0,0 +1,41 @@
+//import PocketBase from 'pocketbase';
+import localforage from 'localforage';
+import { ThemesResponse } from '../../../interface/types/pocketbase-types';
+import { CustomTheme } from '../../../interface/types/CustomThemes';
+
+const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
+  const images: { imageData: Blob, imageID: string }[] = []
+  for (const imageID of theme.images) {
+    console.log(theme.images, `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`);
+    const image = await fetch(
+      `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`
+    )
+    const imageData = await image.blob();
+
+    images.push({ imageData, imageID });
+  }
+
+  console.log("Original Theme", theme);
+
+  // add to temp storage index
+  let availableThemes = await localforage.getItem('availableThemes') as string[];
+  if (availableThemes && !availableThemes.includes(theme.theme.id)) {
+    availableThemes.push(theme.theme.id);
+  } else if (!availableThemes) {
+    availableThemes = [theme.theme.id];
+  }
+  localforage.setItem('availableThemes', availableThemes);
+
+  // save the theme to the temp storage
+  localforage.setItem(theme.theme.id, {
+    ...theme.theme,
+    images: theme.theme.images.map((image) => {
+      return {
+        ...image,
+        imageData: images.find((i) => i.imageID.split('_')[0] === image.id)?.imageData
+      }
+    })
+  });
+}
+
+export default DownloadTheme;
diff --git a/src/seqta/ui/themes/shareTheme.ts b/src/seqta/ui/themes/shareTheme.ts
index bfeb3947..da707119 100644
--- a/src/seqta/ui/themes/shareTheme.ts
+++ b/src/seqta/ui/themes/shareTheme.ts
@@ -25,7 +25,6 @@ const shareTheme = async (themeID: string) => {
         id: image.id,
         data: finalImage,
       });
-
     }