From 97239b8fe0dd5b438c78f91e76df84d0bff59cb6 Mon Sep 17 00:00:00 2001
From: Marco La Rosa <m@lr.id.au>
Date: Fri, 3 Nov 2023 10:32:43 +1100
Subject: [PATCH] implement deep linking of langauges and words

commit 8d841926b10f72abf165ce6bb4c4e94f894e2154
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:58:37 2023 +1100

    deep linking related changes

commit e76e0b672791665005611bba8b7aa338165edb7b
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:55:51 2023 +1100

    trigger and await data loading before mount

    This is required for deep linking to languages and words to work. In the
    old way of dispatch the store we wouldn't know when the data was
    available and ready.

commit ee472c904f36094e3fb705910820638fcf8ec059
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:54:10 2023 +1100

    adjust layout

commit 5355d20964695f99c24be50a9d73b8a2d1d95ef8
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:53:44 2023 +1100

    revise map height for small screens

commit 7e3ec21f5b0ff861045c1a20aa5b6b57f2662f4e
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:33:12 2023 +1100

    revise home link to be languages

commit ee80ba0cc115d7cc439b5b5ce67574ad33ddf54f
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:29:12 2023 +1100

    set bounds on mamp init; cleanup

commit f82af1ff9fda1b9e763e45a97d176e0ba44b7cf3
Author: Marco La Rosa <m@lr.id.au>
Date:   Fri Nov 3 09:28:16 2023 +1100

    add routes for deep links to langauges and words
---
 src/components/Header.component.vue           |   2 +-
 src/components/HeaderMobile.component.vue     |   6 +-
 src/components/InformationPanel.component.vue | 108 +++++++++++-------
 ...InformationPanelLanguageList.component.vue |  25 +++-
 ...InformationPanelViewLanguage.component.vue |  61 ++++------
 .../InformationPanelViewWord.component.vue    |  62 +++++-----
 .../InformationPanelWordList.component.vue    |  23 +++-
 src/components/Map.component.vue              |  68 +----------
 src/components/Shell.component.vue            |  68 +++++------
 src/routes.js                                 |  23 +++-
 10 files changed, 214 insertions(+), 232 deletions(-)

diff --git a/src/components/Header.component.vue b/src/components/Header.component.vue
index 8db45d4..f501ec8 100644
--- a/src/components/Header.component.vue
+++ b/src/components/Header.component.vue
@@ -80,6 +80,6 @@ function playAll() {
     router.push({ name: "playall" });
 }
 function home() {
-    router.push({ name: "home" });
+    router.push({ name: "languages" });
 }
 </script>
diff --git a/src/components/HeaderMobile.component.vue b/src/components/HeaderMobile.component.vue
index d49485a..19ad96d 100644
--- a/src/components/HeaderMobile.component.vue
+++ b/src/components/HeaderMobile.component.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="flex flex-col">
-        <div class="flex flex-row justify-between">
+    <div class="flex flex-col space-y-4">
+        <div class="flex flex-row justify-between mt-2">
             <el-button
                 :link="true"
                 class="text-gray-600"
@@ -74,7 +74,7 @@ export default {
     },
     methods: {
         home() {
-            this.$router.push({ name: "home" }).catch(() => {});
+            this.$router.push({ name: "languages" }).catch(() => {});
         },
         showHelp() {
             this.$router.push({ name: "help" }).catch(() => {});
diff --git a/src/components/InformationPanel.component.vue b/src/components/InformationPanel.component.vue
index 1638665..e687f50 100644
--- a/src/components/InformationPanel.component.vue
+++ b/src/components/InformationPanel.component.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-col">
         <div class="text-sm text-gray-600">View by</div>
         <el-tabs v-model="activeTab" @tab-click="handleTabSelect" class="text-gray-700">
-            <el-tab-pane name="language">
+            <el-tab-pane name="languages">
                 <template #label>
                     <span
                         :class="{
@@ -13,12 +13,12 @@
                         LANGUAGE
                     </span>
                 </template>
-                <div v-if="activeTab === 'language'">
+                <div v-if="activeTab === 'languages'">
                     <information-panel-language-list-component v-if="show === 'list'" />
                     <information-panel-view-language-component v-if="show === 'language'" />
                 </div>
             </el-tab-pane>
-            <el-tab-pane label="word" name="word">
+            <el-tab-pane label="word" name="words">
                 <template #label>
                     <span
                         :class="{
@@ -28,7 +28,7 @@
                         >WORD</span
                     >
                 </template>
-                <div v-if="activeTab === 'word'">
+                <div v-if="activeTab === 'words'">
                     <information-panel-word-list-component v-if="show === 'list'" />
                     <information-panel-view-word-component v-if="show === 'word'" />
                 </div>
@@ -37,51 +37,71 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import InformationPanelLanguageListComponent from "./InformationPanelLanguageList.component.vue";
 import InformationPanelViewLanguageComponent from "./InformationPanelViewLanguage.component.vue";
 import InformationPanelWordListComponent from "./InformationPanelWordList.component.vue";
 import InformationPanelViewWordComponent from "./InformationPanelViewWord.component.vue";
+import { ref, reactive, watch, computed } from "vue";
+import { useStore } from "vuex";
+import { useRouter, useRoute } from "vue-router";
+const $store = useStore();
+const $route = useRoute();
+const $router = useRouter();
 
-export default {
-    components: {
-        InformationPanelLanguageListComponent,
-        InformationPanelViewLanguageComponent,
-        InformationPanelWordListComponent,
-        InformationPanelViewWordComponent,
-    },
-    data() {
-        return {
-            activeTab: "language",
-            show: "list",
-            language: undefined,
-        };
-    },
-    computed: {
-        selection: function () {
-            return this.$store.state.selection;
-        },
-    },
-    watch: {
-        selection: function () {
-            this.show = this.$store.state.selection.type
-                ? this.$store.state.selection.type
-                : "list";
-        },
+let activeTab = ref("languages");
+let show = ref("list");
+
+// this watcher handles loading the correct component
+//  as a result of back / forward navigation events
+watch(
+    () => $route.path,
+    () => {
+        if ($route.name === "home") $router.push("languages");
+        if ($route.path.match(/\languages/)) activeTab.value = "languages";
+        if ($route.path.match(/\/words/)) activeTab.value = "words";
+        if (["/languages", "/words"].includes($route.path)) {
+            handleTabSelect({ props: { name: $route.name } });
+        }
     },
-    methods: {
-        handleTabSelect(tab) {
-            this.$store.commit("setSelectionToDisplay", {
-                type: undefined,
-                data: undefined,
-            });
-            if (tab.props.name === "language") {
-                this.$store.commit("setLayer", "languages");
-                this.show = "list";
-            } else {
-                this.$store.commit("setLayer", "words");
-            }
-        },
+    { immediate: true }
+);
+
+// this watcher handles route updates as the user selects
+//  languages / words to interact with
+watch(
+    () => $store.state.selection,
+    () => {
+        const selection = $store.state.selection;
+        show.value = selection?.type ?? "list";
+
+        if (show.value === "list") {
+            $router.push({ path: `/${activeTab.value}` });
+        } else {
+            let name =
+                activeTab.value === "languages"
+                    ? selection.data?.properties?.name
+                    : selection.data?.name;
+            $router.push({ path: `/${activeTab.value}/${name}` });
+        }
     },
-};
+    { deep: true }
+);
+
+function handleTabSelect(tab) {
+    $router.push(`/${tab.props.name}`);
+    activeTab.value = tab.props.name;
+    setTimeout(() => {
+        $store.commit("setSelectionToDisplay", {
+            type: undefined,
+            data: undefined,
+        });
+        show.value = "list";
+        if (tab.props.name === "languages") {
+            $store.commit("setLayer", "languages");
+        } else {
+            $store.commit("setLayer", "words");
+        }
+    }, 100);
+}
 </script>
diff --git a/src/components/InformationPanelLanguageList.component.vue b/src/components/InformationPanelLanguageList.component.vue
index 3246e1e..f59da89 100644
--- a/src/components/InformationPanelLanguageList.component.vue
+++ b/src/components/InformationPanelLanguageList.component.vue
@@ -13,22 +13,39 @@
 </template>
 
 <script setup>
-import { reactive, computed } from "vue";
+import { reactive, computed, watch } from "vue";
 import { useStore } from "vuex";
-const store = useStore();
+import { useRoute } from "vue-router";
+const $store = useStore();
+const $route = useRoute();
+
+// this watcher handles language loading in response to nav events
+watch(
+    () => $route.path,
+    () => {
+        if ($route.params?.language) {
+            let language = $store.state.languages
+                .map((language) => language.properties)
+                .filter((language) => language.name === $route.params.language);
+            if (language.length) displayLanguage(language[0]);
+        }
+    },
+    { immediate: true }
+);
 
 const data = reactive({
     filter: "",
 });
 let languages = computed(() => {
     const regexp = new RegExp(data.filter, "i");
-    return store.state.languages
+    return $store.state.languages
         .map((language) => language.properties)
         .filter((language) => language.words)
         .filter((l) => l.language.name.match(regexp));
 });
+
 function displayLanguage(language) {
-    store.dispatch("loadLanguage", { code: language.code });
+    $store.dispatch("loadLanguage", { code: language.code });
 }
 </script>
 
diff --git a/src/components/InformationPanelViewLanguage.component.vue b/src/components/InformationPanelViewLanguage.component.vue
index eabb6c4..c107939 100644
--- a/src/components/InformationPanelViewLanguage.component.vue
+++ b/src/components/InformationPanelViewLanguage.component.vue
@@ -63,45 +63,34 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import RenderLanguageInformationPlayComponent from "./RenderLanguageInformationPlay.component.vue";
 import InformationPanelRenderWordComponent from "./InformationPanelRenderWord.component.vue";
 import LanguageInformationComponent from "./LanguageInformation.component.vue";
 import PlayAllWordsComponent from "./PlayAllWords.component.vue";
+import { ref, computed } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+const $store = useStore();
+const $router = useRouter();
 
-export default {
-    components: {
-        RenderLanguageInformationPlayComponent,
-        InformationPanelRenderWordComponent,
-        LanguageInformationComponent,
-        PlayAllWordsComponent,
-    },
-    data() {
-        return {
-            playAllWords: false,
-            height:
-                window.innerWidth < 768
-                    ? `${window.innerHeight - (window.innerHeight * 0.4 + 60)}px`
-                    : `${window.innerHeight - 170}px`,
-        };
-    },
-    computed: {
-        language: function () {
-            return this.$store.getters.getSelectionData();
-        },
-    },
-    methods: {
-        back() {
-            this.$store.commit("setSelectionToDisplay", {
-                type: undefined,
-                data: undefined,
-            });
-        },
-        index(word) {
-            return `${word.english}${word.indigenous}`;
-        },
-    },
-};
+let playAllWords = ref(false);
+let height = ref(
+    window.innerWidth < 768
+        ? `${window.innerHeight - (window.innerHeight * 0.4 + 60)}px`
+        : `${window.innerHeight - 170}px`
+);
+let language = computed(() => $store.getters.getSelectionData());
+function back() {
+    $router.push("/languages");
+    setTimeout(() => {
+        $store.commit("setSelectionToDisplay", {
+            type: undefined,
+            data: undefined,
+        });
+    }, 100);
+}
+function index(word) {
+    return `${word.english}${word.indigenous}`;
+}
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/InformationPanelViewWord.component.vue b/src/components/InformationPanelViewWord.component.vue
index b643e24..156a310 100644
--- a/src/components/InformationPanelViewWord.component.vue
+++ b/src/components/InformationPanelViewWord.component.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="overflow-scroll text-black" :style="{ height: height }" v-if="data">
+    <div class="overflow-scroll text-black" :style="{ height: height }">
         <div class="flex flex-col">
             <div class="flex flex-row px-2 md:my-2">
                 <div
@@ -8,7 +8,7 @@
                 >
                     <i class="fas fa-chevron-left"></i>
                 </div>
-                <div class="text-2xl">{{ data.name }}</div>
+                <div class="text-2xl">{{ selection.name }}</div>
                 <div class="flex flex-grow"></div>
             </div>
 
@@ -32,13 +32,13 @@
 
             <div v-if="playAllWords">
                 <play-all-words-component
-                    :words="data.words"
+                    :words="selection.words"
                     display="languageName"
                     @finished-playing="playAllWords = false"
                 />
             </div>
             <div v-if="!playAllWords">
-                <div v-for="(word, idx) of data.words" :key="idx" class="m-1">
+                <div v-for="(word, idx) of selection.words" :key="idx" class="m-1">
                     <information-panel-render-word-component :data="word" display="languageName" />
                 </div>
             </div>
@@ -46,40 +46,30 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import RenderLanguageInformationPlayComponent from "./RenderLanguageInformationPlay.component.vue";
 import InformationPanelRenderWordComponent from "./InformationPanelRenderWord.component.vue";
 import PlayAllWordsComponent from "./PlayAllWords.component.vue";
+import { ref, computed } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+const $store = useStore();
+const $router = useRouter();
 
-export default {
-    components: {
-        RenderLanguageInformationPlayComponent,
-        InformationPanelRenderWordComponent,
-        PlayAllWordsComponent,
-    },
-    data() {
-        return {
-            playAllWords: false,
-            height:
-                window.innerWidth < 768
-                    ? `${window.innerHeight - (window.innerHeight * 0.4 + 60)}px`
-                    : `${window.innerHeight - 170}px`,
-        };
-    },
-    computed: {
-        data: function () {
-            return this.$store.getters.getSelectionData();
-        },
-    },
-    methods: {
-        back() {
-            this.$store.commit("setSelectionToDisplay", {
-                type: undefined,
-                data: undefined,
-            });
-        },
-    },
-};
+let playAllWords = ref(false);
+let height = ref(
+    window.innerWidth < 768
+        ? `${window.innerHeight - (window.innerHeight * 0.4 + 60)}px`
+        : `${window.innerHeight - 170}px`
+);
+let selection = computed(() => $store.getters.getSelectionData());
+function back() {
+    $router.push("/words");
+    setTimeout(() => {
+        $store.commit("setSelectionToDisplay", {
+            type: undefined,
+            data: undefined,
+        });
+    }, 100);
+}
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/InformationPanelWordList.component.vue b/src/components/InformationPanelWordList.component.vue
index fddc207..0cc2882 100644
--- a/src/components/InformationPanelWordList.component.vue
+++ b/src/components/InformationPanelWordList.component.vue
@@ -13,19 +13,34 @@
 </template>
 
 <script setup>
-import { reactive, computed } from "vue";
+import { reactive, computed, watch } from "vue";
 import { useStore } from "vuex";
-const store = useStore();
+import { useRoute } from "vue-router";
+const $store = useStore();
+const $route = useRoute();
+
+// this watcher handles word loading in response to nav events
+watch(
+    () => $route.path,
+    () => {
+        if ($route.params?.word) {
+            let word = $store.state.words.filter((word) => word.name === $route.params.word);
+            if (word.length) displayWord(word[0]);
+        }
+    },
+    { immediate: true }
+);
 
 const data = reactive({
     filter: "",
 });
 let words = computed(() => {
     const regexp = new RegExp(data.filter, "i");
-    return store.state.words.filter((w) => w.name.match(regexp));
+    return $store.state.words.filter((w) => w.name.match(regexp));
 });
+
 function displayWord(word) {
-    store.dispatch("loadWord", word);
+    $store.dispatch("loadWord", word);
 }
 </script>
 
diff --git a/src/components/Map.component.vue b/src/components/Map.component.vue
index 6005af2..db771b8 100644
--- a/src/components/Map.component.vue
+++ b/src/components/Map.component.vue
@@ -7,7 +7,7 @@
                 'width-screen cursor-pointer': smallDevice,
             }"
             :style="{
-                height: smallDevice ? (selection.type ? '30vh' : '45vh') : mapHeight,
+                height: smallDevice ? (selection.type ? '30vh' : '60vh') : mapHeight,
             }"
         ></div>
         <map-layer-toggle-component
@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 import RenderWordMapPopupComponent from "components/RenderWordMapPopup.component.vue";
 import MapLayerToggleComponent from "./MapLayerToggle.component.vue";
 import ZoomToLanguageComponent from "components/ZoomToLanguage.component.vue";
@@ -155,38 +154,6 @@ export default {
         async centerMap() {
             this.map.resize();
 
-            // if (this.popup) this.popup.remove();
-            // centerCountry({ map: this.map });
-            // let position;
-            // if ("geolocation" in navigator) {
-            //     try {
-            //         position = await new Promise((resolve, reject) => {
-            //             navigator.geolocation.getCurrentPosition(
-            //                 (position) => resolve(position),
-            //                 (error) => reject(error)
-            //             );
-            //         });
-            //     } catch (error) {
-            //         centerCountry({ map: this.map });
-            //     }
-            //     // const latitude  = position.coords.latitude;
-            //     // const longitude = position.coords.longitude;
-
-            //     // Melbourne
-            //     // position = [144.948743, -37.790136];
-            //     if (position) {
-            //         position = [
-            //             position.coords.longitude,
-            //             position.coords.latitude,
-            //         ];
-            //         centerLocation({ map: this.map, position });
-            //     } else {
-            //         centerCountry({ map: this.map });
-            //     }
-            // } else {
-            //     centerCountry({ map: this.map });
-            // }
-
             centerCountry({ map: this.map });
 
             function centerCountry({ map }) {
@@ -195,14 +162,6 @@ export default {
                     [168, -8],
                 ]);
             }
-
-            // function centerLocation({ map, position }) {
-            //     map.flyTo({
-            //         center: position,
-            //         zoom: window.innerwidth < 768 ? 8 : 6,
-            //         bearing: 0,
-            //     });
-            // }
         },
         renderMap() {
             this.map = new mapboxgl.Map({
@@ -210,7 +169,10 @@ export default {
                 style: mapBoxStyle,
                 dragRotate: false,
                 touchPitch: false,
-                center: [0, 0],
+                bounds: [
+                    [96, -45],
+                    [168, -8],
+                ],
             });
             if (this.smallDevice) {
                 // this.map.addControl(new mapboxgl.FullscreenControl());
@@ -221,7 +183,7 @@ export default {
                     })
                 );
             }
-            this.debouncedCenterMap();
+            // this.debouncedCenterMap();
             this.map.on("load", () => {
                 this.addLanguageLayerSources();
                 this.renderLanguageLayers();
@@ -304,24 +266,6 @@ export default {
                 if (!this.smallDevice) {
                     this.word = { ...properties };
                 }
-
-                // const RenderWordClass = Vue.extend(RenderWordMapPopupComponent);
-                // const popupInstance = new RenderWordClass({
-                //     propsData: {
-                //         word: properties,
-                //     },
-                // });
-
-                // if (this.popup) this.popup = this.popup.remove();
-                // this.popup = new mapboxgl.Popup({
-                //     maxWidth: "none",
-                // })
-                //     .setText("popup")
-                //     .setLngLat(e.lngLat)
-                //     .addTo(this.map);
-                // .setHTML('<divid="vue-popup-content"></div>')
-                // popupInstance.$mount("#popup-content");
-                // this.popup._update();
             });
         },
         renderLanguageLayers() {
diff --git a/src/components/Shell.component.vue b/src/components/Shell.component.vue
index e29c27f..9b9664f 100644
--- a/src/components/Shell.component.vue
+++ b/src/components/Shell.component.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>
+    <div v-if="ready">
+        <!-- visible on medium sized screens and larger -->
         <div class="pt-4 px-6 hidden md:flex md:flex-col">
             <header-component />
             <div class="flex flex-row">
@@ -12,12 +13,11 @@
                 </div>
             </div>
         </div>
-        <div class="flex flex-col md:hidden w-screen h-screen">
-            <header-mobile-component class="p-4" />
-            <div
-                class="flex-grow flex flex-col space-y-4 justify-evenly my-2 px-2"
-                v-if="!selection"
-            >
+
+        <!-- visible only on small screens - hidden on medium sized screens and larger -->
+        <div class="flex flex-col space-y-4 md:hidden w-screen h-screen">
+            <header-mobile-component class="px-2" />
+            <div class="flex-grow flex flex-col space-y-4 px-2" v-if="!selection">
                 <mobile-select-language-component />
                 <mobile-select-word-component />
                 <mobile-search-for-word-language-component />
@@ -36,14 +36,14 @@
                 <information-panel-view-language-component v-if="layer === 'languages'" />
                 <information-panel-view-word-component v-if="layer === 'words'" />
             </div>
-            <div class="relative">
-                <map-component class="bottom-0 absolute" />
-            </div>
+            <map-component class="" />
         </div>
     </div>
 </template>
 
-<script>
+<script setup>
+import { loadLanguages, loadWords } from "../data-loader.service";
+
 import MapComponent from "./Map.component.vue";
 import HeaderComponent from "./Header.component.vue";
 import InformationPanelComponent from "./InformationPanel.component.vue";
@@ -55,35 +55,21 @@ import MobileSearchForWordLanguageComponent from "./MobileSearchForWordLanguage.
 import MobileSelectWordComponent from "./MobileSelectWord.component.vue";
 import InformationPanelViewLanguageComponent from "./InformationPanelViewLanguage.component.vue";
 import InformationPanelViewWordComponent from "./InformationPanelViewWord.component.vue";
+import { computed, ref, onBeforeMount } from "vue";
+import { useStore } from "vuex";
+const $store = useStore();
 
-export default {
-    components: {
-        MapComponent,
-        HeaderComponent,
-        InformationPanelComponent,
-        FooterComponent,
-        HeaderMobileComponent,
-        MobileSelectLanguageComponent,
-        MobileSelectWordComponent,
-        MobileSearchForWordLanguageComponent,
-        InformationPanelViewLanguageComponent,
-        InformationPanelViewWordComponent,
-    },
-    data() {
-        return {};
-    },
-    computed: {
-        selection: function () {
-            return this.$store.getters.getSelectionData();
-        },
-        layer: function () {
-            return this.$store.state.layer;
-        },
-    },
-    mounted() {
-        this.$store.dispatch("loadData");
-    },
-};
-</script>
+let selection = computed(() => $store.getters.getSelectionData());
+let layer = computed(() => $store.state.layer);
+let ready = ref(false);
+onBeforeMount(async () => {
+    console.time();
+    let languages = await loadLanguages();
+    $store.commit("setLanguages", languages);
 
-<style scoped lang="scss"></style>
+    let words = await loadWords();
+    $store.commit("setWords", words);
+    console.timeEnd();
+    ready.value = true;
+});
+</script>
diff --git a/src/routes.js b/src/routes.js
index fdfa53d..de99953 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -10,7 +10,28 @@ const routes = [
         path: "/",
         name: "home",
         component: ShellComponent,
-        children: [],
+        children: [
+            {
+                path: "/languages",
+                name: "languages",
+                component: ShellComponent,
+            },
+            {
+                path: "/languages/:language",
+                name: "language",
+                component: ShellComponent,
+            },
+            {
+                path: "/words",
+                name: "words",
+                component: ShellComponent,
+            },
+            {
+                path: "/words/:word",
+                name: "word",
+                component: ShellComponent,
+            },
+        ],
     },
     {
         name: "playall",