Merge pull request #109 from earthrise-media/urls-replace-state

Fix stateful URLs
earthrise-media · Dec 1, 2023 · 6cc31c6 · 6cc31c6
2 parents a30c29d + 88a4a19
commit 6cc31c6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 13 deletions.
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
@@ -27,9 +27,6 @@ onMounted(() => {
   cropYieldsStore.load()
   cropInformationStore.load()
 
-  // initialize so pages load
-  filtersStore.selectedCrop = filtersStore.availableCrops[0]
-
   window.addEventListener('resize', documentHeight)
   documentHeight
 })

diff --git a/vacs-map-app/src/main.js b/vacs-map-app/src/main.js
@@ -14,6 +14,8 @@ import QueryPlugin from '@/store-plugins/query'
 import { getActivePinia } from 'pinia'
 
 const app = createApp(App)
+app.use(createPinia())
+getActivePinia().use(QueryPlugin)
 
 const routes = [
   { path: '/', component: LandingPage },
@@ -30,8 +32,5 @@ const router = VueRouter.createRouter({
   routes // short for `routes: routes`
 })
 
-app.use(createPinia())
 app.use(router)
 app.mount('#app')
-
-getActivePinia().use(QueryPlugin)
diff --git a/vacs-map-app/src/store-plugins/query.js b/vacs-map-app/src/store-plugins/query.js
@@ -16,11 +16,6 @@ const toPersist = [
     key: 'selectedModel',
     outputKey: 'model'
   },
-  {
-    store: 'mapExplore',
-    key: 'selectedMap',
-    outputKey: 'map'
-  }
 ]
 
 const getParams = (pinia) => {
@@ -63,7 +58,7 @@ export default ({ pinia, store }) => {
     if (Object.keys(params).length > 0) {
       if (window) {
         const newUrl = location.hash.split('?')[0] + `?${qs.stringify(params)}`
-        window.history.replaceState(null, '', newUrl)
+        window.history.replaceState({ ...window.history.state }, '', newUrl)
       }
     }
   })

diff --git a/vacs-map-app/src/stores/filters.js b/vacs-map-app/src/stores/filters.js
@@ -55,7 +55,9 @@ export const useFiltersStore = defineStore('filters', () => {
           .map((k) => k.split('_').slice(2).join('_'))
       )
     ).sort()
-    selectedModel.value = availableModels.value[0]
+    if (!selectedModel.value) {
+      selectedModel.value = availableModels.value[0]
+    }
   })
 
   const cropInformationStore = useCropInformationStore()