🎨 styles: change query tab logic in acc page

:%s

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,41 +1,23 @@
 import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
 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
+        if (defaultActiveIndex !== undefined) {
-        const index = getTabIndex(query)
+            setActive(defaultActiveIndex)
-        setActive(index)
+        }
-    }, [router.query[QUERY_KEY.TAB]])
+    }, [defaultActiveIndex])
 
     const onTabClick = (index: number) => {
         setActive(index)

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 router = useRouter()
-    const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
+    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);
     }