crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: change query tab logic in acc page

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-15 09:35:04 +07:00
parent c20150902e
commit cda96f21e3
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/modules/account/AccountNavigation/AccountNavigation.tsx
View File

@ -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)

41
src/components/modules/account/AccountPage/AccountPage.tsx
View File

@ -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);
}