From 9003d3f65aef7587365654a9167f8e9009292a2b Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild@klavaro.se>
Date: Sat, 19 Oct 2024 11:28:11 +0200
Subject: [PATCH] rootScope service, watch lang

---
 app/scripts/components/CorpusUpdates.vue | 15 +++++++++------
 app/scripts/components/frontpage.ts      |  2 +-
 app/scripts/util.ts                      |  2 +-
 app/scripts/vue-services.ts              | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 app/scripts/vue-services.ts

diff --git a/app/scripts/components/CorpusUpdates.vue b/app/scripts/components/CorpusUpdates.vue
index 8d8adeec..eb79b04c 100644
--- a/app/scripts/components/CorpusUpdates.vue
+++ b/app/scripts/components/CorpusUpdates.vue
@@ -4,6 +4,7 @@ import { ref } from "vue"
 import moment from "moment"
 import settings from "@/settings"
 import { loc, locObj } from "@/i18n"
+import { rootScope } from "@/vue-services"
 
 // type CorpusUpdatesScope = IScope & {
 //     LIMIT: number
@@ -13,12 +14,13 @@ import { loc, locObj } from "@/i18n"
 //     toggleExpanded: (to?: boolean) => void
 // }
 
-defineProps(["lang"])
-
 const LIMIT = 5
-let recentUpdates = ref()
-let recentUpdatesFiltered = ref()
-let expanded = ref(false)
+const lang = ref(rootScope.lang)
+const recentUpdates = ref()
+const recentUpdatesFiltered = ref()
+const expanded = ref(false)
+
+rootScope.$watch("lang", (value) => (lang.value = value))
 
 if (settings.frontpage?.corpus_updates) {
     const limitDate = moment().subtract(6, "months")
@@ -42,7 +44,8 @@ function toggleExpanded(to) {
             <article v-for="corpus in recentUpdatesFiltered">
                 <time :datetime="corpus.info.Updated" class="opacity-75 float-right">{{ corpus.info.Updated }}</time>
                 <div>
-                    <strong>{{ locObj(corpus.title, lang) }}</strong> {{ loc("front_corpus_updated", lang) }}.
+                    <strong>{{ locObj(corpus.title, lang) }}</strong>
+                    {{ loc("front_corpus_updated", lang) }}.
                 </div>
             </article>
             <div v-if="recentUpdates.length > LIMIT">
diff --git a/app/scripts/components/frontpage.ts b/app/scripts/components/frontpage.ts
index 5eced9b8..579f965f 100644
--- a/app/scripts/components/frontpage.ts
+++ b/app/scripts/components/frontpage.ts
@@ -25,7 +25,7 @@ export default angular.module("korpApp").component("frontpage", {
                 <search-examples ng-if="examples" class="w-80 grow"></search-examples>
             </div>
 
-            <corpus-updates class="w-80 grow" v-props-lang="$root.lang"></corpus-updates>
+            <corpus-updates class="w-80 grow"></corpus-updates>
 
             <newsdesk ng-if="newsdeskIsEnabled" class="w-80 grow"></newsdesk>
         </div>
diff --git a/app/scripts/util.ts b/app/scripts/util.ts
index 17399a99..f2541a60 100644
--- a/app/scripts/util.ts
+++ b/app/scripts/util.ts
@@ -17,7 +17,7 @@ export const fromKeys = <K extends keyof any, T>(keys: K[], getValue: (key: K) =
     Object.fromEntries(keys.map((key) => [key, getValue(key)]))
 
 /** Mapping from service names to their TS types. */
-type ServiceTypes = {
+export type ServiceTypes = {
     $controller: IControllerService
     $http: IHttpService
     $location: LocationService
diff --git a/app/scripts/vue-services.ts b/app/scripts/vue-services.ts
new file mode 100644
index 00000000..99392c0c
--- /dev/null
+++ b/app/scripts/vue-services.ts
@@ -0,0 +1,16 @@
+/** @format */
+
+import angular, { type auto } from "angular"
+import { RootScope } from "./root-scope.types"
+import { ServiceTypes } from "./util"
+
+export let rootScope: RootScope
+
+angular.module("korpApp").run([
+    "$injector",
+    ($injector: auto.IInjectorService) => {
+        // Enhance return type of $injector.get()
+        const getService: <K extends keyof ServiceTypes>(name: K) => ServiceTypes[K] = $injector.get
+        rootScope = getService("$rootScope")
+    },
+])