feat: Add Applied Filters

client/src/App.tsx

@@ -4,12 +4,12 @@ import { Footer, Header } from './layouts'
 
 export default function App() {
   return (
-    <div className="AppContainer">
+    <main className="AppContainer">
       <Header />
       <Suspense fallback="Loading...">
         <Outlet />
       </Suspense>
       <Footer />
-    </div>
+    </main>
   )
 }

client/src/assets/css/global.css

@@ -0,0 +1,22 @@
+.AppContainer {
+  background-color: #f1f3f6;
+  z-index: -1;
+  min-height: 100vh;
+}
+
+hr {
+  border-top: 1px solid rgba(96, 96, 96, 0.217);
+  margin: 15px 0 0 0;
+}
+
+.sidebar section {
+  margin: 10px 0;
+}
+
+.sidebar section input {
+  margin: 8px 0;
+}
+
+.sidebar section label {
+  padding: 0 10px;
+}

client/src/assets/css/reset.css

@@ -22,23 +22,13 @@ body {
   max-width: 100vw;
 }
 
-.AppContainer {
-  background-color: #f1f3f6;
-  z-index: -1;
-  min-height: 100vh;
-}
-
 input,
 button,
 textarea,
 select {
   font: inherit;
 }
 
-button {
-  /* all: unset; */
-}
-
 input[type='radio'],
 label[for] {
   cursor: pointer;
@@ -56,7 +46,6 @@ button:disabled {
   pointer-events: none;
 }
 
-/* responsive images/videos */
 img,
 picture,
 svg,

client/src/layouts/filters/SidebarFilters.tsx

@@ -1,38 +1,42 @@
 import { memo } from 'react'
 
+import AppliedFilters from './components/applied-filters/AppliedFilters'
 import CategoryFilter from './components/CategoryFilter'
-import ClearFilter from './components/ClearFilter'
+import ClearFilter from './components/clear-filter/ClearFilter'
 import PriceSliderFilter from './components/PriceSliderFilter'
 import RatingFilter from './components/RatingFilter'
 import SortProductsFilter from './components/SortProductsFilter'
 
 function SidebarFilters() {
-  console.log('SidebarFilters')
   return (
-    <>
-      <h2>Filters</h2>
+    <div
+      style={{
+        background: 'white',
+        padding: '0.8rem',
+      }}
+      className="sidebar"
+    >
+      <h3>Filters</h3>
       <div
         style={{
           display: 'flex',
           justifyContent: 'center',
           flexDirection: 'column',
         }}
       >
-        {/* Clear Filters */}
         <ClearFilter />
 
-        {/* Price Filter */}
+        <AppliedFilters />
+
         <PriceSliderFilter />
-        {/* Sort products */}
+
         <SortProductsFilter />
 
-        {/* Ratings filter */}
         <RatingFilter />
 
-        {/* Category Filters */}
         <CategoryFilter />
       </div>
-    </>
+    </div>
   )
 }
 

client/src/layouts/filters/components/CategoryFilter.tsx

@@ -32,7 +32,6 @@ const data: CategoryType = {
 function CategoryFilter() {
   const { handleCategoryFilter } = useHandleDispatch()
   const { category: categoryParam } = useGetParams()
-  console.log('CategoryFilter')
   return (
     <section>
       <h4>Categories</h4>

client/src/layouts/filters/components/PriceSliderFilter.tsx

@@ -7,19 +7,19 @@ import useHandleDispatch from '@/hooks/useHandleDispatch'
 function PriceSliderFilter() {
   const { handlePriceRange } = useHandleDispatch()
   const { price } = useGetParams()
-  console.log('PriceSliderFilter')
   return (
     <section>
       <h4>Price</h4>
       <h4>{`$${price[0]} -  $${price[1]}`}</h4>
-      <div style={{ margin: '1rem' }}>
+      <div>
         <Slider
           value={price}
           onChange={handlePriceRange}
           valueLabelDisplay="auto"
           max={2000}
           min={10}
           step={100}
+          size="small"
         />
       </div>
     </section>

client/src/layouts/filters/components/RatingFilter.tsx

@@ -6,16 +6,15 @@ import useGetParams from '@/hooks/useGetParams'
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 
 const ratingItems = [
-  { value: RATING_TYPE.FOUR_AND_UP, label: '4 & Up' },
-  { value: RATING_TYPE.THREE_AND_UP, label: '3 & Up' },
-  { value: RATING_TYPE.TWO_AND_UP, label: '2 & Up' },
-  { value: RATING_TYPE.ONE_AND_UP, label: '1 & Up' },
+  { 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' },
 ]
 
 function RatingFilter() {
   const { rating } = useGetParams()
   const { handleFilterRating } = useHandleDispatch()
-  console.log('RatingFilter')
   return (
     <section>
       <h4>Customer Review</h4>

client/src/layouts/filters/components/SortProductsFilter.tsx

@@ -14,7 +14,6 @@ const sortItems = [
 function SortProductsFilter() {
   const { sort } = useGetParams()
   const { handleSort } = useHandleDispatch()
-  console.log('SortProductsFilter')
   return (
     <section>
       <h4>Sort</h4>

client/src/layouts/filters/components/applied-filters/AppliedFilters.module.css

@@ -0,0 +1,22 @@
+.filter-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-list .filter-item {
+  margin: 2px 4px;
+  padding: 0.4rem;
+  background-color: #e0e0e0;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.filter-item:hover {
+  text-decoration: line-through;
+}
+
+.no-filter {
+  font-style: italic;
+  color: grey;
+}

client/src/layouts/filters/components/applied-filters/AppliedFilters.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import styles from './AppliedFilters.module.css'
+
+function AppliedFilters() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const params = []
+
+  for (const entry of searchParams.entries()) {
+    params.push(entry)
+  }
+
+  const handleRemoveFilter = (key: string) => {
+    searchParams.delete(key)
+    setSearchParams(searchParams)
+  }
+
+  return (
+    <section>
+      <ul className={styles.filterList}>
+        {params.length > 0 ? (
+          params.map(([key, value]) => (
+            <li
+              className={styles.filterItem}
+              key={key}
+              onClick={() => handleRemoveFilter(key)}
+            >
+              ✕ {value}
+            </li>
+          ))
+        ) : (
+          <li className={styles.noFilter}>No filters applied</li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+const MemoizedAppliedFilters = memo(AppliedFilters)
+export default MemoizedAppliedFilters

client/src/layouts/filters/components/clear-filter/ClearFilter.module.css

@@ -0,0 +1,6 @@
+.clear-btn {
+  all: unset;
+  cursor: pointer;
+  color: #2874f0;
+  font-size: 14px;
+}

client/src/layouts/filters/components/ClearFilter.tsx → client/src/layouts/filters/components/clear-filter/ClearFilter.tsx

@@ -1,11 +1,13 @@
 import useHandleDispatch from '@/hooks/useHandleDispatch'
+import styles from './ClearFilter.module.css'
 
 export default function ClearFilter() {
   const { handleClearFilter } = useHandleDispatch()
-  console.log('ClearFilter')
   return (
     <section>
-      <button onClick={handleClearFilter}>Clear Filters</button>
+      <button className={styles.clearBtn} onClick={handleClearFilter}>
+        CLEAR ALL
+      </button>
     </section>
   )
 }

client/src/layouts/footer/Footer.tsx

@@ -38,7 +38,6 @@ function Footer() {
     'Redressal',
     ' EPR Compliance',
   ]
-  console.log('Footer')
   const social = ['Facebook', 'Twitter', 'YouTube']
   return (
     <footer className={styles.footerContainer}>

client/src/layouts/header/Header.tsx

@@ -14,7 +14,6 @@ function Header() {
   const cartData = useAppSelector((state) => state.cart)
   const { handleSearchQuery } = useHandleDispatch()
   const { q } = useGetParams()
-  console.log('Header')
   return (
     <header className={styles.headerContainer}>
       <div className={styles.headerWrapper}>

client/src/main.tsx

@@ -2,8 +2,14 @@ import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { RouterProvider } from 'react-router-dom'
 
+// Styles
+import './assets/css/global.css'
 import './assets/css/reset.css'
+
+// Routes
 import router from './routes'
+
+// Store
 import store from './state/store'
 
 if (process.env.NODE_ENV === 'production') {

client/src/pages/product-listing/ProductListingPage.tsx

@@ -6,16 +6,15 @@ import { SidebarFilters } from '@/layouts'
 import Products from './components/products/Products'
 
 function ProductListingPage() {
-  console.log('ProductListingPage')
   const { filteredData, isLoading } = useFilter()
 
   if (isLoading) return <Loader />
   return (
-    <div style={{ display: 'flex', margin: '1rem', gap: 2 }}>
-      <div style={{ flex: 1 }}>
+    <div style={{ display: 'flex', margin: '0.5rem', gap: '10px' }}>
+      <aside style={{ flex: 1 }}>
         <SidebarFilters />
-      </div>
-      <div style={{ flex: 4 }}>
+      </aside>
+      <div style={{ flex: 4.6 }}>
         <Products filteredData={filteredData} />
       </div>
     </div>

client/src/pages/product-listing/components/product-card/ProductCard.tsx

@@ -1,13 +1,12 @@
 import { ProductType } from '@/types'
-import { Paper } from '@mui/material'
+import Paper from '@mui/material/Paper'
 import { Link } from 'react-router-dom'
 
 type Props = {
   product: ProductType
 }
 
 export default function ProductCard({ product }: Props) {
-  console.log(product)
   return (
     <div>
       <Link key={product.id} to={`/products/${product.id}`}>
@@ -16,10 +15,10 @@ export default function ProductCard({ product }: Props) {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
-            // margin: 2,
-            p: 2,
-            mb: 1,
+            p: 3,
+            mb: 0.1,
           }}
+          elevation={0}
         >
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <img
@@ -30,7 +29,7 @@ export default function ProductCard({ product }: Props) {
             />
             <h3>{product.title}</h3>
             <h3>{product.rating}</h3>
-            {/* <p>{product.description}</p> */}
+            <p>{product.description}</p>
           </div>
 
           <div>

client/src/pages/product-listing/components/products/Products.tsx

@@ -8,7 +8,9 @@ type Props = {
 export default function Products({ filteredData }: Props) {
   return (
     <div>
-      {filteredData?.map((product) => <ProductCard product={product} />)}
+      {filteredData?.map((product) => (
+        <ProductCard product={product} key={product.id} />
+      ))}
     </div>
   )
 }