Skip to content

Commit

Permalink
Fix date time not showing in review item & improve header ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@minsoeaung
minsoeaung committed Dec 22, 2023
1 parent a21f7dd commit af2cf4b
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 55 deletions.
132 changes: 85 additions & 47 deletions Client/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { useAuth } from '../context/AuthContext.tsx';
import { IoDocumentTextOutline } from 'react-icons/io5';
import { useWishList } from '../hooks/queries/useWishList.ts';
import { useMyAccount } from '../hooks/queries/useMyAccount.ts';
import { FaRegHeart } from 'react-icons/fa';

const Header = () => {
const { colorMode, toggleColorMode } = useColorMode();
Expand Down Expand Up @@ -108,51 +109,65 @@ const Header = () => {
</Link>
<Flex alignItems="center">
<Stack direction="row" spacing={{ base: 1, md: 2 }} alignItems="center">
<IconButton
aria-label="Toggle search box visibility"
variant="ghost"
icon={<SearchIcon color={useColorModeValue('red.500', 'red.300')} />}
onClick={onOpen}
size={{ base: 'sm', md: 'md' }}
/>
<IconButton aria-label="Show search" variant="ghost" icon={<SearchIcon />} onClick={onOpen} />
<IconButton
aria-label="Color mode"
variant="ghost"
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
size={{ base: 'sm', md: 'md' }}
/>

{user && !isMobile && (
<Button
as={Link}
to="/user/wishlist"
variant="ghost"
rightIcon={
<>
<Icon as={LuHeart} />
{!!wishList?.length && (
<Box
as={'span'}
position={'absolute'}
top="-2px"
right={'4px'}
fontSize={'0.8rem'}
bgColor={'red'}
color="white"
borderRadius={'xl'}
zIndex={9999}
p={'2px'}
>
{wishList.length}
</Box>
)}
</>
}
>
Wishlist
</Button>
)}
{user &&
(isMobile ? (
<Box position="relative">
<IconButton
as={Link}
to="/user/wishlist"
aria-label="Wish list"
variant="ghost"
icon={<FaRegHeart />}
/>
{Array.isArray(wishList) && wishList.length > 0 && (
<Text
position="absolute"
top="0"
right="0"
fontSize="0.8rem"
color={useColorModeValue('red.500', 'red.300')}
fontWeight="bold"
>
{wishList.length}
</Text>
)}
</Box>
) : (
<Button
as={Link}
to="/user/wishlist"
variant="ghost"
rightIcon={
<>
<Icon as={FaRegHeart} />
{!!wishList?.length && (
<Box
as={'span'}
position={'absolute'}
top="-1px"
right={'2px'}
fontSize={'0.9rem'}
color={useColorModeValue('red.500', 'red.300')}
zIndex={9999}
p={'2px'}
>
{wishList.length}
</Box>
)}
</>
}
>
Wishlist
</Button>
))}

{!user && (
<>
Expand All @@ -179,7 +194,29 @@ const Header = () => {

{user && (
<>
{!isMobile && (
{isMobile ? (
<Box position="relative">
<IconButton
as={Link}
to="/user/cart"
aria-label="Cart"
variant="ghost"
icon={<FiShoppingCart />}
/>
{Array.isArray(cart?.cartItems) && cart!.cartItems.length > 0 && (
<Text
position="absolute"
top="0"
right="0"
fontSize="0.8rem"
color={useColorModeValue('red.500', 'red.300')}
fontWeight="bold"
>
{cart!.cartItems.length}
</Text>
)}
</Box>
) : (
<Button
as={Link}
to="user/cart"
Expand All @@ -191,11 +228,10 @@ const Header = () => {
<Box
as={'span'}
position={'absolute'}
top="-2px"
right={'4px'}
fontSize={'0.8rem'}
bgColor={'red'}
color="white"
top="-1px"
right={'2px'}
fontSize={'0.9rem'}
color={useColorModeValue('red.500', 'red.300')}
borderRadius={'xl'}
zIndex={9999}
p={'2px'}
Expand All @@ -217,6 +253,7 @@ const Header = () => {
variant={'link'}
cursor={'pointer'}
minW={0}
pl={3}
>
<Avatar size={'sm'} src={user?.profilePicture} />
</MenuButton>
Expand All @@ -231,6 +268,10 @@ const Header = () => {
</Text>
<br />
<MenuDivider />
<MenuItem as={Link} to="/user/my-account" icon={<SettingsIcon />}>
My Account
</MenuItem>
<MenuDivider />
<MenuItem
as={Link}
to="/user/my-orders"
Expand All @@ -244,9 +285,6 @@ const Header = () => {
<MenuItem as={Link} to="/user/cart" icon={<Icon as={FiShoppingCart} />}>
Cart {!!cart?.cartItems.length && `(${cart.cartItems.length})`}
</MenuItem>
<MenuItem as={Link} to="/user/my-account" icon={<SettingsIcon />}>
My Account
</MenuItem>
{user.roles.some((role) => ['Admin', 'Super'].includes(role)) && (
<>
<MenuDivider />
Expand Down
6 changes: 3 additions & 3 deletions Client/src/components/ProductFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@ export const ProductFilters = () => {
<IconButton
aria-label="Filter"
variant="ghost"
size="lg"
size={{ base: 'sm', md: 'lg' }}
// variant={filterApplied ? "solid" : "outline"}
// colorScheme={filterApplied ? "blue" : "gray"}
icon={<AiOutlineFilter />}
onClick={onOpen}
isLoading={isLoading}
/>
<Modal isOpen={isOpen} onClose={onClose} colorScheme="blue">
<ModalOverlay backdropFilter="blur(3px)" />
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Filter</ModalHeader>
<ModalCloseButton />
Expand Down
12 changes: 10 additions & 2 deletions Client/src/components/ProductSortBy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,18 @@ export const ProductSortBy = () => {
setParams(params);
};

const sortedBy = sortMenus[(params.get('orderBy') || '_') as keyof typeof sortMenus];

return (
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />} px={4} variant="ghost" size="lg">
Sort by: {sortMenus[(params.get('orderBy') || '_') as keyof typeof sortMenus] || ''}
<MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
px={4}
variant="ghost"
size={{ base: 'sm', md: 'lg' }}
>
Sort by{sortedBy ? `: ${sortedBy}` : ''}
</MenuButton>
<MenuList>
<MenuItem onClick={handleSortMenuClick('default')}>Default</MenuItem>
Expand Down
2 changes: 1 addition & 1 deletion Client/src/components/Products/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const Products = () => {
) : (
data && (
<>
<Flex justifyContent="space-between" mb={4}>
<Flex justifyContent="space-between" mb={{ base: 2, md: 4 }}>
<ProductFilters />
<ProductSortBy />
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion Client/src/components/ReviewItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export const ReviewItem = ({ data, ownByUser }: Props) => {
<Rating max={5} defaultValue={rating} />
<Text color={useColorModeValue('gray.600', 'gray.400')}>
{new Date(updatedAt)
.toLocaleDateString('my-MM', {
.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
Expand Down
1 change: 1 addition & 0 deletions Client/src/pages/Catalog/ProductDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const ProductDetailPage = () => {
wordWrap: 'break-word',
overflow: 'hidden',
}}
size={{ base: 'sm', md: 'md' }}
>
{isFavorite ? (isMobile ? 'Remove' : 'Remove from favorite') : 'Favorite'}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion Client/src/pages/User/MyOrders/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const MyOrdersPage = () => {
<Td>{item.id}</Td>
<Td>
{new Date(item.createdAt)
.toLocaleDateString('my-MM', {
.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
Expand Down

0 comments on commit af2cf4b

Please sign in to comment.