Fix tabs not sticking on new route

This was occurring because the new path wasn't sending the Party component the current tab from the URL like the party path was.
This commit is contained in:
Justin Edmund 2023-01-29 00:23:51 -08:00
parent 5dd81d377d
commit e356c36053

View file

@ -1,4 +1,4 @@
import React, { useEffect } from 'react' import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
@ -17,6 +17,7 @@ import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import type { AxiosError } from 'axios' import type { AxiosError } from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { PageContextObj, ResponseStatus } from '~types' import type { PageContextObj, ResponseStatus } from '~types'
import { GridType } from '~utils/enums'
interface Props { interface Props {
context?: PageContextObj context?: PageContextObj
@ -33,11 +34,29 @@ const NewRoute: React.FC<Props> = ({
}: Props) => { }: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
function callback(path: string) { function callback(path: string) {
router.push(path, undefined, { shallow: true }) router.push(path, undefined, { shallow: true })
} }
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])
useEffect(() => { useEffect(() => {
if (context && context.jobs && context.jobSkills) { if (context && context.jobs && context.jobSkills) {
appState.raids = context.raids appState.raids = context.raids
@ -72,7 +91,12 @@ const NewRoute: React.FC<Props> = ({
return ( return (
<React.Fragment key={router.asPath}> <React.Fragment key={router.asPath}>
{pageHead()} {pageHead()}
<Party new={true} raids={context.sortedRaids} pushHistory={callback} /> <Party
new={true}
raids={context.sortedRaids}
pushHistory={callback}
selectedTab={selectedTab}
/>
</React.Fragment> </React.Fragment>
) )
} else return pageError() } else return pageError()