attempt #1 for navigation routing

fcamblor · fcamblor · commit ef85ad14810d · 2025-04-16T03:04:14.000+02:00
diff --git a/mobile/src/router/index.ts b/mobile/src/router/index.ts
@@ -113,11 +113,14 @@ export async function goBackOrNavigateTo(ionRouter: UseIonRouterResult, fallback
     // Calling ionRouter.back() can't be done in the same thread than router.go(-x) on iOS
     // To reproduce: navigate to schedule page from event selector screen, navigate on another tab (ex: favorites tab)
     // then click on 'back to event list screen' button in event header
-    if(isPlatform('ios') && platformRouterGoBacks < 0) {
-      setTimeout(() => { ionRouter.back(); }, 0)
-    } else {
-      ionRouter.back();
-    }
+    // if(isPlatform('ios') && platformRouterGoBacks < 0) {
+      await new Promise((resolve) => setTimeout(() => {
+        ionRouter.back();
+        setTimeout(() => resolve(null), 0);
+      }, 0));
+    // } else {
+    //   ionRouter.back();
+    // }
   // Sometimes, we might be on a tabbed page without having navigated from another context
   // Typical case: if we "refresh" the page on the schedule page, canGoBack() will return false
   // because ionic doesn't have into its (memory) history the previous page we would like to navigate to
diff --git a/mobile/src/state/useDevUtilities.ts b/mobile/src/state/useDevUtilities.ts
@@ -8,10 +8,12 @@ import {ISODatetime} from "../../../shared/type-utils";
 import {Temporal} from "temporal-polyfill";
 import {match, P} from "ts-pattern";
 import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
-import {managedRef as ref} from "@/views/vue-utils";
+import {getCurrentComponentInstancePath, managedRef as ref} from "@/views/vue-utils";
 import {ListableVoxxrinEvent} from "@/models/VoxxrinEvent";
 import {Ref} from "vue";
 import {updateLogConfigTo} from "@/services/Logger";
+import router from "@/router";
+import {useIonRouter} from "@ionic/vue";
 
 
 // if(import.meta.env.DEV) {
@@ -69,6 +71,11 @@ export function useDevUtilities() {
         window.location.reload();
     }
     (window as any).updateLogConfigTo = updateLogConfigTo;
+    (window as any).getCurrentComponentInstancePath = getCurrentComponentInstancePath;
+    (window as any)._router = router;
+
+    const ionRouter = useIonRouter();
+    (window as any)._ionRouter = ionRouter;
 }
 
 // }
diff --git a/mobile/src/state/useTabbedPageNav.ts b/mobile/src/state/useTabbedPageNav.ts
@@ -1,12 +1,13 @@
-import {onMounted, onUnmounted} from "vue";
+import {onMounted, onUnmounted, getCurrentInstance} from "vue";
 import {RouteAction, RouteDirection} from "@ionic/vue-router/dist/types/types";
 import {useIonRouter} from "@ionic/vue";
 import {
     createTypedCustomEventClass,
     TypedCustomEventData,
 } from "@/models/utils";
-import {useRouter} from "vue-router";
 import {goBackOrNavigateTo} from "@/router";
+import {getCurrentComponentInstancePath} from "@/views/vue-utils";
+import {match, P} from "ts-pattern";
 
 
 /**
@@ -52,6 +53,28 @@ const NavigationEvent = createTypedCustomEventClass<{
 }>(NavigationEventName)
 
 
+/**
+ * This map allows to declare multiple navigation callback per component 'path'
+ * because, for some (unknown) reasons, when we refresh tabbed page (like, event schedule)
+ * we have 2 instances of event-tabs component after a tab navigation:
+ * - first <event-tabs> instance when loading page
+ * - second <event-tabs> instance on first tab switch
+ *
+ * Note that this behaviour only happens on page load occuring on a tabbed page: when we navigate
+ * from event-selector screen, only a single <event-tabs> instance is created
+ *
+ * I guess this has something to do with _BaseEventPages "parent" route which is instantiated twice
+ * instead of once, in case of a parent-child route refresh
+ *
+ * Map below allows to track callback registrations on a per-component path basis (in duplicated <event-tabs> case
+ * described above, we will have a single entry in PER_COMPONENT_PATH_CALLBACKS, with an array of 2 callbacks declared)
+ * And when a navigation will be triggered, every callbacks in array will be triggered)
+ */
+type TabbedPageNavigationCallbacks = {
+  navCallback: (event: Event) => Promise<void>,
+  tabExitOrNavigateCallback: (event: Event) => Promise<void>,
+};
+const PER_COMPONENT_PATH_CALLBACKS = new Map<string, TabbedPageNavigationCallbacks[]>();
 
 export function useTabbedPageNav() {
     return {
@@ -76,44 +99,110 @@ export function useTabbedPageNav() {
         // Please, call this listeners registration whenever you open a page containing tabs, so that
         // tabbed views are able to communicate root-level navigation calls through triggerXXX hooks
         registerTabbedPageNavListeners: function(opts?: { skipNavRegistration: boolean, skipExitOrNavRegistration: boolean }) {
+            const { path: currentComponentInstancePath } = getCurrentComponentInstancePath()
+
             const ionRouter = useIonRouter();
             const startingHistoryPosition = history.state.position;
 
             const navCallback = async (event: Event) => {
+                const perComponentPathCallbacks = PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath);
+                if(!perComponentPathCallbacks) {
+                  return;
+                }
+                if(perComponentPathCallbacks[perComponentPathCallbacks.length-1].navCallback !== navCallback) {
+                  return;
+                }
+
                 if(isNavigationEvent(event)) {
                     if(event.detail.onEventCaught) {
                         await event.detail.onEventCaught();
                     }
 
                     // This navigate() call will happen inside tabbed page context
                     ionRouter.navigate(event.detail.url, event.detail.routerDirection, event.detail.routerAction);
+
+                    perComponentPathCallbacks.pop();
+                    if(perComponentPathCallbacks.length) {
+                      await new Promise((resolve) => {
+                        setTimeout(async () => {
+                          await perComponentPathCallbacks[perComponentPathCallbacks.length-1].navCallback(event);
+                          resolve(null);
+                        }, 0);
+                      });
+                    } else {
+                      PER_COMPONENT_PATH_CALLBACKS.delete(currentComponentInstancePath);
+                    }
                 } else {
                     throw new Error(`Unexpected event type ${event.type} in tabbed-page-navigation callback registration !`)
                 }
             }
             const tabExitOrNavigateCallback = async (event: Event) => {
+                const perComponentPathCallbacks = PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath);
+                if(!perComponentPathCallbacks) {
+                  return;
+                }
+                if(perComponentPathCallbacks[perComponentPathCallbacks.length-1].tabExitOrNavigateCallback !== tabExitOrNavigateCallback) {
+                  return;
+                }
+
                 if(isTabExitOrNavigateEvent(event)) {
                     const routerGoBacks = startingHistoryPosition - history.state.position;
                     await goBackOrNavigateTo(ionRouter, event.detail.url, routerGoBacks, event.detail.routerDirection, event.detail.onEventCaught);
+
+                    perComponentPathCallbacks.pop();
+                    if(perComponentPathCallbacks.length) {
+                      await new Promise(async (resolve) => {
+                        await perComponentPathCallbacks[perComponentPathCallbacks.length-1].tabExitOrNavigateCallback(event);
+                        setTimeout(() => resolve(null), 0);
+                      });
+                    } else {
+                      PER_COMPONENT_PATH_CALLBACKS.delete(currentComponentInstancePath);
+                    }
                 } else {
                     throw new Error(`Unexpected event type ${event.type} in tabbed-page-navigation callback registration !`)
                 }
             }
 
+            const componentCallbacks: TabbedPageNavigationCallbacks = { navCallback, tabExitOrNavigateCallback }
+
             onMounted(() => {
+                const perComponentPathCallbacks = match(PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath))
+                  .with(P.nullish, () => {
+                    const callbacks: TabbedPageNavigationCallbacks[] = [];
+                    PER_COMPONENT_PATH_CALLBACKS.set(currentComponentInstancePath, callbacks);
+                    return callbacks;
+                  }).otherwise(callbacks => callbacks);
+
                 if(!opts?.skipNavRegistration) {
-                    window.addEventListener(NavigationEventName, navCallback);
+                    window.addEventListener(NavigationEventName, componentCallbacks.navCallback);
                 }
                 if(!opts?.skipExitOrNavRegistration) {
-                    window.addEventListener(TabExitOrNavigateEventName, tabExitOrNavigateCallback);
+                    window.addEventListener(TabExitOrNavigateEventName, componentCallbacks.tabExitOrNavigateCallback);
                 }
+
+                perComponentPathCallbacks.push(componentCallbacks);
             })
             onUnmounted(() => {
-                if(!opts?.skipNavRegistration) {
-                    window.removeEventListener(NavigationEventName, navCallback);
+                const maybePerComponentPathCallbacks = PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath);
+                if(!maybePerComponentPathCallbacks) {
+                  return;
                 }
-                if(!opts?.skipExitOrNavRegistration) {
-                    window.removeEventListener(TabExitOrNavigateEventName, tabExitOrNavigateCallback);
+
+                const componentCallbacksIndex = maybePerComponentPathCallbacks.findIndex(callbacks => callbacks === componentCallbacks);
+                if(componentCallbacksIndex !== -1) {
+                  maybePerComponentPathCallbacks.splice(componentCallbacksIndex, 1);
+
+                  if(!opts?.skipNavRegistration) {
+                    window.removeEventListener(NavigationEventName, componentCallbacks.navCallback);
+                  }
+                  if(!opts?.skipExitOrNavRegistration) {
+                    window.removeEventListener(TabExitOrNavigateEventName, componentCallbacks.tabExitOrNavigateCallback);
+                  }
+                }
+                if(maybePerComponentPathCallbacks.length === 0) {
+                  PER_COMPONENT_PATH_CALLBACKS.delete(currentComponentInstancePath);
+                } else {
+                  console.log(`remaining callbacks in component ${currentComponentInstancePath}`)
                 }
             })
         }
diff --git a/mobile/src/views/SpeakerDetailsPage.vue b/mobile/src/views/SpeakerDetailsPage.vue
@@ -10,7 +10,7 @@
       <ion-header class="stickyHeader">
         <ion-toolbar>
           <ion-button class="stickyHeader-close" shape="round" slot="start" size="small" fill="outline" @click="closeAndNavigateBack()"
-                      :aria-label="LL.Close_speaker_details()">
+                      :aria-label="LL.Close_speaker_details()" data-testid="close-speaker-details">
             <ion-icon src="/assets/icons/solid/close.svg"></ion-icon>
           </ion-button>
           <div class="speakerInfoHeader" slot="start">
diff --git a/mobile/src/views/event/SchedulePage.vue b/mobile/src/views/event/SchedulePage.vue
@@ -183,7 +183,7 @@ const { schedule: currentSchedule } = useSchedule(confDescriptor, selectedDayId)
 
 const preparingOfflineScheduleToastMessageRef = ref<string | undefined>(undefined);
 const preparingOfflineScheduleToastIsOpenRef = ref<boolean>(false);
-useOfflineEventPreparation(user, confDescriptor, currentSchedule, availableDaysRef, preparingOfflineScheduleToastMessageRef, preparingOfflineScheduleToastIsOpenRef);
+// useOfflineEventPreparation(user, confDescriptor, currentSchedule, availableDaysRef, preparingOfflineScheduleToastMessageRef, preparingOfflineScheduleToastIsOpenRef);
 
 const talkIdsRef = computed(() => {
     const schedule = toValue(currentSchedule);
diff --git a/mobile/src/views/event/_BaseEventPages.vue b/mobile/src/views/event/_BaseEventPages.vue
@@ -9,7 +9,7 @@
 import EventTabs from "@/components/events/EventTabs.vue";
 import {typesafeI18n} from "@/i18n/i18n-vue";
 import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
-import {computed, toValue} from "vue";
+import {computed, toValue, onMounted, onUnmounted, onBeforeMount, onBeforeUnmount} from "vue";
 import {areFeedbacksEnabled} from "@/models/VoxxrinConferenceDescriptor";
 import {getResolvedEventRootPathFromSpacedEventIdRef, useCurrentSpaceEventIdRef} from "@/services/Spaces";
 import {match} from "ts-pattern";
@@ -27,6 +27,9 @@ const tabs = computed(() => {
         icon: '/assets/icons/line/calendar-line.svg',
         selectedIcon: '/assets/icons/solid/calendar.svg',
     }]).concat([{
+      // TODO: Seems like we have a navigation error when hitting back button while being on speakers list (after having navigated to a speaker talk)
+      // TODO: There is a persistent background loading toaster on top of the screen which appears randomly (particularly while stopping in devtools for a long time)
+      //       => need to sort it out
       id: 'speakers', url: `${getResolvedEventRootPathFromSpacedEventIdRef(spacedEventIdRef)}/speakers`, label: LL.value.Speakers(),
       icon: '/assets/icons/line/megaphone-line.svg',
       selectedIcon: '/assets/icons/solid/megaphone.svg',
@@ -48,6 +51,12 @@ const customFontUrls = computed(() => {
     .exhaustive()
   )
 })
+
+console.log(`In _BaseEventPages::setup()`);
+onBeforeMount(() => console.log(`In _BaseEventPages::onBeforeMount`))
+onMounted(() => console.log(`In _BaseEventPages::onMounted`))
+onBeforeUnmount(() => console.log(`In _BaseEventPages::onBeforeUnmount`))
+onUnmounted(() => console.log(`In _BaseEventPages::onUnmounted`))
 </script>
 
 <style lang="scss" scoped>
diff --git a/mobile/src/views/vue-utils.ts b/mobile/src/views/vue-utils.ts
@@ -1,5 +1,6 @@
 import {LocationQueryValue, RouteLocationNormalizedLoaded} from "vue-router";
 import {
+  getCurrentInstance,
   MaybeRef,
   onUnmounted,
   Ref,
@@ -414,4 +415,20 @@ export function deferredVuefireUseCollection<SOURCES extends MultiWatchSources,
     return collectionRef;
 }
 
+export function getCurrentComponentInstancePath() {
+  let elem = getCurrentInstance();
+  const parents = [];
+
+  while(elem) {
+    parents.push(elem);
+    elem = elem.parent;
+  }
+
+  return {
+    parents,
+    path: parents.map(elem => `{type:${elem.type.name || elem.type.__name}}`).join(" > "),
+  }
+}
+
+
 export const MAX_NUMBER_OF_PARAMS_IN_FIREBASE_IN_CLAUSES = 30;
