From e654d3f96aa813f980be9351445ddaf4a776a7ea Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 13 Oct 2023 17:19:58 +0200
Subject: [PATCH] Added nanostore logic to centralise data

---
 package-lock.json                             | 38 +++++++++++++++++++
 package.json                                  |  2 +
 src/components/maps/WorldMap.astro            | 12 +++---
 src/components/maps/WorldMapOverlay.astro     | 13 +++----
 src/components/maps/overlay/SearchMarkers.vue | 19 ++++++----
 src/components/maps/worldStore.ts             | 30 +++++++++++++++
 src/types/Leaflet.ts                          | 14 +++----
 7 files changed, 98 insertions(+), 30 deletions(-)
 create mode 100644 src/components/maps/worldStore.ts

diff --git a/package-lock.json b/package-lock.json
index 6b1bacb9..915e27e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/vue": "^3.0.1",
+        "@nanostores/vue": "^0.10.0",
         "@types/leaflet": "^1.9.6",
         "@vueuse/core": "^10.5.0",
         "astro": "^3.2.0",
+        "nanostores": "^0.9.3",
         "vue": "^3.3.4"
       },
       "devDependencies": {
@@ -927,6 +929,28 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nanostores/vue": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@nanostores/vue/-/vue-0.10.0.tgz",
+      "integrity": "sha512-832RAUbzRfHPs1CdqVEwfvgB2+RD/INji4Zo8bUSEfRO2pQRMMeq479gydnohGpRaa0oNwlfKo7TGFXCghq/1g==",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@nanostores/logger": ">=0.2.3",
+        "@vue/devtools-api": ">=6.5.0",
+        "nanostores": ">=0.9.2",
+        "vue": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "@nanostores/logger": {
+          "optional": true
+        },
+        "@vue/devtools-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4046,6 +4070,20 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nanostores": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-0.9.3.tgz",
+      "integrity": "sha512-KobZjcVyNndNrb5DAjfs0WG0lRcZu5Q1BOrfTOxokFLi25zFrWPjg+joXC6kuDqNfSt9fQwppyjUBkRPtsL+8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      }
+    },
     "node_modules/napi-build-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
diff --git a/package.json b/package.json
index 8e37700d..9f2fc505 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@astrojs/vue": "^3.0.1",
+    "@nanostores/vue": "^0.10.0",
     "@types/leaflet": "^1.9.6",
     "@vueuse/core": "^10.5.0",
     "astro": "^3.2.0",
+    "nanostores": "^0.9.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 38f582b0..717e269f 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -1,12 +1,10 @@
 ---
-import type { MapMarker } from '@/types/Leaflet';
+import { allTasks } from 'nanostores';
+import { $world } from './worldStore';
 
-interface Props {
-    markers: MapMarker[];
-    players?: MapMarker;
-}
-
-const { markers, players } = Astro.props
+$world.listen(() => {})
+await allTasks()
+const { markers, players } = $world.get()
 ---
 
 <div class="world-wrapper">
diff --git a/src/components/maps/WorldMapOverlay.astro b/src/components/maps/WorldMapOverlay.astro
index cd882926..db5700db 100644
--- a/src/components/maps/WorldMapOverlay.astro
+++ b/src/components/maps/WorldMapOverlay.astro
@@ -1,13 +1,12 @@
 ---
+import { allTasks } from 'nanostores';
+import { $world } from './worldStore';
+
 import SearchMarkers from "./overlay/SearchMarkers.vue";
-import type { MapMarker } from '@/types/Leaflet';
 
-interface Props {
-    markers: MapMarker[];
-    players?: MapMarker;
-}
-
-const { markers, players } = Astro.props
+$world.listen(() => {})
+await allTasks()
+const { markers, players } = $world.get()
 ---
 
 <div class="world-overlay">
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 6936f46f..abcb51e5 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import type { MapMarker } from '@/types/Leaflet';
+import { allTasks } from 'nanostores';
+import { useStore } from '@nanostores/vue'
+import { $world, flyTo } from '../worldStore';
+
 import { useFocus, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref } from 'vue';
 
-const props = defineProps<{
-    markers?: MapMarker[],
-    players?: MapMarker,
-}>()
+$world.listen(() => {})
+await allTasks()
+
+const { markers, players, lastCoords } = useStore($world).value
 
 // Search functions
 const qInput = ref()
@@ -25,7 +28,7 @@ const shouldBeActive = computed(() => {
 const q = ref<string>("")
 
 const filteredMarkers = computed(() => {
-    return props.markers?.filter(m => {
+    return markers?.filter(m => {
         const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
 
         const queryString = new String(q.value).replace(unifier, "").toLocaleLowerCase()
@@ -46,13 +49,13 @@ whenever(shortcutKeyCombo, () => {
 })
 
 // Player geolocation
-const searchBar = ref()
 function handlePlayerTarget () {
-    // Emit event to store ? to dom ?
+    flyTo(players.markerCoords)
 }
 </script>
 
 <template>
+    {{ lastCoords }}
     <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
         <div class="input-w">
             <i class="search-icon ph-fill ph-magnifying-glass"></i>
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
new file mode 100644
index 00000000..48ac58d4
--- /dev/null
+++ b/src/components/maps/worldStore.ts
@@ -0,0 +1,30 @@
+import { deepMap, onMount, task, action } from 'nanostores'
+import type { MapCoords, MapMarker } from '../../types/Leaflet';
+
+export const $world = deepMap({
+    markers: [] as MapMarker[],
+    players: {} as MapMarker,
+    lastCoords: {
+        y: 0,
+        x: 0,
+    }
+})
+
+export const flyTo = action($world, 'fly-to', (store, coords: MapCoords) => {
+    store.setKey('lastCoords', coords)
+    return store.get()
+})
+
+// Fetch initial data
+onMount($world, () => {
+    // Fetch all markers
+    task(async () => {
+        const m = await fetch('http://localhost:4321/api/markers.json')
+        $world.setKey('markers', await m.json())
+    })
+    // Fetch all player data
+    task(async () => {
+        const p = await fetch('http://localhost:4321/api/players.json')
+        $world.setKey('players', await p.json())
+    })
+})
diff --git a/src/types/Leaflet.ts b/src/types/Leaflet.ts
index 29089e52..63d4f455 100644
--- a/src/types/Leaflet.ts
+++ b/src/types/Leaflet.ts
@@ -1,11 +1,12 @@
 export type MapMarkerGroup = "capitals" | "cities" | "towns" | "landmarks";
+export type MapCoords = {
+    x: number,
+    y: number,
+}
 
 export type MapMarker = {
     title: string,
-    markerCoords: {
-        x: number,
-        y: number,
-    }
+    markerCoords: MapCoords,
     description?: string,
     link?: string,
     group?: MapMarkerGroup,
@@ -13,10 +14,7 @@ export type MapMarker = {
 
 export type PlayerMarker = {
     title: string,
-    markerCoords: {
-        x: number,
-        y: number,
-    }
+    markerCoords: MapCoords,
     description?: string,
     link?: string,
 }