refactor(frontend): router refactoring

1 files changed, 29 insertions, 42 deletions

diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index b94e020072..c95c74aef3 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:duration="200"
 	tag="div" :class="$style.tabs"
 >
-	<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i - 1 }">
+	<div v-for="(tab, i) in tabs" :key="tab.fullPath" :class="$style.tab" :style="{ '--i': i - 1 }">
 		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
 		<div :class="$style.tabFg" @click.stop="back()">
 			<div v-if="i > 0" :class="$style.tabMenu">
@@ -41,10 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import type { Router, Resolved, RouteDef } from '@/router.js';
+import { inject, provide, shallowRef } from 'vue';
+import type { Router } from '@/router.js';
 import { prefer } from '@/preferences.js';
-import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
@@ -63,26 +62,36 @@ const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
 const tabs = shallowRef([{
-	key: router.getCurrentPath(),
-	path: router.getCurrentPath(),
-	route: router.current.route.path,
+	fullPath: router.getCurrentFullPath(),
+	routePath: router.current.route.path,
 	component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
 	props: router.current.props,
 }]);
 
-function onChange({ resolved }) {
+function mount() {
 	const currentTab = tabs.value[tabs.value.length - 1];
-	const route = resolved.route.path;
+	tabs.value = [currentTab];
+}
+
+function back() {
+	const prev = tabs.value[tabs.value.length - 2];
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
+	router.replace(prev.fullPath);
+}
+
+router.useListener('change', ({ resolved }) => {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	const routePath = resolved.route.path;
 	if (resolved == null || 'redirect' in resolved.route) return;
-	if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
-	const fullPath = router.getCurrentPath();
+	if (resolved.route.path === currentTab.routePath && deepEqual(resolved.props, currentTab.props)) return;
+	const fullPath = router.getCurrentFullPath();
 
-	if (tabs.value.some(tab => tab.route === route && deepEqual(resolved.props, tab.props))) {
+	if (tabs.value.some(tab => tab.routePath === routePath && deepEqual(resolved.props, tab.props))) {
 		const newTabs = [];
 		for (const tab of tabs.value) {
 			newTabs.push(tab);
 
-			if (tab.route === route && deepEqual(resolved.props, tab.props)) {
+			if (tab.routePath === routePath && deepEqual(resolved.props, tab.props)) {
 				break;
 			}
 		}
@@ -93,45 +102,23 @@ function onChange({ resolved }) {
 	tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
 		...tabs.value.slice(1),
 		{
-			key: fullPath,
-			path: fullPath,
-			route,
+			fullPath: fullPath,
+			routePath,
 			component: resolved.route.component,
 			props: resolved.props,
 		},
 	] : [...tabs.value, {
-		key: fullPath,
-		path: fullPath,
-		route,
+		fullPath: fullPath,
+		routePath,
 		component: resolved.route.component,
 		props: resolved.props,
 	}];
-}
+});
 
-function onReplace({ path }) {
+router.useListener('replace', ({ fullPath }) => {
 	const currentTab = tabs.value[tabs.value.length - 1];
-	console.log('replace', currentTab.path, path);
-	currentTab.path = path;
+	currentTab.fullPath = fullPath;
 	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1), currentTab];
-}
-
-function mount() {
-	const currentTab = tabs.value[tabs.value.length - 1];
-	tabs.value = [currentTab];
-}
-
-function back() {
-	const prev = tabs.value[tabs.value.length - 2];
-	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
-	router.replace(prev.path);
-}
-
-router.addListener('replace', onReplace);
-router.addListener('change', onChange);
-
-onBeforeUnmount(() => {
-	router.removeListener('replace', onReplace);
-	router.removeListener('change', onChange);
 });
 </script>