PB-2036: fixing store / URL synchronisation

- Issue: when changing the state through actions, the URL would not be updated.

- Cause: when migrating to Pinia, we no longer had a global watch on mutations, instead they are defined by store, and we only checked on the app Readyness store.

- Fix : (ugly) we subscribe every store that is needed.

- New Issue: apparently we also broke the legacy parser.

Author: ltkum

packages/viewer/src/router/index.ts

@@ -16,6 +16,7 @@ import EmbedView from '@/views/EmbedView.vue'
 import LegacyParamsView from '@/views/LegacyParamsView.vue'
 import MapView from '@/views/MapView.vue'
 import PrintView from '@/views/PrintView.vue'
+import storeSyncRouterPlugin from '@/router/storeSync'
 
 const history = createWebHashHistory()
 
@@ -90,6 +91,6 @@ if (IS_TESTING_WITH_CYPRESS) {
 appReadinessRouterPlugin(router)
 legacyPermalinkRouterPlugin(router)
 // WIP on it to make it work again, disabling it in the meantime
-// storeSyncRouterPlugin(router)
+storeSyncRouterPlugin(router)
 
 export default router

packages/viewer/src/router/storeSync/storeSync.routerPlugin.ts

@@ -1,3 +1,4 @@
+import type { Store } from 'pinia'
 import type { LocationQuery, RouteLocationNormalizedGeneric, Router } from 'vue-router'
 
 import log, { LogPreDefinedColor } from '@swissgeo/log'
@@ -14,7 +15,17 @@ import UrlParamConfig, {
 } from '@/router/storeSync/UrlParamConfig.class'
 import { MAP_VIEWS } from '@/router/viewNames'
 import useAppStore from '@/store/modules/app'
+import useCesiumStore from '@/store/modules/cesium'
+import useDebugStore from '@/store/modules/debug'
+import useGeolocationStore from '@/store/modules/geolocation'
+import useI18nStore from '@/store/modules/i18n'
+import useLayersStore from '@/store/modules/layers'
+import usePositionStore from '@/store/modules/position'
+import usePrintStore from '@/store/modules/print'
+import useSearchStore from '@/store/modules/search'
 import useShareStore from '@/store/modules/share'
+import useTopicsStore from '@/store/modules/topics'
+import useUIStore from '@/store/modules/ui'
 
 export const FAKE_URL_CALLED_AFTER_ROUTE_CHANGE: string = '/tell-cypress-route-has-changed'
 const watchedActions: string[] = [
@@ -155,6 +166,8 @@ function urlQueryWatcher(
             // to avoid changing the store value for no reason.
             !(queryValue === undefined && storeValue === undefined)
         ) {
+            console.error('WE ARE OBVIOUSLY GOING IN THERE query : ', queryValue)
+            console.error('WE ARE OBVIOUSLY GOING IN THERE store : ', storeValue)
             // dispatching URL value to the store
             log.debug({
                 title: 'Router store plugin / urlQueryWatcher',
@@ -229,7 +242,6 @@ function urlQueryWatcher(
             })
         })
     }
-
     if (requireQueryUpdate) {
         log.debug({
             title: 'Router store plugin / urlQueryWatcher',
@@ -266,7 +278,19 @@ function initialUrlQueryWatcher(to: RouteLocationNormalizedGeneric, router: Rout
  * parameter when on the MapView.
  */
 const storeSyncRouterPlugin: RouterPlugin = (router): void => {
-    let unsubscribeStoreMutation: () => void
+
+    let unsubscribeAppReadyMutation: () => void
+    let unsubscribeCesiumMutation: () => void
+    let unsubscribeDebugMutation: () => void
+    let unsubscribeGeolocationMutation: () => void
+    let unsubscribeI18nMutation: () => void
+    let unsubscribeLayerMutation: () => void
+    let unsubscribePositionMutation: () => void
+    let unsubscribePrintMutation: () => void
+    let unsubscribeSearchMutation: () => void
+    let unsubscribeTopicMutation: () => void
+    let unsubscribeUIMutation: () => void
+
     router.beforeEach(
         (to: RouteLocationNormalizedGeneric, from: RouteLocationNormalizedGeneric) => {
             log.debug({
@@ -291,13 +315,36 @@ const storeSyncRouterPlugin: RouterPlugin = (router): void => {
                     messages: [`leaving the map view`, from, to],
                 })
                 // leaving MapView make sure to unsubscribe the store mutation
-                if (unsubscribeStoreMutation) {
+                if (unsubscribeAppReadyMutation) {
                     log.info({
                         title: 'Router store plugin/beforeEach',
                         titleColor: LogPreDefinedColor.Rose,
                         messages: [`Leaving ${to.name}, unregister store mutation watcher`],
                     })
-                    unsubscribeStoreMutation()
+                    unsubscribeAppReadyMutation()
+                    if (
+                        unsubscribePositionMutation &&
+                        unsubscribeDebugMutation &&
+                        unsubscribeTopicMutation &&
+                        unsubscribeLayerMutation &&
+                        unsubscribeSearchMutation &&
+                        unsubscribeUIMutation &&
+                        unsubscribeI18nMutation &&
+                        unsubscribeCesiumMutation &&
+                        unsubscribeGeolocationMutation &&
+                        unsubscribePrintMutation
+                    ) {
+                            unsubscribePositionMutation()
+                            unsubscribeDebugMutation()
+                            unsubscribeTopicMutation()
+                            unsubscribeLayerMutation()
+                            unsubscribeSearchMutation()
+                            unsubscribeUIMutation()
+                            unsubscribeI18nMutation()
+                            unsubscribeCesiumMutation()
+                            unsubscribeGeolocationMutation()
+                            unsubscribePrintMutation()
+                        }
                     retVal = undefined
                 }
             } else if (appStore.isReady) {
@@ -342,20 +389,51 @@ const storeSyncRouterPlugin: RouterPlugin = (router): void => {
     // which was LEGACY. By moving this subscription to the after Each loop, we ensure the 'currentRoute'
     // is always set to MAPVIEW, avoiding a lock of the viewer.
     router.afterEach((to: RouteLocationNormalizedGeneric) => {
+
+        function storeSubscription(store: Store, subscription: () => void) : void {
+            subscription = store.$onAction(({after, name, args}) => {
+                // we need to activate the watcher after the action has been completed
+                after(() => {
+                    storeMutationWatcher(name, args, router)
+                })
+            })
+        }
         if (
             typeof to.name === 'string' &&
             MAP_VIEWS.includes(to.name) &&
-            !unsubscribeStoreMutation
+            !unsubscribeAppReadyMutation
         ) {
             log.info({
                 title: 'Router store plugin/afterEach',
                 titleColor: LogPreDefinedColor.Rose,
                 messages: [`MapView entered, register store mutation watcher`],
             })
             const appStore = useAppStore()
+            const cesiumStore = useCesiumStore()
+            const debugStore = useDebugStore()
+            const geolocationStore = useGeolocationStore()
+            const i18nStore = useI18nStore()
+            const layerStore = useLayersStore()
+            const positionStore = usePositionStore()
+            const printStore = usePrintStore()
+            const searchStore = useSearchStore()
+            const topicStore = useTopicsStore()
+            const uiStore = useUIStore()
 
+            function applyAllSubscriptions() {
+                storeSubscription(cesiumStore, unsubscribeCesiumMutation)
+                storeSubscription(debugStore, unsubscribeDebugMutation)
+                storeSubscription(geolocationStore, unsubscribeGeolocationMutation)
+                storeSubscription(i18nStore, unsubscribeI18nMutation)
+                storeSubscription(layerStore, unsubscribeLayerMutation)
+                storeSubscription(positionStore, unsubscribePositionMutation)
+                storeSubscription(printStore, unsubscribePrintMutation)
+                storeSubscription(searchStore, unsubscribeSearchMutation)
+                storeSubscription(topicStore, unsubscribeTopicMutation)
+                storeSubscription(uiStore, unsubscribeUIMutation)
+            }
             // listening to store mutation to update URL
-            unsubscribeStoreMutation = appStore.$onAction(({ name, args }) => {
+            unsubscribeAppReadyMutation = appStore.$onAction(({ name, args }) => {
                 if (name === 'setAppIsReady') {
                     // If the app was not yet ready after entering the map view, we need to
                     // trigger the initial urlQuery watcher otherwise we have a blank application.
@@ -364,9 +442,16 @@ const storeSyncRouterPlugin: RouterPlugin = (router): void => {
                         titleColor: LogPreDefinedColor.Rose,
                         messages: [`App is ready, trigger initial URL query watcher`],
                     })
+                    applyAllSubscriptions()
                     initialUrlQueryWatcher(to, router)
                 } else if (appStore.isReady) {
+                    console.error('DO WE EVEN SET THIS THING ?')
+                    // here, we need to set up the store mutation watcher for all stores.
+
+
+                    applyAllSubscriptions()
                     storeMutationWatcher(name, args, router)
+
                 }
             })
 
@@ -382,6 +467,7 @@ const storeSyncRouterPlugin: RouterPlugin = (router): void => {
                         `MapView entered, while app was already ready ! Trigger initial URL query watcher`,
                     ],
                 })
+                applyAllSubscriptions()
                 initialUrlQueryWatcher(to, router)
             }
         }