feat: Add brand filter, React Image Galerry

client/package.json

@@ -23,6 +23,7 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image-gallery": "^1.3.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.0"
   },

client/src/components/form/Form.module.css

@@ -1,4 +1,4 @@
-.login-container {
+.form-container {
   margin: 1.4rem auto;
   width: 50rem;
   height: 31rem;
@@ -15,13 +15,13 @@
   height: 100%;
 }
 
-.login-title {
+.form-title {
   font-size: 1.7rem;
   font-weight: 500;
   margin: 0.5rem 0;
 }
 
-.login-desc {
+.form-desc {
   color: #dbdbdb;
   font-size: 1.1rem;
 }
@@ -32,15 +32,15 @@
   height: 100%;
 }
 
-.right .login-form {
+.right .form {
   margin-top: 2rem;
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 0.8rem;
 }
 
-.login-form input {
+.form input {
   width: 100%;
   padding: 0.4rem 1rem;
   margin: 0.6rem 0;
@@ -49,11 +49,11 @@
   border: 0;
   border-bottom: 1px solid grey;
 }
-.login-form input::placeholder {
+.form input::placeholder {
   opacity: 0.7;
 }
 
-.login-form button {
+.form button {
   border: 0;
   background-color: #fb641b;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
@@ -64,7 +64,7 @@
   color: white;
 }
 
-small {
+.form-small {
   text-align: left;
   font-size: 0.7rem;
   color: #878787;

client/src/components/form/Form.tsx

@@ -15,21 +15,21 @@ export default function From({
   promptLinkText,
 }: FormProps) {
   return (
-    <div className={styles.loginContainer}>
+    <div className={styles.formContainer}>
       <div className={styles.left}>
-        <div className={styles.loginTitle}>
+        <div className={styles.formTitle}>
           <span>{mode}</span>
         </div>
-        <div className={styles.loginDesc}>
+        <div className={styles.formDesc}>
           <p>Get access to your Orders,</p>
           <p>Wishlist and Recommendations</p>
         </div>
       </div>
       <div className={styles.right}>
-        <form className={styles.loginForm}>
+        <form className={styles.form}>
           <input type="text" placeholder="Enter Email/Username" />
           <input type="password" placeholder="Password" />
-          <small>
+          <small className={styles.fromSmall}>
             By continuing, you agree to Flipkart's
             <span className={styles.demoLink}> Terms of Use </span>
             and

client/src/components/notification/Notification.tsx

@@ -0,0 +1,18 @@
+import { Alert } from '@mui/material'
+
+type Type = 'success' | 'info' | 'warning' | 'error'
+
+type Props = {
+  type: Type
+  message: string
+}
+
+export default function Notification({ type = 'info', message }: Props) {
+  return (
+    <>
+      <Alert variant="filled" severity={type}>
+        {message}
+      </Alert>
+    </>
+  )
+}

client/src/constants/filterConstants.ts

@@ -10,3 +10,122 @@ export const RATING_TYPE = {
   TWO_AND_UP: '2',
   ONE_AND_UP: '1',
 }
+
+export const RATING_ITEMS = [
+  { value: RATING_TYPE.FOUR_AND_UP, label: '4★ & above' },
+  { value: RATING_TYPE.THREE_AND_UP, label: '3★ & above' },
+  { value: RATING_TYPE.TWO_AND_UP, label: '2★ & above' },
+  { value: RATING_TYPE.ONE_AND_UP, label: '1★ & above' },
+]
+
+export const SORT_ITEMS = [
+  { value: SORT_TYPE.PRICE_HIGH_TO_LOW, label: 'Price high to low' },
+  { value: SORT_TYPE.PRICE_LOW_TO_HIGH, label: 'Price low to high' },
+  { value: SORT_TYPE.RATING_HIGH_TO_LOW, label: 'Rating High To Low' },
+]
+
+type CategoryType = Record<string, string>
+
+export const CATEGORIES: CategoryType = {
+  Smartphones: 'smartphones',
+  Laptops: 'laptops',
+  Fragrances: 'fragrances',
+  Skincare: 'skincare',
+  Groceries: 'groceries',
+  'Home Decoration': 'home-decoration',
+  Furniture: 'furniture',
+  Tops: 'tops',
+  'Womens Dresses': 'womens-dresses',
+  'Womens Shoes': 'womens-shoes',
+  'Mens Shirts': 'mens-shirts',
+  'Mens Shoes': 'mens-shoes',
+  'Mens Watches': 'mens-watches',
+  'Womens Watches': 'womens-watches',
+  'Womens Bags': 'womens-bags',
+  'Womens Jewellery': 'womens-jewellery',
+  Sunglasses: 'sunglasses',
+  Automotive: 'automotive',
+  Motorcycle: 'motorcycle',
+  Lighting: 'lighting',
+}
+
+export const BRAND = [
+  'Apple',
+  'Samsung',
+  'OPPO',
+  'Huawei',
+  'Microsoft Surface',
+  'Infinix',
+  'HP Pavilion',
+  'Impression of Acqua Di Gio',
+  'Royal_Mirage',
+  'Fog Scent Xpressio',
+  'Al Munakh',
+  'Lord - Al-Rehab',
+  "L'Oreal Paris",
+  'Hemani Tea',
+  'Dermive',
+  'ROREC White Rice',
+  'Fair & Clear',
+  'Saaf & Khaas',
+  'Bake Parlor Big',
+  'Baking Food Items',
+  'fauji',
+  'Dry Rose',
+  'Boho Decor',
+  'Flying Wooden',
+  'LED Lights',
+  'luxury palace',
+  'Golden',
+  'Furniture Bed Set',
+  'Ratttan Outdoor',
+  'Kitchen Shelf',
+  'Multi Purpose',
+  'AmnaMart',
+  'Professional Wear',
+  'Soft Cotton',
+  'Top Sweater',
+  'RED MICKY MOUSE..',
+  'Digital Printed',
+  'Ghazi Fabric',
+  'IELGY',
+  'IELGY fashion',
+  'Synthetic Leather',
+  'Sandals Flip Flops',
+  'Maasai Sandals',
+  'Arrivals Genuine',
+  'Vintage Apparel',
+  'FREE FIRE',
+  'The Warehouse',
+  'Sneakers',
+  'Rubber',
+  'Naviforce',
+  'SKMEI 9117',
+  'Strap Skeleton',
+  'Stainless',
+  'Eastern Watches',
+  'Luxury Digital',
+  'Watch Pearls',
+  'Bracelet',
+  'LouisWill',
+  'Copenhagen Luxe',
+  'Steal Frame',
+  'Darojay',
+  'Fashion Jewellery',
+  'Cuff Butterfly',
+  'Designer Sun Glasses',
+  'mastar watch',
+  'Car Aux',
+  'W1209 DC12V',
+  'TC Reusable',
+  'Neon LED Light',
+  'METRO 70cc Motorcycle - MR70',
+  'BRAVE BULL',
+  'shock absorber',
+  'JIEPOLLY',
+  'Xiangle',
+  'lightingbrilliance',
+  'Ifei Home',
+  'DADAWU',
+  'YIOSI',
+]

client/src/hooks/useFilters.ts

@@ -6,7 +6,7 @@ import useGetParams from './useGetParams'
 export default function useFilter() {
   const { data, isLoading } = useGetAllProductsQuery(null)
 
-  const { q, category, rating, price, sort } = useGetParams()
+  const { q, category, brand, rating, price, sort } = useGetParams()
   const products = data?.products
 
   const filteredData = products
@@ -27,9 +27,12 @@ export default function useFilter() {
       )
         return false
 
-      // category filter
+      // Category filter
       if (category && !(item.category === category)) return false
 
+      // Brand filter
+      if (brand && !(item.brand === brand)) return false
+
       // Add more filters as needed
       return true
     })

client/src/hooks/useGetParams.ts

@@ -5,9 +5,10 @@ export default function useGetParams() {
 
   const q = searchParams.get('q') || ''
   const category = searchParams.get('category') || ''
+  const brand = searchParams.get('brand') || ''
   const rating = searchParams.get('rating') || ''
   const price = searchParams.get('price')?.split('-').map(Number) || [10, 2000]
   const sort = searchParams.get('sort')
 
-  return { category, price, q, rating, sort }
+  return { category, brand, price, q, rating, sort }
 }

client/src/hooks/useHandleDispatch.ts

@@ -61,13 +61,22 @@ export default function useHandleDispatch() {
     })
   }
 
+  const handleBrandFilter = (brand: string) => {
+    setSearchParams((prev) => {
+      prev.set('brand', brand)
+      prev.delete('q')
+      return prev
+    })
+  }
+
   const handleClearFilter = () => {
     setSearchParams((prev) => {
       prev.delete('q')
       prev.delete('category')
       prev.delete('rating')
       prev.delete('price')
       prev.delete('sort')
+      prev.delete('brand')
       return prev
     })
   }
@@ -81,6 +90,7 @@ export default function useHandleDispatch() {
     handlePriceRange,
     handleSearchQuery,
     handleCategoryFilter,
+    handleBrandFilter,
     handleClearFilter,
   }
 }

client/src/layouts/filters/SidebarFilters.tsx

@@ -1,11 +1,12 @@
 import { memo } from 'react'
 
-import AppliedFilters from './components/applied-filters/AppliedFilters'
 import CategoryFilter from './components/CategoryFilter'
-import ClearFilter from './components/clear-filter/ClearFilter'
 import PriceSliderFilter from './components/PriceSliderFilter'
 import RatingFilter from './components/RatingFilter'
 import SortProductsFilter from './components/SortProductsFilter'
+import AppliedFilters from './components/applied-filters/AppliedFilters'
+import BrandFilter from './components/brand-filter/BrandFilter'
+import ClearFilter from './components/clear-filter/ClearFilter'
 
 function SidebarFilters() {
   return (
@@ -35,6 +36,8 @@ function SidebarFilters() {
         <RatingFilter />
 
         <CategoryFilter />
+
+        <BrandFilter />
       </div>
     </div>
   )