From 7928e4941fc86ff2474f209e056a6d87150f42e1 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Mon, 5 Jun 2023 19:11:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=F0=9F=90=9B=20Fix=20HMR=20issue?=
 =?UTF-8?q?s=20&=20change=20lang=20without=20reload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix HMR issues due to circular import of "language" and "i18n"
- Move i18n to seperate file
- Dynamically update language instead of doing a full page reload
---
 src/i18n.js                | 17 +++++++++++++++++
 src/main.js                | 11 +----------
 src/store.js               |  8 ++------
 src/views/SettingsView.vue |  8 ++++++--
 4 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 src/i18n.js

diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 0000000..6f112eb
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,17 @@
+import { createI18n } from "vue-i18n";
+import { strings } from "./strings";
+import { ref, watch } from "vue";
+
+export const language = ref(localStorage.getItem("lang") || "en");
+
+let i18n = createI18n({
+  locale: language.value,
+  fallbackLocale: "en",
+  messages: strings,
+});
+export default i18n;
+
+watch(language, (newValue) => {
+  localStorage.setItem("lang", newValue);
+  i18n.global.locale = newValue;
+});
diff --git a/src/main.js b/src/main.js
index b4399fe..cca0997 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,16 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { registerSW } from "virtual:pwa-register";
-import { createI18n } from "vue-i18n";
-import { strings } from "./strings";
-import { language } from "./store";
-
-const i18n = createI18n({
-  locale: language.value,
-  fallbackLocale: "en",
-  messages: strings,
-});
-export default i18n;
+import i18n from "./i18n";
 
 const app = createApp(App);
 
diff --git a/src/store.js b/src/store.js
index 39f18af..359d976 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,7 +1,7 @@
 import { ref, watch, computed } from "vue";
 import router from "./router";
-import i18n from "./main";
 import { getNextAndPrevDay } from "./util";
+import i18n from "./i18n";
 
 /* Router */
 export const lastRoute = ref();
@@ -14,7 +14,7 @@ export const classFilter = ref(localStorage.getItem("classFilter") || "none");
 export const timetableGroups = ref(
   JSON.parse(localStorage.getItem("timetableGroups") || "[]")
 );
-export const language = ref(localStorage.getItem("lang") || "en");
+
 export const theme = ref(localStorage.getItem("theme") || "auto");
 
 watch(classFilter, (newValue) => {
@@ -24,10 +24,6 @@ watch(classFilter, (newValue) => {
 watch(timetableGroups, (newValue) => {
   localStorage.setItem("timetableGroups", JSON.stringify(newValue));
 });
-watch(language, (newValue) => {
-  localStorage.setItem("lang", newValue);
-  location.reload();
-});
 watch(theme, (newValue) => {
   localStorage.setItem("theme", newValue);
 });
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index ce17d55..1576586 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -5,9 +5,9 @@ import {
   classFilter,
   possibleTimetableGroups,
   timetableGroups,
-  language,
   theme,
 } from "../store";
+import { language } from "../i18n";
 
 // eslint-disable-next-line no-undef
 const gitHash = GITVERSION;
@@ -20,7 +20,11 @@ const gitHash = GITVERSION;
     <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
       <option value="none">{{ $t("timetable.setup.prompt") }}</option>
-      <option v-for="option in classList" :value="option" :key="option">
+      <option
+        v-for="option in classList.length > 0 ? classList : [classFilter]"
+        :value="option"
+        :key="option"
+      >
         {{ option }}
       </option>
       <option value="other">{{ $t("settings.other") }}</option>