persist userpage switcher state

ppy-sb · Dec 18, 2024 · e9f90c2 · e9f90c2
1 parent e492d17
commit e9f90c2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/src/pages/user/[handle].vue b/src/pages/user/[handle].vue
@@ -3,6 +3,8 @@ import { useIntersectionObserver } from '@vueuse/core'
 import { UserRole } from '~/def/user'
 import userpageStore from '~/store/userpage'
 import { useSession } from '~/store/session'
+import type { Mode, Ruleset } from '~/def'
+import type { LeaderboardRankingSystem } from '~/def/common'
 
 definePageMeta({
   alias: [
@@ -12,12 +14,17 @@ definePageMeta({
   ],
 })
 
-const app = useNuxtApp()
 const { t } = useI18n()
-const page = userpageStore()
+const app = useNuxtApp()
 const h = useRequestURL()
-await page.init()
 const session = useSession()
+const page = userpageStore()
+
+await page.init({
+  mode: h.searchParams.has('mode') ? h.searchParams.get('mode') as Mode : undefined,
+  ruleset: h.searchParams.has('ruleset') ? h.searchParams.get('ruleset') as Ruleset : undefined,
+  rankingSystem: h.searchParams.has('rank') ? h.searchParams.get('rank') as LeaderboardRankingSystem : undefined,
+})
 
 const switcherState = computed(() => `${page.switcher.mode} - ${page.switcher.ruleset} - ${page.switcher.rankingSystem}`)
 const userWithAppName = computed(() => `${page.user?.name} - ${app.$i18n.t('server.name')}`)

diff --git a/src/store/userpage.ts b/src/store/userpage.ts
@@ -1,6 +1,9 @@
 import type { inferRouterError, inferRouterOutputs } from '@trpc/server'
 import { defineStore } from 'pinia'
 import type { WatchStopHandle } from 'vue'
+import type { LeaderboardRankingSystem } from '../def/common'
+import type { RouteLocationRaw } from '#vue-router'
+import { type SwitcherPropType } from '~/composables/useSwitcher'
 import { Mode, Ruleset } from '~/def'
 import type { AppRouter } from '~/server/trpc/routers'
 
@@ -11,6 +14,7 @@ export default defineStore('userpage', () => {
   const { hasRuleset } = useAdapterConfig()
 
   const app = useNuxtApp()
+  const router = useRouter()
 
   const error = shallowRef<{ message: string } | null>(null)
   const user = shallowRef<RouterOutput['user']['userpage'] | null>(null)
@@ -30,7 +34,7 @@ export default defineStore('userpage', () => {
 
   let dispose: WatchStopHandle[] = []
 
-  async function init() {
+  async function init(_initSwitcher: SwitcherPropType<LeaderboardRankingSystem>) {
     dispose.forEach(cb => cb())
 
     const route = useRoute('user-handle')
@@ -40,7 +44,7 @@ export default defineStore('userpage', () => {
       })
       user.value = u
 
-      setSwitcher(u.preferredMode)
+      setSwitcher(_initSwitcher || u.preferredMode)
       currentStatistic.value = _computeStatistic()
       currentRankingSystem.value = _computeRankingSystem()
       error.value = null
@@ -49,10 +53,21 @@ export default defineStore('userpage', () => {
         watch([
           () => switcher.mode,
           () => switcher.ruleset,
-        ], refresh),
+        ], () => {
+          currentStatistic.value = _computeStatistic()
+          currentRankingSystem.value = _computeRankingSystem()
+        }),
         watch(() => switcher.rankingSystem, () => {
           currentRankingSystem.value = _computeRankingSystem()
         }),
+
+        watch(switcher, () => {
+          const l = window.location
+          const r = router.resolve(createRoute(switcher))
+
+          const rewrite = l.origin + r.fullPath
+          history.pushState({}, '', rewrite)
+        }),
       ]
     }
     catch (e) {
@@ -82,6 +97,18 @@ export default defineStore('userpage', () => {
     }
   }
 
+  function createRoute(i: SwitcherPropType<LeaderboardRankingSystem>) {
+    return {
+      name: 'user-handle',
+      params: useRoute('user-handle').params,
+      query: {
+        rank: i.rankingSystem,
+        ruleset: i.ruleset,
+        mode: i.mode,
+      },
+    } as RouteLocationRaw
+  }
+
   return {
     refresh,
     dispose,
@@ -92,5 +119,6 @@ export default defineStore('userpage', () => {
     setSwitcher,
     currentStatistic,
     currentRankingSystem,
+    createRoute,
   }
 })