🎨 styles: change query tab logic in acc page

:%s

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import s from './AccountPage.module.scss'
 
 import { HeadingCommon, TabPane } from "src/components/common"
@@ -10,12 +10,19 @@ import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 
 import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
+import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
+import { useRouter } from "next/router"
 
 const waiting = [
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -24,6 +31,11 @@ const delivering = [
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -32,6 +44,11 @@ const delivered = [
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -48,12 +65,30 @@ let account = {
 interface AccountPageProps {
     defaultActiveContent?: "info" | "orders" | "favorites"
 }
+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 AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
-    
-    const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
+    const router = useRouter()
+    const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
 
+    useEffect(() => {
+        const query = router.query[QUERY_KEY.TAB] as string
+        const index = getTabIndex(query)
+        setActiveTab(index)
+    }, [router.query[QUERY_KEY.TAB]])
+
     function showModal() {
         setModalVisible(true);
     }