From 24bacba766506c6d9eec5135eeddd8819e6b7251 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 18:18:06 +0700
Subject: [PATCH] :sparkles: feat: change active tab from query in page account

:%s
---
 .../AccountNavigation/AccountNavigation.tsx   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
index a8da59211..91f827636 100644
--- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -3,17 +3,40 @@ import s from './AccountNavigation.module.scss'
 
 import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
 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 {
     defaultActiveIndex: number;
     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 router = useRouter()
+
     const [active, setActive] = useState(defaultActiveIndex)
     const sliderRef = useRef<HTMLDivElement>(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) => {
         setActive(index)
     }