Merge pull request #185 from buggregator/improve/update-api-version-r…

…equest

Improve/update api version request

app.vue

@@ -5,4 +5,7 @@
 <script lang="ts" setup>
 import "./src/assets/index.css";
 import "./src/assets/vendor";
+import { useSettingsStore } from "~/src/shared/stores";
+
+useSettingsStore().initialize();
 </script>

layouts/blank.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="main-layout">
     <slot />

middleware/auth.global.ts

@@ -5,6 +5,7 @@ import { useProfileStore } from "~/src/shared/stores/profile"
 export default defineNuxtRouteMiddleware(async (to) => {
   const app = useNuxtApp()
 
+  // TODO: need to use settingsStore instead of nuxt plugin
   if (!app.$appSettings?.auth?.enabled) {
     return undefined
   }

pages/login.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { useNuxtApp, navigateTo, setPageLayout } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { navigateTo, setPageLayout } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { REST_API_URL } from "~/src/shared/lib/io";
 import { useProfileStore, useSettingsStore } from "~/src/shared/stores";
 import { IconSvg } from "~/src/shared/ui";
 
-useSettingsStore();
 setPageLayout("blank");
 
-const app = useNuxtApp();
 const store = useProfileStore();
+const { auth } = storeToRefs(useSettingsStore());
 
 if (store.isAuthenticated) {
   await navigateTo("/");
 }
 
+const loginUrl = computed(() => `${REST_API_URL}/${auth.value.loginUrl}`);
+
 const redirect = async () => {
-  await navigateTo(`${REST_API_URL}/${app.$appSettings.auth.login_url}`, {
+  await navigateTo(loginUrl.value, {
     external: true,
   });
 };

plugins/auth.ts

@@ -15,6 +15,7 @@ export default defineNuxtPlugin(async () => {
   }
 
   try {
+    // TODO: remove duplicated request with settings-store
     settings = await api.getSettings() as { auth: { enabled: boolean; login_url: string }; version: string };
   } catch (e) {
     console.error('Server is not available!')

src/shared/lib/use-settings/use-settings.ts

@@ -1,38 +1,38 @@
 import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import type { Profile } from "../../types";
+import type { TProfile, TSettings } from "../../types";
 import { REST_API_URL } from "../io";
 
 
 type TUseSettings = {
   api: {
-    getVersion: () => Promise<string>
-    getProfile: () => Promise<Profile>
-    getSettings: () => Promise<unknown>
+    getProfile: () => Promise<TProfile>
+    getSettings: () => Promise<TSettings>
   }
 }
 
 export const useSettings = (): TUseSettings => {
   const nuxtApp = useNuxtApp()
 
-  // todo: we can get version from settings
-  const getAppVersion = () => fetch(`${REST_API_URL}/api/version`)
-    .then((response) => response.json())
-    .then((response) => response?.version || 'unknown')
-    .catch(() => 'unknown');
-
   const getAppSettings = () => fetch(`${REST_API_URL}/api/settings`)
     .then((response) => response.json())
-    .catch(() => 'unknown');
+    .catch((e) => {
+      console.error(e);
+
+      return null
+    });
 
   const getProfile = () => fetch(`${REST_API_URL}/api/me`, {
     headers: {"X-Auth-Token": nuxtApp.$authToken.token || ""}
   })
     .then((response) => response.json())
-    .catch(() => 'unknown');
+    .catch((e) => {
+      console.error(e);
+
+      return null
+    });
 
   return {
     api: {
-      getVersion: getAppVersion,
       getProfile,
       getSettings: getAppSettings
     }

src/shared/stores/profile.ts

@@ -1,12 +1,12 @@
 import { defineStore } from "pinia";
-import type { Profile } from "../types";
+import type {TProfile} from "../types";
 
 const STORAGE_KEY = "token";
 
 export const useProfileStore = defineStore("profileStore", {
   state: () => ({
     token: '' as string,
-    profile: undefined as Profile | undefined,
+    profile: undefined as TProfile | undefined,
   }),
   getters: {
     isAuthenticated(): boolean {
@@ -19,9 +19,10 @@ export const useProfileStore = defineStore("profileStore", {
 
       this.token = token;
       localStorage?.setItem(STORAGE_KEY, token);
+
       app.$authToken.token = token;
     },
-    setProfile(profile: Profile): void {
+    setProfile(profile: TProfile): void {
       this.profile = profile;
     },
     fetchToken(): void {

src/shared/stores/settings/constants.ts

@@ -0,0 +1,6 @@
+
+export const THEME_MODES = {
+  LIGHT: "light",
+  DARK: "dark",
+};
+

src/shared/stores/settings/index.ts

@@ -0,0 +1,2 @@
+export {useSettingsStore} from './settings-store'
+export * from './constants'

src/shared/stores/settings/local-storage-actions.ts

@@ -0,0 +1,69 @@
+import {LOCAL_STORAGE_KEYS} from "../../types";
+import {THEME_MODES} from "./constants";
+
+export const checkIfThemeActive = () => {
+  if (!process.client) {
+    return THEME_MODES.LIGHT;
+  }
+
+  const isStoredDarkTheme = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.THEME) === THEME_MODES.DARK;
+  const isSystemDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (isStoredDarkTheme || isSystemDarkTheme) {
+    document?.documentElement?.classList?.add(THEME_MODES.DARK);
+
+    return THEME_MODES.DARK
+  }
+
+  document?.documentElement?.classList?.remove(THEME_MODES.DARK);
+
+  return THEME_MODES.LIGHT
+};
+
+export const syncThemeLocalStorage = (themeName: string) => {
+  window?.localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, themeName);
+
+  if (themeName === THEME_MODES.LIGHT) {
+    window?.document?.documentElement?.classList?.remove(THEME_MODES.DARK);
+  } else {
+    window?.document?.documentElement?.classList?.add(THEME_MODES.DARK);
+  }
+}
+
+export const getFixedHeaderState = () => {
+  if (!process.client) {
+    return  false;
+  }
+
+  const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
+
+  const isFixed: boolean = storedValue === "true"
+
+  if (isFixed) {
+    document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    document?.documentElement?.classList?.remove("navbar-fixed");
+  }
+
+  return isFixed;
+}
+
+export const syncFixedHeaderLocalStorage = (state: boolean) => {
+  window?.localStorage.setItem(LOCAL_STORAGE_KEYS.NAVBAR, String(state));
+
+  if (state) {
+    window?.document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    window?.document?.documentElement?.classList?.remove("navbar-fixed");
+  }
+}
+
+export const getEventsCountVisibleState = (): boolean => {
+  const storageValue = window?.localStorage?.getItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS) || "true";
+
+  return storageValue === "true";
+};
+
+export const syncEventsCountVisibleLocalStorage = (state: boolean) => {
+  window?.localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(state));
+}

src/shared/stores/settings/settings-store.ts

@@ -0,0 +1,55 @@
+import {defineStore} from "pinia";
+import {useSettings} from "../../lib/use-settings";
+import type { TSettings } from "../../types";
+import {THEME_MODES} from "./constants";
+import {
+  getEventsCountVisibleState,
+  getFixedHeaderState,
+  checkIfThemeActive, syncEventsCountVisibleLocalStorage, syncFixedHeaderLocalStorage, syncThemeLocalStorage
+} from "./local-storage-actions";
+
+export const useSettingsStore = defineStore("settingsStore", {
+  state: () => ({
+    apiVersion: '',
+    auth: {
+      isEnabled: false,
+      loginUrl: '/login',
+    },
+    themeType: checkIfThemeActive(),
+    isFixedHeader: getFixedHeaderState(),
+    isVisibleEventCounts: getEventsCountVisibleState(),
+  }),
+  actions: {
+    changeTheme() {
+      this.themeType = this.themeType === THEME_MODES.DARK
+        ? THEME_MODES.LIGHT
+        : THEME_MODES.DARK;
+
+      syncThemeLocalStorage(this.themeType)
+    },
+    changeNavbar() {
+      this.isFixedHeader = !this.isFixedHeader;
+
+      syncFixedHeaderLocalStorage(this.isFixedHeader)
+    },
+    changeEventCountsVisibility() {
+      this.isVisibleEventCounts = !this.isVisibleEventCounts;
+
+      syncEventsCountVisibleLocalStorage(this.isVisibleEventCounts)
+    },
+    initialize() {
+      const {api: { getSettings }} = useSettings();
+
+      getSettings().then(({ version, auth } = {} as TSettings) => {
+        if (version) {
+          this.apiVersion = version
+        }
+
+        if (auth) {
+          this.auth.isEnabled = auth.enabled;
+          this.auth.loginUrl = auth.login_url;
+        }
+      })
+    }
+  },
+});

src/shared/types/index.ts

@@ -1,5 +1,5 @@
 export * from "./events";
-export * from "./profile";
+export * from "./settings";
 export * from "./generics";
 export * from "./local-storage";
 export * from "./partials";

src/shared/types/settings.ts

@@ -0,0 +1,13 @@
+export type TProfile =  {
+  username: string,
+  email: string,
+  avatar: string,
+}
+
+export type TSettings = {
+  auth: {
+    enabled: boolean,
+    login_url: string,
+  },
+  version: string
+}