refactor code

public/backgrounds/themeManager.js

@@ -1,28 +1,45 @@
-// Import localForage library (assuming it's installed via npm or included via a script tag)
-// import localforage from "localforage";
-
 /* global localforage */
 
-// 🎨 Theme Management Functions 🎨
+/**
+ * 🎨 Theme Management Functions 🎨
+ */
 
-// Fetch theme details (CSS, images, className) from a given URL
+/**
+ * Fetches theme details (CSS, images, className) from a given URL.
+ * @param {string} url - The URL to fetch theme JSON from.
+ * @returns {Object} - Theme details including CSS, images, and class name.
+ */
 async function fetchThemeJSON(url) {
   const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch theme JSON: ${response.statusText}`);
+  }
   const data = await response.json();
-  
+
   const cssResponse = await fetch(data.css);
+  if (!cssResponse.ok) {
+    throw new Error(`Failed to fetch CSS: ${cssResponse.statusText}`);
+  }
   const cssText = await cssResponse.text();
-  
+
   return {
     css: cssText,
     images: data.images,
-    className: data.className
+    className: data.className,
   };
 }
 
-// Save theme details to storage via localForage
+/**
+ * Saves theme details to IndexedDB storage via localForage.
+ * @param {Object} theme - Theme details to be saved.
+ * @param {string} themeName - The name to identify the theme.
+ */
 async function saveToIndexedDB(theme, themeName) {
-  await localforage.setItem(`css_${themeName}`, { css: theme.css, className: theme.className, images: theme.images });
+  await localforage.setItem(`css_${themeName}`, {
+    css: theme.css,
+    className: theme.className,
+    images: theme.images,
+  });
 
   for (const [cssVar, imageUrl] of Object.entries(theme.images)) {
     try {
@@ -39,11 +56,16 @@ async function saveToIndexedDB(theme, themeName) {
   }
 }
 
-// Apply theme from storage via localForage to document
+/**
+ * Applies theme from storage to the document.
+ * @param {string} themeName - The name of the theme to apply.
+ */
 async function applyTheme(themeName) {
   const themeData = await localforage.getItem(`css_${themeName}`);
-  console.log("Retrieved Theme Data:", themeData); // Debugging info
-  
+  if (!themeData) {
+    throw new Error(`No theme data found for ${themeName}`);
+  }
+
   const style = document.createElement("style");
   style.innerHTML = themeData.css;
   document.head.appendChild(style);
@@ -53,7 +75,6 @@ async function applyTheme(themeName) {
   if (themeData.images) {
     for (const cssVar of Object.keys(themeData.images)) {
       const imageData = await localforage.getItem(`images_${themeName}_${cssVar}`);
-      console.log(imageData);
       const objectURL = URL.createObjectURL(imageData);
       document.documentElement.style.setProperty(cssVar, `url(${objectURL})`);
     }
@@ -62,31 +83,44 @@ async function applyTheme(themeName) {
   }
 }
 
-// Save available themes to localStorage
+/**
+ * 🛠️ Utility Functions 🛠️
+ */
+
+/**
+ * Saves the list of available themes to local storage.
+ * @param {Array} themeList - An array of available themes.
+ */
 function saveAvailableThemes(themeList) {
   localStorage.setItem("availableThemes", JSON.stringify(themeList));
 }
 
-// Set the currently selected theme in localStorage
+/**
+ * Sets the currently selected theme in local storage.
+ * @param {string} themeName - The name of the selected theme.
+ */
 function setSelectedTheme(themeName) {
   localStorage.setItem("selectedTheme", themeName);
 }
 
-// 🚀 Main function to orchestrate everything 🚀
-async function main1() {
-  const availableThemes = [
-    { name: "dark", url: "https://raw.githubusercontent.com/SethBurkart123/BetterSEQTA-Themes/main/themes/test.json" }
-  ];
+/**
+ * 🚀 Main Function to Orchestrate Everything 🚀
+ */
+(async () => {
+  try {
+    const availableThemes = [
+      { name: "dark", url: "https://raw.githubusercontent.com/SethBurkart123/BetterSEQTA-Themes/main/themes/test.json" },
+    ];
 
-  saveAvailableThemes(availableThemes);
+    saveAvailableThemes(availableThemes);
 
-  const themeToApply = availableThemes[0].name;
-  const themeData = await fetchThemeJSON(availableThemes[0].url);
+    const themeToApply = availableThemes[0].name;
+    const themeData = await fetchThemeJSON(availableThemes[0].url);
 
-  await saveToIndexedDB(themeData, themeToApply);
-  setSelectedTheme(themeToApply);
-  await applyTheme(themeToApply);
-}
-
-// Catch and log any errors
-main1().catch(console.error);
+    await saveToIndexedDB(themeData, themeToApply);
+    setSelectedTheme(themeToApply);
+    await applyTheme(themeToApply);
+  } catch (error) {
+    console.error(`An error occurred: ${error}`);
+  }
+})();