Lift up selected language

arches_lingo/src/arches_lingo/App.vue

@@ -9,24 +9,30 @@ import { useToast } from "primevue/usetoast";
 import {
     ANONYMOUS,
     DEFAULT_ERROR_TOAST_LIFE,
+    ENGLISH,
     ERROR,
     USER_KEY,
+    selectedLanguageKey,
 } from "@/arches_lingo/constants.ts";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
 import { fetchUser } from "@/arches_lingo/api.ts";
-
-import type { User } from "@/arches_lingo/types.ts";
-
 import PageHeader from "@/arches_lingo/components/header/PageHeader.vue";
 import SideNav from "@/arches_lingo/components/sidenav/SideNav.vue";
 
+import type { Ref } from "vue";
+import type { Language } from "@/arches/types";
+import type { User } from "@/arches_lingo/types";
+
 const user = ref<User | null>(null);
 const setUser = (userToSet: User | null) => {
     user.value = userToSet;
 };
 provide(USER_KEY, { user, setUser });
 
+const selectedLanguage: Ref<Language> = ref(ENGLISH);
+provide(selectedLanguageKey, selectedLanguage);
+
 const router = useRouter();
 const route = useRoute();
 const toast = useToast();

arches_lingo/src/arches_lingo/components/tree/TreeRow.vue

@@ -23,7 +23,7 @@ const rowLabel = (data: Labellable) => {
     if (!data) {
         return "";
     }
-    const unstyledLabel = bestLabel(data, selectedLanguage.value.code).value;
+    const unstyledLabel = bestLabel(data, selectedLanguage?.value?.code).value;
     if (!filterValue.value) {
         return unstyledLabel;
     }

arches_lingo/src/arches_lingo/pages/ConceptDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref } from "vue";
+import { inject, provide, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
@@ -9,20 +9,19 @@ import ProgressSpinner from "primevue/progressspinner";
 import {
     displayedRowKey,
     selectedLanguageKey,
-    ENGLISH,
 } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
 import { bestLabel, dataIsConcept } from "@/arches_lingo/utils.ts";
 import ConceptTree from "@/arches_lingo/components/tree/ConceptTree.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
-import type { Labellable } from "@/arches_lingo/types.ts";
+import type { Labellable } from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
 const router = useRouter();
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 
-// TODO: lift some of this state up?
 const displayedRow: Ref<Labellable | null> = ref(null);
 const setDisplayedRow = (val: Labellable | null) => {
     displayedRow.value = val;
@@ -35,9 +34,6 @@ const setDisplayedRow = (val: Labellable | null) => {
 };
 // @ts-expect-error vue-tsc doesn't like arbitrary properties here
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
-
-const selectedLanguage: Ref<Language> = ref(ENGLISH);
-provide(selectedLanguageKey, selectedLanguage);
 </script>
 
 <template>