feat: change active tab from query in page account

:%s
This commit is contained in:
lytrankieio123
2021-09-14 18:18:06 +07:00
parent 9a385a3f14
commit 24bacba766

View File

@@ -3,17 +3,40 @@ import s from './AccountNavigation.module.scss'
import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem' import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane' import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
import { useRouter } from "next/router"
interface AccountNavigationProps { interface AccountNavigationProps {
defaultActiveIndex: number; defaultActiveIndex: number;
children: React.ReactNode children: React.ReactNode
} }
const getTabIndex = (tab?: string): number => {
switch (tab) {
case ACCOUNT_TAB.CUSTOMER_INFO:
return 0;
case ACCOUNT_TAB.ORDER:
return 1;
case ACCOUNT_TAB.FAVOURITE:
return 2;
default:
return 0
}
}
const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => { const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => {
const router = useRouter()
const [active, setActive] = useState(defaultActiveIndex) const [active, setActive] = useState(defaultActiveIndex)
const sliderRef = useRef<HTMLDivElement>(null); const sliderRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLUListElement>(null) const headerRef = useRef<HTMLUListElement>(null)
useEffect(() => {
const query = router.query[QUERY_KEY.TAB] as string
const index = getTabIndex(query)
setActive(index)
}, [router.query[QUERY_KEY.TAB]])
const onTabClick = (index: number) => { const onTabClick = (index: number) => {
setActive(index) setActive(index)
} }