From a2133d34d1fea0bac0e16b6998d14a44bc4188d9 Mon Sep 17 00:00:00 2001
From: Mel <97147377+MelissaAutumn@users.noreply.github.com>
Date: Fri, 12 Jan 2024 09:41:49 -0800
Subject: [PATCH] Let the homepage load without localStorage enabled. (#224)

---
 frontend/index.html                         |  4 ++--
 frontend/src/components/SettingsGeneral.vue | 18 +++++++++---------
 frontend/src/main.js                        |  2 +-
 frontend/src/utils.js                       |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 355f4c335..5578045d1 100644
--- 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
index 16bd1db2b..5fafbf12f 100644
--- 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
index 382251e4a..99e0f53bc 100644
--- 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
index 673092597..7953f7082 100644
--- 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';
 };