From b179d96f31e3d77c85e96f1036bee14d2f4534f7 Mon Sep 17 00:00:00 2001 From: Ruslan Makarov Date: Wed, 7 Feb 2024 19:05:52 +0300 Subject: [PATCH] feat: add to useLocalStorage initialization --- src/app/components/headers/AppHeader.vue | 2 +- src/app/composables/useAppConfig.ts | 25 +++++++++-------------- src/app/composables/useLocalStorage.ts | 25 ++++++++++++++++------- src/app/utils/init.ts | 25 +++++++++++++++++++++++ src/main.ts | 21 ++----------------- src/products/composables/useFavourites.ts | 4 +--- 6 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 src/app/utils/init.ts diff --git a/src/app/components/headers/AppHeader.vue b/src/app/components/headers/AppHeader.vue index 89d2abd..063ab35 100644 --- a/src/app/components/headers/AppHeader.vue +++ b/src/app/components/headers/AppHeader.vue @@ -45,7 +45,7 @@ function gotoProductCategory(id) { diff --git a/src/app/composables/useAppConfig.ts b/src/app/composables/useAppConfig.ts index 0346e7c..f59a8e5 100644 --- a/src/app/composables/useAppConfig.ts +++ b/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, }; } diff --git a/src/app/composables/useLocalStorage.ts b/src/app/composables/useLocalStorage.ts index 1473e89..1f3ee81 100644 --- a/src/app/composables/useLocalStorage.ts +++ b/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 = reactive({}); @@ -8,26 +10,35 @@ const data: Record = 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 }; diff --git a/src/app/utils/init.ts b/src/app/utils/init.ts new file mode 100644 index 0000000..f1bd1ee --- /dev/null +++ b/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(); +} diff --git a/src/main.ts b/src/main.ts index 2b91c6c..35a6575 100644 --- a/src/main.ts +++ b/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(), diff --git a/src/products/composables/useFavourites.ts b/src/products/composables/useFavourites.ts index 53e66bd..532bbbe 100644 --- a/src/products/composables/useFavourites.ts +++ b/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>(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 }; }