Use pinia to initialize config from backend

Author: TwistTheNeil

frontend/src/App.vue

@@ -8,17 +8,19 @@
 <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue';
 import { RouterView } from 'vue-router';
-import { getMaptilerToken } from './composables/useFetch';
 import { useRoute } from 'vue-router';
 
-import { useMaxmindDataStore } from './stores/maxmindDataStore';
+import { useConfigStore } from '@/stores/config';
+import { useMaxmindDataStore } from '@/stores/maxmindDataStore';
 
 const route = useRoute();
 const maxmindDataStore = useMaxmindDataStore();
+const configStore = useConfigStore();
 const ready = ref(false);
 
 onBeforeMount(async () => {
-  await getMaptilerToken();
+  await configStore.$reset();
+
   if (!route.query.address || route.query.address === "") {
     await maxmindDataStore.$reset();
   } else {

frontend/src/components/ApproximateMap.vue

@@ -8,21 +8,20 @@
   import maplibregl from 'maplibre-gl';
   import { storeToRefs } from 'pinia';
 
-  import { useMaptilerToken } from '@/composables/useMaptilerToken';
+  import { useConfigStore } from '@/stores/config';
   import { useMaxmindDataStore } from '@/stores/maxmindDataStore';
 
+  const configStore = useConfigStore();
+  const { maptilerToken } = storeToRefs(configStore);
   const maxmindDataStore = useMaxmindDataStore();
   const { data } = storeToRefs(maxmindDataStore);
 
   const center = computed(() => ({ lng: data.value!.Location.Longitude, lat: data.value!.Location.Latitude }));
 
   const updateMap = async () => {
-    // TODO: move this out? i don't like it being called on every update
-    // currently error if we move it out of `onMounted` specifically
-    const maptilerToken = await useMaptilerToken();
     const map = new maplibregl.Map({
       container: 'map',
-      style: `https://api.maptiler.com/maps/streets/style.json?key=${maptilerToken}`,
+      style: `https://api.maptiler.com/maps/streets/style.json?key=${maptilerToken.value}`,
       center: center.value,
       zoom: 10,
     });
@@ -32,8 +31,8 @@
       .addTo(map);
   };
 
-  onMounted(() => updateMap());
-  onUpdated(() => updateMap());
+  onMounted(updateMap);
+  onUpdated(updateMap);
 </script>
 
 <style>

frontend/src/composables/useMaptilerToken.ts

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { defineStore } from 'pinia';
+
+import { getMaptilerToken } from '@/composables/useFetch';
+
+export const useConfigStore = defineStore('config', () => {
+  const maptilerToken: Ref<string> = ref('');
+
+  async function $reset() {
+    // TODO: error?
+    const { data, error } = await getMaptilerToken();
+    maptilerToken.value = data.value;
+  };
+
+  return {
+    maptilerToken,
+    $reset,
+  };
+});