feat: add to useLocalStorage initialization

src/app/components/headers/AppHeader.vue

@@ -45,7 +45,7 @@ function gotoProductCategory(id) {
         <RouterLink v-for="item in topnavItems" :key="item.title" class="link" :to="item.route">
           <BaseIconButton
             :title="item.title" :icon="item.icon"
-            :badge="item.icon === 'favourites' ? listFavourites().length : item.icon === 'cart' ? cart.size : 0"
+            :badge="item.icon === 'favourites' ? listFavourites().length : (item.icon === 'cart' ? cart.size() : 0)"
           />
         </RouterLink>
         <HamburgerIcon v-model="isDrawerOpen" class="drawer-toggle" />

src/app/composables/useAppConfig.ts

@@ -1,30 +1,25 @@
 import { ref, watch } from "vue";
-import { useLocalStorage } from "@/app/composables/useLocalStorage";
 
 const isDrawerOpen = ref(false);
 const isDarkTheme = ref(false);
-const APPEARANCE_KEY = "vwa-theme-appearance";
-
-useLocalStorage().observe("isDarkTheme", isDarkTheme);
 
 watch(isDarkTheme, () => {
   if (isDarkTheme.value) {
     document.documentElement.classList.add("dark");
-    // localStorage.setItem(APPEARANCE_KEY, "dark");
   } else {
     document.documentElement.classList.remove("dark");
-    // localStorage.setItem(APPEARANCE_KEY, "");
   }
 });
 
-export function initAppearance() {
-  // document.documentElement.classList.add("dark");
-  const preference = localStorage.getItem(APPEARANCE_KEY) || "";
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  if (!preference || preference === "auto" ? prefersDark : preference === "dark") {
-    document.documentElement.classList.add("dark");
-  };
-}
+// export function initAppearance() {
+// document.documentElement.classList.add("dark");
+// const preference = localStorage.getItem(APPEARANCE_KEY) || "";
+// const preference = "";
+// const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+// if (!preference || preference === "auto" ? prefersDark : preference === "dark") {
+//   document.documentElement.classList.add("dark");
+// };
+// }
 
 export function useAppConfig() {
   function closeDrawer() {
@@ -35,6 +30,6 @@ export function useAppConfig() {
     isDrawerOpen,
     isDarkTheme,
     closeDrawer,
-    initAppearance,
+    // initAppearance,
   };
 }

src/app/composables/useLocalStorage.ts

@@ -1,5 +1,7 @@
 import { reactive, watch } from "vue";
 
+const LS_KEY = "arty-crafty-data";
+
 // observed reactive data
 const data: Record<string, any> = reactive({});
 
@@ -8,26 +10,35 @@ const data: Record<string, any> = reactive({});
  * When the "arty-crafty-data" key is detected in the event, it parses the new value and updates the data object.
  */
 function init() {
+  readFromStorage();
   window.addEventListener("storage", (e) => {
-    if (e.key === "arty-crafty-data") {
-      for (const [key, value] of Object.entries(JSON.parse(e.newValue))) {
-        data[key] = (data[key] instanceof Set) ? new Set(value as []) : value;
-      }
+    if (e.key === LS_KEY) {
+      readFromStorage();
     }
   });
 }
 
+function readFromStorage() {
+  const lsData = JSON.parse(localStorage.getItem(LS_KEY) || "{}");
+  for (const [key, value] of Object.entries(lsData)) {
+    data[key] = (data[key] instanceof Set) ? new Set(value as []) : value;
+  }
+}
+
+// store data to localStoradge
 watch(data, () => {
   const decomposedData = {};
   for (const key in data) {
     decomposedData[key] = (data[key] instanceof Set) ? Array.from(data[key]) : data[key];
   }
-  localStorage.setItem("arty-crafty-data", JSON.stringify(decomposedData));
+  localStorage.setItem(LS_KEY, JSON.stringify(decomposedData));
 });
 
 export function useLocalStorage() {
-  function observe(key: string, value: any) {
-    data[key] = value;
+  function observe(key: string, observable: any) {
+    // setting initial value to reactive observable from localStorage
+    observable.value = (observable.value instanceof Set) ? new Set(data[key]) : data[key];
+    data[key] = observable;
   }
 
   return { init, observe };

src/app/utils/init.ts

@@ -0,0 +1,25 @@
+// import { initAppearance } from "@/app/composables/useAppConfig";
+import { loadIcons } from "@/app/utils/icons";
+import { loadCategories } from "@/products/composables/useProductCatalog";
+import { useLocalStorage } from "@/app/composables/useLocalStorage";
+import { api } from "@/app/services/api";
+import { useFavourites } from "@/products/composables/useFavourites";
+import { useAppConfig } from "@/app/composables/useAppConfig";
+
+// import { useI18n } from "@/app/composables/useI18nLight";
+// const { initI18n } = useI18n();
+const { favourites } = useFavourites();
+const { isDarkTheme } = useAppConfig();
+const ls = useLocalStorage();
+
+export function init() {
+  ls.init();
+  ls.observe("favourites", favourites);
+  ls.observe("isDarkTheme", isDarkTheme);
+
+  loadIcons();
+  api.init();
+  loadCategories();
+
+  // initI18n();
+}

src/main.ts

@@ -1,30 +1,13 @@
 import { createApp } from "vue";
-
-// import "./app/assets/styles/vars.css";
-// import "./app/styles/base.css";
-
 import "./app/assets/styles/base.css";
 import "./app/assets/styles/custom.css";
 import App from "./app/App.vue";
 import { router } from "./app/router";
-import { loadIcons } from "@/app/utils/icons";
-import { initAppearance } from "@/app/composables/useAppConfig";
-import { loadCategories } from "@/products/composables/useProductCatalog";
-import { api } from "@/app/services/api";
-import { useLocalStorage } from "@/app/composables/useLocalStorage";
-
-import { useI18n } from "@/app/composables/useI18nLight";
-
-// const { initI18n } = useI18n();
+import { init } from "@/app/utils/init";
 
 const app = createApp(App);
 app.use(router);
-loadIcons();
-initAppearance();
-api.init();
-loadCategories();
-// initI18n();
-useLocalStorage().init();
+init();
 
 await Promise.all([
   router.isReady(),

src/products/composables/useFavourites.ts

@@ -4,8 +4,6 @@ import { useLocalStorage } from "@/app/composables/useLocalStorage";
 const favArray = JSON.parse(localStorage.getItem("ac-favourites")) as number[] ?? [];
 const favourites = ref<Set<number>>(new Set(favArray));
 
-useLocalStorage().observe("favourites", favourites);
-
 export function useFavourites() {
   /**
    * Determines if a product is in the favourites list.
@@ -41,5 +39,5 @@ export function useFavourites() {
     return Array.from(favourites.value);
   }
 
-  return { isInFavourites, toggleFavourite, listFavourites };
+  return { isInFavourites, toggleFavourite, listFavourites, favourites };
 }