Let the homepage load without localStorage enabled. (#224)

thunderbird · Jan 12, 2024 · a2133d3 · a2133d3
1 parent 9306e48
commit a2133d3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,8 +8,8 @@
     <script>
       // handle theme color scheme
       if (
-        localStorage.getItem('theme') === 'dark'
-        || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        localStorage?.getItem('theme') === 'dark'
+        || (!localStorage?.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
       ) {
         document.documentElement.classList.add('dark');
       } else {

diff --git a/frontend/src/components/SettingsGeneral.vue b/frontend/src/components/SettingsGeneral.vue
@@ -102,28 +102,28 @@ const dj = inject('dayjs');
 // handle ui languages
 // TODO: move to settings store
 watch(locale, (newValue) => {
-  localStorage.setItem('locale', newValue);
-  location.reload();
+  localStorage?.setItem('locale', newValue);
+  window.location.reload();
 });
 
 // handle theme mode
 // TODO: move to settings store
-const initialTheme = localStorage.getItem('theme')
-  ? colorSchemes[localStorage.getItem('theme')]
+const initialTheme = localStorage?.getItem('theme')
+  ? colorSchemes[localStorage?.getItem('theme')]
   : colorSchemes.system;
 const theme = ref(initialTheme);
 watch(theme, (newValue) => {
   switch (newValue) {
     case colorSchemes.dark:
-      localStorage.setItem('theme', 'dark');
+      localStorage?.setItem('theme', 'dark');
       document.documentElement.classList.add('dark');
       break;
     case colorSchemes.light:
-      localStorage.setItem('theme', 'light');
+      localStorage?.setItem('theme', 'light');
       document.documentElement.classList.remove('dark');
       break;
     case colorSchemes.system:
-      localStorage.removeItem('theme');
+      localStorage?.removeItem('theme');
       if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.documentElement.classList.remove('dark');
       } else {
@@ -138,10 +138,10 @@ watch(theme, (newValue) => {
 // handle time format
 // TODO: move to settings store
 const detectedTimeFormat = Number(dj('2022-05-24 20:00:00').format('LT').split(':')[0]) > 12 ? 24 : 12;
-const initialTimeFormat = localStorage.getItem('timeFormat') ?? detectedTimeFormat;
+const initialTimeFormat = localStorage?.getItem('timeFormat') ?? detectedTimeFormat;
 const timeFormat = ref(initialTimeFormat);
 watch(timeFormat, (newValue) => {
-  localStorage.setItem('timeFormat', newValue);
+  localStorage?.setItem('timeFormat', newValue);
 });
 
 // timezones

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -76,7 +76,7 @@ const messages = {
   de, // German
   en, // English
 };
-const loc = localStorage.getItem('locale') ?? (navigator.language || navigator.userLanguage);
+const loc = localStorage?.getItem('locale') ?? (navigator.language || navigator.userLanguage);
 const i18n = createI18n({
   legacy: false,
   globalInjection: true,

diff --git a/frontend/src/utils.js b/frontend/src/utils.js
@@ -59,8 +59,8 @@ export const download = (data, filename, contenttype = 'text/plain') => {
 // handle time format, return dayjs format string
 // can be either set by the user (local storage) or detected from system
 export const timeFormat = () => {
-  if (localStorage.getItem('timeFormat')) {
-    return Number(localStorage.getItem('timeFormat')) === 24 ? 'H:mm' : 'h:mm A';
+  if (localStorage?.getItem('timeFormat')) {
+    return Number(localStorage?.getItem('timeFormat')) === 24 ? 'H:mm' : 'h:mm A';
   }
   return 'LT';
 };