From 9232e70bcad9cafb292c4afcd5d36dc33bcb80ce Mon Sep 17 00:00:00 2001
From: Neil Castelino <neil.fl93@gmail.com>
Date: Mon, 19 Feb 2024 22:02:11 -0500
Subject: [PATCH] Use pinia to initialize config from backend

---
 frontend/src/App.vue                         |  8 +++++---
 frontend/src/components/ApproximateMap.vue   | 13 ++++++-------
 frontend/src/composables/useMaptilerToken.ts | 19 -------------------
 frontend/src/stores/config.ts                | 20 ++++++++++++++++++++
 4 files changed, 31 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/composables/useMaptilerToken.ts
 create mode 100644 frontend/src/stores/config.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 92b5f96..25d4a4c 100644
--- a/frontend/src/App.vue
+++ b/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 {
diff --git a/frontend/src/components/ApproximateMap.vue b/frontend/src/components/ApproximateMap.vue
index 31ddb13..7621de5 100644
--- a/frontend/src/components/ApproximateMap.vue
+++ b/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>
diff --git a/frontend/src/composables/useMaptilerToken.ts b/frontend/src/composables/useMaptilerToken.ts
deleted file mode 100644
index 1673686..0000000
--- a/frontend/src/composables/useMaptilerToken.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-
-import { getMaptilerToken } from '@/composables/useFetch';
-
-const maptilerToken: Ref<string> = ref("");
-
-export const useMaptilerToken = async () : Promise<string> => {
-  if (maptilerToken.value !== "") {
-    return maptilerToken.value;
-  }
-
-  // TODO: error?
-  const { data, error } = await getMaptilerToken();
-  maptilerToken.value = data.value;
-
-  return maptilerToken.value;
-};
-
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
new file mode 100644
index 0000000..a042ed4
--- /dev/null
+++ b/frontend/src/stores/config.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,
+  };
+});