Implement query param switching
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:
parent
21f5ab8825
commit
f0d6f1f8a4
2 changed files with 49 additions and 5 deletions
|
|
@ -21,9 +21,14 @@ interface Props {
|
||||||
new?: boolean
|
new?: boolean
|
||||||
team?: Party
|
team?: Party
|
||||||
raids: Raid[][]
|
raids: Raid[][]
|
||||||
|
selectedTab: GridType
|
||||||
pushHistory?: (path: string) => void
|
pushHistory?: (path: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
selectedTab: GridType.Weapon,
|
||||||
|
}
|
||||||
|
|
||||||
const Party = (props: Props) => {
|
const Party = (props: Props) => {
|
||||||
// Set up router
|
// Set up router
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -39,6 +44,11 @@ const Party = (props: Props) => {
|
||||||
if (props.team) storeParty(props.team)
|
if (props.team) storeParty(props.team)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// Set selected tab from props
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentTab(props.selectedTab)
|
||||||
|
}, [props.selectedTab])
|
||||||
|
|
||||||
// Methods: Creating a new party
|
// Methods: Creating a new party
|
||||||
async function createParty(details?: DetailsObject) {
|
async function createParty(details?: DetailsObject) {
|
||||||
let payload = {}
|
let payload = {}
|
||||||
|
|
@ -184,17 +194,22 @@ const Party = (props: Props) => {
|
||||||
|
|
||||||
// Methods: Navigating with segmented control
|
// Methods: Navigating with segmented control
|
||||||
function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const path = [
|
||||||
|
router.asPath.split('/').filter((el) => el != '')[1],
|
||||||
|
event.target.value,
|
||||||
|
].join('/')
|
||||||
|
|
||||||
switch (event.target.value) {
|
switch (event.target.value) {
|
||||||
case 'class':
|
|
||||||
setCurrentTab(GridType.Class)
|
|
||||||
break
|
|
||||||
case 'characters':
|
case 'characters':
|
||||||
|
router.replace(path)
|
||||||
setCurrentTab(GridType.Character)
|
setCurrentTab(GridType.Character)
|
||||||
break
|
break
|
||||||
case 'weapons':
|
case 'weapons':
|
||||||
|
router.replace(path)
|
||||||
setCurrentTab(GridType.Weapon)
|
setCurrentTab(GridType.Weapon)
|
||||||
break
|
break
|
||||||
case 'summons':
|
case 'summons':
|
||||||
|
router.replace(path)
|
||||||
setCurrentTab(GridType.Summon)
|
setCurrentTab(GridType.Summon)
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
|
|
@ -264,4 +279,6 @@ const Party = (props: Props) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Party.defaultProps = defaultProps
|
||||||
|
|
||||||
export default Party
|
export default Party
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
@ -12,9 +12,11 @@ import generateTitle from '~utils/generateTitle'
|
||||||
import organizeRaids from '~utils/organizeRaids'
|
import organizeRaids from '~utils/organizeRaids'
|
||||||
import setUserToken from '~utils/setUserToken'
|
import setUserToken from '~utils/setUserToken'
|
||||||
import api from '~utils/api'
|
import api from '~utils/api'
|
||||||
|
import { GridType } from '~utils/enums'
|
||||||
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||||
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
|
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
|
||||||
|
import { useQueryState } from 'next-usequerystate'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
party: Party
|
party: Party
|
||||||
|
|
@ -35,6 +37,27 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
|
||||||
const locale =
|
const locale =
|
||||||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
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(() => {
|
useEffect(() => {
|
||||||
persistStaticData()
|
persistStaticData()
|
||||||
}, [persistStaticData])
|
}, [persistStaticData])
|
||||||
|
|
@ -48,7 +71,11 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Party team={props.party} raids={props.sortedRaids} />
|
<Party
|
||||||
|
team={props.party}
|
||||||
|
raids={props.sortedRaids}
|
||||||
|
selectedTab={selectedTab}
|
||||||
|
/>
|
||||||
<Head>
|
<Head>
|
||||||
{/* HTML */}
|
{/* HTML */}
|
||||||
<title>
|
<title>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue