granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement query param switching

Browse source 
Adding /characters, /weapons, or /summons will direct you to that tab by default, with /weapons as the default.

Clicking the segmented controller replaces the URL with the corresponding path, but doesn't push the navigation stack
This commit is contained in:
Justin Edmund 2023-01-14 12:23:03 -08:00
parent 21f5ab8825
commit f0d6f1f8a4
2 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
components/Party/index.tsx
View file

@ -21,9 +21,14 @@ interface Props {
new?: boolean
team?: Party
raids: Raid[][]
selectedTab: GridType
pushHistory?: (path: string) => void
}
const defaultProps = {
selectedTab: GridType.Weapon,
}
const Party = (props: Props) => {
// Set up router
const router = useRouter()
@ -39,6 +44,11 @@ const Party = (props: Props) => {
if (props.team) storeParty(props.team)
}, [])
// Set selected tab from props
useEffect(() => {
setCurrentTab(props.selectedTab)
}, [props.selectedTab])
// Methods: Creating a new party
async function createParty(details?: DetailsObject) {
let payload = {}
@ -184,17 +194,22 @@ const Party = (props: Props) => {
// Methods: Navigating with segmented control
function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
const path = [
router.asPath.split('/').filter((el) => el != '')[1],
event.target.value,
].join('/')
switch (event.target.value) {
case 'class':
setCurrentTab(GridType.Class)
break
case 'characters':
router.replace(path)
setCurrentTab(GridType.Character)
break
case 'weapons':
router.replace(path)
setCurrentTab(GridType.Weapon)
break
case 'summons':
router.replace(path)
setCurrentTab(GridType.Summon)
break
default:
@ -264,4 +279,6 @@ const Party = (props: Props) => {
)
}
Party.defaultProps = defaultProps
export default Party

31
pages/p/[party].tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
@ -12,9 +12,11 @@ import generateTitle from '~utils/generateTitle'
import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken'
import api from '~utils/api'
import { GridType } from '~utils/enums'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
import { useQueryState } from 'next-usequerystate'
interface Props {
party: Party
@ -35,6 +37,27 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
// URL state
const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
useEffect(() => {
const parts = router.asPath.split('/')
const tab = parts[parts.length - 1]
switch (tab) {
case 'characters':
setSelectedTab(GridType.Character)
break
case 'weapons':
setSelectedTab(GridType.Weapon)
break
case 'summons':
setSelectedTab(GridType.Summon)
break
}
}, [router.asPath])
// Static data
useEffect(() => {
persistStaticData()
}, [persistStaticData])
@ -48,7 +71,11 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
return (
<React.Fragment>
<Party team={props.party} raids={props.sortedRaids} />
<Party
team={props.party}
raids={props.sortedRaids}
selectedTab={selectedTab}
/>
<Head>
{/* HTML */}
<title>