From af2cf4bbc8bafece7cb85203c13f80b94152a1ee Mon Sep 17 00:00:00 2001
From: minsoeaung <minsoeaung2001@gmail.com>
Date: Fri, 22 Dec 2023 17:03:24 +0630
Subject: [PATCH] Fix date time not showing in review item & improve header ui

---
 Client/src/components/Header.tsx           | 132 +++++++++++++--------
 Client/src/components/ProductFilters.tsx   |   6 +-
 Client/src/components/ProductSortBy.tsx    |  12 +-
 Client/src/components/Products/index.tsx   |   2 +-
 Client/src/components/ReviewItem.tsx       |   2 +-
 Client/src/pages/Catalog/ProductDetail.tsx |   1 +
 Client/src/pages/User/MyOrders/index.tsx   |   2 +-
 7 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/Client/src/components/Header.tsx b/Client/src/components/Header.tsx
index 91e7fb5..3d3d033 100644
--- a/Client/src/components/Header.tsx
+++ b/Client/src/components/Header.tsx
@@ -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();
@@ -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 && (
                             <>
@@ -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"
@@ -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'}
@@ -217,6 +253,7 @@ const Header = () => {
                                         variant={'link'}
                                         cursor={'pointer'}
                                         minW={0}
+                                        pl={3}
                                     >
                                         <Avatar size={'sm'} src={user?.profilePicture} />
                                     </MenuButton>
@@ -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"
@@ -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 />
diff --git a/Client/src/components/ProductFilters.tsx b/Client/src/components/ProductFilters.tsx
index a4b321b..974e1ca 100644
--- a/Client/src/components/ProductFilters.tsx
+++ b/Client/src/components/ProductFilters.tsx
@@ -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 />
diff --git a/Client/src/components/ProductSortBy.tsx b/Client/src/components/ProductSortBy.tsx
index f9d7e98..19c6c37 100644
--- a/Client/src/components/ProductSortBy.tsx
+++ b/Client/src/components/ProductSortBy.tsx
@@ -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>
diff --git a/Client/src/components/Products/index.tsx b/Client/src/components/Products/index.tsx
index ec90958..303074e 100644
--- a/Client/src/components/Products/index.tsx
+++ b/Client/src/components/Products/index.tsx
@@ -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>
diff --git a/Client/src/components/ReviewItem.tsx b/Client/src/components/ReviewItem.tsx
index 4c42252..28942cf 100644
--- a/Client/src/components/ReviewItem.tsx
+++ b/Client/src/components/ReviewItem.tsx
@@ -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',
diff --git a/Client/src/pages/Catalog/ProductDetail.tsx b/Client/src/pages/Catalog/ProductDetail.tsx
index 0a59a10..5a26095 100644
--- a/Client/src/pages/Catalog/ProductDetail.tsx
+++ b/Client/src/pages/Catalog/ProductDetail.tsx
@@ -148,6 +148,7 @@ const ProductDetailPage = () => {
                                             wordWrap: 'break-word',
                                             overflow: 'hidden',
                                         }}
+                                        size={{ base: 'sm', md: 'md' }}
                                     >
                                         {isFavorite ? (isMobile ? 'Remove' : 'Remove from favorite') : 'Favorite'}
                                     </Button>
diff --git a/Client/src/pages/User/MyOrders/index.tsx b/Client/src/pages/User/MyOrders/index.tsx
index 8164cad..a7a3f67 100644
--- a/Client/src/pages/User/MyOrders/index.tsx
+++ b/Client/src/pages/User/MyOrders/index.tsx
@@ -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',