🔨 Move settings related functions from utils

frontend/src/App.vue

@@ -5,7 +5,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { getPreferredTheme } from '@/utils';
 import {
   apiUrlKey, callKey, refreshKey, isPasswordAuthKey, isFxaAuthKey, fxaEditProfileUrlKey, hasProfanityKey,
 } from '@/keys';
@@ -175,7 +174,6 @@ const onPageLoad = async () => {
     effective_resolution: effectiveDeviceRes,
     user_agent: navigator.userAgent,
     locale: lang,
-    theme: getPreferredTheme(),
   }).json();
 
   const { data } = response;

frontend/src/components/CalendarQalendar.vue

@@ -10,14 +10,16 @@ import {
   DateFormatStrings,
   DEFAULT_SLOT_DURATION,
 } from '@/definitions';
-import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
+import { timeFormat } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { dayjsKey } from '@/keys';
+import { useUserStore } from '@/stores/user-store';
 
 // component constants
 const dj = inject(dayjsKey);
 const router = useRouter();
 const route = useRoute();
+const user = useUserStore();
 
 // component properties
 const props = defineProps({
@@ -63,7 +65,6 @@ const displayFormat = timeFormat();
 const calendarColors = ref({});
 const selectedDate = ref(null);
 const calendarMode = ref(isValidMode(route.hash) ? route.hash.slice(1) : 'month');
-const preferredTheme = getPreferredTheme();
 
 // component emits
 const emit = defineEmits(['daySelected', 'eventSelected', 'dateChange']);
@@ -301,7 +302,7 @@ const dayBoundary = computed(() => {
 });
 
 // For now we only support English and German
-const locale = getLocale();
+const locale = user.data.settings.language;
 
 /**
  * Calendar Config Object
@@ -380,8 +381,8 @@ watch(route, () => {
 </script>
 <template>
   <div
-    :style="{'color-scheme': preferredTheme === ColorSchemes.Dark ? 'dark' : null}"
-    :class="{'is-light-mode': preferredTheme === ColorSchemes.Light}"
+    :style="{'color-scheme': user.myColorScheme === ColorSchemes.Dark ? 'dark' : null}"
+    :class="{'is-light-mode': user.myColorScheme === ColorSchemes.Light}"
   >
     <qalendar
       :events="calendarEvents"

frontend/src/main.ts

@@ -1,7 +1,6 @@
 // init app
 import App from '@/App.vue';
 import { createApp } from 'vue';
-import { getPreferredTheme } from '@/utils';
 import { apiUrlKey, bookingUrlKey } from '@/keys';
 
 // pinia state management

frontend/src/stores/user-store.ts

@@ -107,7 +107,26 @@ export const useUserStore = defineStore('user', () => {
     return link?.slice(link.lastIndexOf('/') + 1);
   });
 
+  /**
+   * Return the user color scheme
+   */
+  const myColorScheme = computed((): ColorSchemes => {
+    switch (data.value.settings.colorScheme) {
+      case 'dark':
+        return ColorSchemes.Dark;
+      case 'light':
+        return ColorSchemes.Light;
+      case 'system':
+      default:
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
+    }
+  });
+
+  /**
+   * True if user has a valid access token
+   */
   const authenticated = computed((): boolean => data.value.accessToken !== null);
+
   /**
    * @deprecated - Use authenticated
    * @see this.authenticated
@@ -122,8 +141,6 @@ export const useUserStore = defineStore('user', () => {
   };
 
   const updateProfile = (subscriber: Subscriber) => {
-    console.log(subscriber);
-
     data.value = {
       // Include the previous values first
       ...data.value,
@@ -291,6 +308,7 @@ export const useUserStore = defineStore('user', () => {
     logout,
     myLink,
     mySlug,
+    myColorScheme,
     updateUser,
     finishFTUE,
   };

frontend/src/utils.ts

@@ -111,48 +111,10 @@ export const showEventPopup = (el: HTMLElementEvent, event: CalendarEvent, posit
   return obj;
 };
 
-/**
- * Returns the stored locale setting or null if none is set.
- * TODO: This should be moved to a settings store
- */
-export const getLocale = (): string|null => {
-  const locale = localStorage?.getItem('locale');
-  if (!locale) {
-    return null;
-  }
-  return locale;
-};
-
-/**
- * Returns the stored theme value. If the stored value does not exist, it will guess based on prefers-color-scheme.
- * TODO: This should be moved to a settings store
- * @returns {ColorSchemes} - Colour theme value
- */
-export const getPreferredTheme = (): string => {
-  const theme = localStorage?.getItem('theme');
-  if (!theme) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
-  }
-
-  switch (theme) {
-    case 'dark':
-      return ColorSchemes.Dark;
-    case 'light':
-      return ColorSchemes.Light;
-    default:
-      // This would be ColorSchemes.System, but I feel like we need a definitive answer here.
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
-  }
-};
-
 /**
  * via: https://stackoverflow.com/a/11868398
  */
 export const getAccessibleColor = (hexcolor: string): string => {
-  const defaultColor = getPreferredTheme() === ColorSchemes.Dark ? 'white' : 'black';
-  if (!hexcolor) {
-    return defaultColor;
-  }
   const r = parseInt(hexcolor.substring(1, 3), 16);
   const g = parseInt(hexcolor.substring(3, 5), 16);
   const b = parseInt(hexcolor.substring(5, 7), 16);
@@ -217,6 +179,5 @@ export default {
   initialEventPopupData,
   showEventPopup,
   getAccessibleColor,
-  getLocale,
   handleFormError,
 };

frontend/test/stores/user-store.test.js

@@ -155,6 +155,9 @@ describe('User Store', () => {
     expect(user.data.name).toBeTruthy();
     expect(user.data.level).toBeTruthy();
     expect(user.data.settings.timezone).toBeTruthy();
+    expect(user.data.settings.language).toBeTruthy();
+    expect(user.data.settings.timeFormat).toBeTruthy();
+    expect(user.data.settings.colorScheme).toBeTruthy();
     expect(user.data.signedUrl).toBeTruthy();
   });
 });