module account

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

@@ -1,72 +1,49 @@
-import React, { useState, useRef, RefObject, useEffect } from "react"
+import React, { useRef, RefObject, useEffect } from "react"
 import s from './AccountNavigation.module.scss'
 
 import AccountNavigationItem from './components/AccountNavigationItem' 
 
 interface AccountNavigationProps {
-    setAccountActive: ()=>void;
-    setOrderActive: ()=>void;
-    setFavActive: ()=>void;
+    items: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void}[];
+    defaultActiveIndex: number;
 }
 
-const AccountNavigation = ({ setAccountActive, setOrderActive, setFavActive } : AccountNavigationProps) => {
-    const active = "active", unActive = "";
+const AccountNavigation = ({ items, defaultActiveIndex } : AccountNavigationProps) => {
 
-    const [item1Active, setItem1Active] = useState(unActive);
-    const [item2Active, setItem2Active] = useState(active);
-    const [item3Active, setItem3Active] = useState(unActive);
+    const sliderRef = useRef<HTMLDivElement>(null);
 
-    const item1 = useRef<HTMLDivElement>(null);
-    const item2 = useRef<HTMLDivElement>(null);
-    const item3 = useRef<HTMLDivElement>(null);
-    const slider = useRef<HTMLDivElement>(null);
-
-    function slide(ref: RefObject<HTMLDivElement>) {        
-        const top = ref.current.offsetTop;
-        slider.current.style.top = top.toString()+"px";      
+    function slide(index: number) {        
+        const previousItem = items[index].ref.current;
+        const slider = sliderRef.current;
+        if (previousItem && slider) {            
+            const top = previousItem.offsetTop;
+            slider.style.top = top.toString()+"px";
+        }
     }
 
-    function toggleItem1():void {
-        setItem1Active(active);
-        setAccountActive();
+    const handleClick = (item: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void},
+                        index: number) => {
+        slide(index);                    
+        item.onClick(index);
         
-        setItem2Active(unActive);
-        setItem3Active(unActive);
-        slide(item1);
-    }
-    function toggleItem2():void {
-        setItem2Active(active);
-        setOrderActive();
-
-        setItem1Active(unActive);
-        setItem3Active(unActive);
-        slide(item2);
-    }
-    function toggleItem3():void {
-        setItem3Active(active);
-        setFavActive();
-
-        setItem1Active(unActive);
-        setItem2Active(unActive);
-        slide(item3);
     }
 
     useEffect(() => {
-        slide(item2);
+        slide(defaultActiveIndex);
     }, [])
 
     return (
         <section className={s.accountNavigation}>
-            <div ref={item1}>
-                <AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
+            {   
+                items.map((item, i) => {
+                    return (
+                        <div key={item.itemName} ref={item.ref}>
+                            <AccountNavigationItem onClick={() => {handleClick(item, i)}} active={item.active}>{item.itemName}</AccountNavigationItem>
                         </div>
-            <div ref={item2}>
-                <AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
-            </div>
-            <div ref={item3}>
-                <AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
-            </div>
-            <div ref={slider} className={s.slider}></div>
+                    )
+                })
+            }
+            <div ref={sliderRef} className={s.slider}></div>
         </section>
     )
 }

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss

@@ -13,6 +13,5 @@
     &.active {
         background-color: #FBFBFB;
         border-radius: 0 1.6rem 1.6rem 0;
-        // border-left: 2px solid var(--primary);
     }
 }

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

@@ -1,18 +1,17 @@
-import React, { RefObject } from "react";
+import React from "react";
 import classNames from "classnames";
 import s from './AccountNavigationItem.module.scss'
 
 interface AccountNavigationItemProps {
     children?: string;
-    active?: string;
-    target?: string;
+    active?: boolean;
     onClick: () => void;
 }
 
-const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
+const AccountNavigationItem = ({ children, active, onClick } : AccountNavigationItemProps) => {
     return (
         <div onClick={onClick} className={classNames(s.accountNavigationItem, {
-            [s[active]]:active
+            [s.active]:active
         })}>
             {children}
         </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useRef, useState } from "react"
 import s from './AccountPage.module.scss'
 
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
@@ -7,36 +7,31 @@ import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 
-interface AccountPageProps {
-
-}
-
-const AccountPage = ({} : AccountPageProps) => {
-    const waiting = [
+const waiting = [
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
     }
-    ]
+]
 
-    const delivering = [
+const delivering = [
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
     }
-    ]
+]
 
-    const delivered = [
+const delivered = [
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
     }
-    ]
+]
 
-    let account = {
+let account = {
     name: "vu duong",
     email: "vuduong@gmail.com",
     address: "234 Dien Bien Phu Bis, Dakao ward",
@@ -44,33 +39,18 @@ const AccountPage = ({} : AccountPageProps) => {
     city: "HCMC",
     postalCode: "700000",
     phoneNumber: "(+84) 937 937 195"
-    }
+}
 
-    const [accountInfoActive, setAccountInfoActive] = useState(false);
-    const [orderInfoActive, setOrderInfoActive] = useState(true);
-    const [favoritesActive, setFavoritesActive] = useState(false);
+interface AccountPageProps {
+    defaultActiveContent?: "info" | "orders" | "favorites"
+}
 
-    function accountActive() {
-        setAccountInfoActive(true);
-        setOrderInfoActive(false);
-        setFavoritesActive(false);
-    }
-
-    function orderActive() {
-        setAccountInfoActive(false);
-        setOrderInfoActive(true);
-        setFavoritesActive(false);
-    }
-
-    function favActive() {
-        setAccountInfoActive(false);
-        setOrderInfoActive(false);
-        setFavoritesActive(true);
-    }
+const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
     
+    const [activeTab, setActiveTab] = useState(defaultActiveContent==="info"? 0 : defaultActiveContent==="orders"? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
 
-    function showEditForm() {
+    function showModal() {
         setModalVisible(true);
     }
 
@@ -78,19 +58,29 @@ const AccountPage = ({} : AccountPageProps) => {
         setModalVisible(false);
     }
 
+    const changeTab = (tabIndex: number) => {
+        setActiveTab(tabIndex);
+    }
+
+    const accNavItems = [
+        {ref: useRef<HTMLDivElement>(null), active: activeTab===0, itemName: "Customer Information", onClick: changeTab},
+        {ref: useRef<HTMLDivElement>(null), active: activeTab===1, itemName: "Your Orders", onClick: changeTab},
+        {ref: useRef<HTMLDivElement>(null), active: activeTab===2, itemName: "Favorites", onClick: changeTab}
+    ]
+
     return (
         <>
             <section className={s.accountPage}>
                 <div className={s.pageLeft}>
                     <HeadingCommon>Account</HeadingCommon>
                     <div className={s.accNavi}>
-                        <AccountNavigation setAccountActive={accountActive} setOrderActive={orderActive} setFavActive={favActive} />
+                        <AccountNavigation items={accNavItems} defaultActiveIndex={activeTab} />
                     </div>
                 </div>
                 
                 <div className={s.pageRight}>
-                    <AccountInfomation active={accountInfoActive} account={account} showEditForm={showEditForm}  />
-                    <OrderInfomation active={orderInfoActive} waiting={waiting} delivering={delivering} delivered={delivered} />
+                    <AccountInfomation active={activeTab === 0} account={account} onClick={showModal}  />
+                    <OrderInfomation active={activeTab === 1} waiting={waiting} delivering={delivering} delivered={delivered} />
 
                     {/* Thieu cai favorite */}
                     {/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import s from './AccountInfomation.module.scss'
 
 import Image from "next/image"
@@ -7,13 +7,15 @@ import avatar from '../../assets/avatar.png';
 interface AccountInfomationProps {
     account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
     active: boolean;
-    showEditForm: () => void;
+    onClick: () => void;
 }
 
-const AccountInfomation = ({ account, active=false, showEditForm } : AccountInfomationProps) => {
+const AccountInfomation = ({ account, active=false, onClick } : AccountInfomationProps) => {
 
     // need to handle call back when edit account information 
 
+    const showEditForm = () => onClick()
+
     return (
         <section className={s.accountInfomation}>
             {