Scribd
Upload
5 views3 pages

S

The document is a React component for a header that includes user account management and a search functionality for a pet shop application. It utilizes Ant Design components and Redux for state management, allowing users to log in, log out, and navigate to different sections of the site. The header also features a search input that debounces user input to fetch and display search results efficiently.

Uploaded by

Thạch Đông
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

S

The document is a React component for a header that includes user account management and a search functionality for a pet shop application. It utilizes Ant Design components and Redux for state management, allowing users to log in, log out, and navigate to different sections of the site. The header also features a search input that debounces user input to fetch and display search results efficiently.

Uploaded by

Thạch Đông
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useEffect, useMemo, useState } from "react";

import { Badge, Col, Popover} from 'antd';


import { WrapperContentPopup, WrapperHeader, WrapperHeaderAccout,
WrapperTextHeader, WrapperTextHeaderSmall } from "./style";
import ButtonInputSearch from "../ButtonInputSearch/ButtonInputSearch";
import { CaretDownOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-
design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import * as UserService from "../../services/UserService";
import * as SearchService from "../../services/SearchService";
import { resetUser } from "../../redux/slides/userSlide";
import Loading from "../LoadingComponent/Loading";
import { searchProduct } from "../../redux/slides/productSlide";
import { debounce } from "../../utils";

const HeaderComponent = ({isHiddenSearch = false, isHiddenCart = false}) => {


const navigate = useNavigate()
const user = useSelector((state) => state.user)
const dispatch = useDispatch()
const [search, setSearch] = useState('')
const [isOpenPopup, setIsOpenPopup] = useState(false)
const order = useSelector((state) => state.order)
const [loading, setLoading] = useState(false)
const [userName, setUserName] = useState('')
const [userAvatar, setUserAvatar] = useState('')
const handleNavigateLogin = () => {
navigate('/sign-in')
}
const handleLogout = async () => {
setLoading(true)
await UserService.logoutUser()
dispatch(resetUser())
setLoading(false)
}

useEffect(() => {
setLoading(true)
setUserName(user?.name)
setUserAvatar(user?.avatar)
setLoading(false)
}, [user?.name, user?.avatar])

const handleOnClickNavigate = (type) => {


if(type === 'profile') {
navigate('/profile-user')
}else if(type === 'admin') {
navigate('/system/admin')
}else if(type === 'my-order') {
navigate('/my-order', {
state: {
id: user?.id,
token: user?.access_token,
}
})
}else {
handleLogout()
}
setIsOpenPopup(false)
}

const content = (
<div>
<WrapperContentPopup onClick={() =>
handleOnClickNavigate('profile')}>Thông tin người dùng</WrapperContentPopup>
{user?.isAdmin && (
<WrapperContentPopup onClick={() =>
handleOnClickNavigate('admin')}>Quản lí hệ thống</WrapperContentPopup>
)}
<WrapperContentPopup onClick={() => handleOnClickNavigate('my-
order')}>Đơn hàng của tôi</WrapperContentPopup>
<WrapperContentPopup onClick={() => handleOnClickNavigate()}>Đăng
xuất</WrapperContentPopup>
</div>
)

const handleSearch = async (searchTerm) => {


if (searchTerm) {
const result = await SearchService.searchProducts(searchTerm);
navigate('/search', { state: { searchText: searchTerm, results:
result.data } });
}
};

const debouncedSearch = useMemo(() => debounce((searchTerm) => {


if (searchTerm) {
handleSearch(searchTerm);
}
}, 300), []);

const onSearch = (e) => {


const searchTerm = e.target.value;
setSearch(searchTerm);
dispatch(searchProduct(searchTerm));
};

const handleSearchButtonClick = () => {


if (search) {
debouncedSearch(search);
}
};

return (
<div style={{width: '100%', background: '#3d6912', display: "flex",
justifyContent: 'center'}}>
<WrapperHeader style={{justifyContent: isHiddenSearch && isHiddenSearch
? 'space-between' : 'unset'}} >
<Col span={5}>
<WrapperTextHeader to='/'>PetShop</WrapperTextHeader>
</Col>

{!isHiddenSearch && (
<Col span={13}>
<ButtonInputSearch
size='large'
textbutton='Tìm kiếm'
placeholder="input search text"
onChange={onSearch}
onClick={handleSearchButtonClick}
/>
</Col>
)}

<Col span={6} style={{display: 'flex', gap: '54px', alignItems:


'center'}}>
<Loading isloading={loading}>
<WrapperHeaderAccout>
{userAvatar ? (
<img src={userAvatar} alt="avatar" style={{width:
'30px', height: '30px', borderRadius: '50%', objectFit: 'cover'}}/>
) : (
<UserOutlined style={{fontSize:'30px'}}/>
)}
{user?.access_token ? (
<>
<Popover content={content} trigger='click'
open={isOpenPopup}>
<div style={{cursor: 'pointer'}}
onClick={() => setIsOpenPopup((prev) => !prev)}>{userName?.length ? userName :
user?.email}</div>
</Popover>
</>
) : (
<div onClick={handleNavigateLogin} style={{cursor:
'pointer'}}>
<WrapperTextHeaderSmall>Đăng nhập/Đăng
ký</WrapperTextHeaderSmall>
<div>
<WrapperTextHeaderSmall>Tài
khoản</WrapperTextHeaderSmall>
<CaretDownOutlined />
</div>
</div>
)}
</WrapperHeaderAccout>
</Loading>

{user?.access_token && !isHiddenCart && (


<div onClick={() => navigate('/order')} style={{cursor:
'pointer'}}>
<Badge count={order?.orderItems?.length} size="small">
<ShoppingCartOutlined style={{fontSize:'30px',
color: '#fff'}}/>
</Badge>
</div>
)}
</Col>

</WrapperHeader>
</div>
)
}

export default HeaderComponent;

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy