From cda96f21e3b7ac2960828c1e01e35e1ce6f3beb7 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 15 Sep 2021 09:35:04 +0700
Subject: [PATCH] :art: styles: change query tab logic in acc page

:%s
---
 .../AccountNavigation/AccountNavigation.tsx   | 26 ++----------
 .../account/AccountPage/AccountPage.tsx       | 41 +++++++++++++++++--
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
index 91f827636..4fd534148 100644
--- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
+++ b/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
-        const index = getTabIndex(query)
-        setActive(index)
-    }, [router.query[QUERY_KEY.TAB]])
+        if (defaultActiveIndex !== undefined) {
+            setActive(defaultActiveIndex)
+        }
+    }, [defaultActiveIndex])
 
     const onTabClick = (index: number) => {
         setActive(index)
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
index c463b056a..47f5cf955 100644
--- a/src/components/modules/account/AccountPage/AccountPage.tsx
+++ b/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);
     }