From 1f1e2f186c915adab61f25690eb36bd1a2f410ca Mon Sep 17 00:00:00 2001
From: builtbysuraj <surajgupta3553@gmail.com>
Date: Thu, 25 Jan 2024 21:14:18 +0530
Subject: [PATCH] feat: Add Applied Filters

---
 client/src/App.tsx                            |  4 +-
 client/src/assets/css/global.css              | 22 ++++++++++
 client/src/assets/css/reset.css               | 11 -----
 client/src/components/ui/Button.tsx           |  5 ---
 client/src/layouts/filters/SidebarFilters.tsx | 24 ++++++-----
 .../filters/components/CategoryFilter.tsx     |  1 -
 .../filters/components/PriceSliderFilter.tsx  |  4 +-
 .../filters/components/RatingFilter.tsx       |  9 ++---
 .../filters/components/SortProductsFilter.tsx |  1 -
 .../applied-filters/AppliedFilters.module.css | 22 ++++++++++
 .../applied-filters/AppliedFilters.tsx        | 40 +++++++++++++++++++
 .../clear-filter/ClearFilter.module.css       |  6 +++
 .../{ => clear-filter}/ClearFilter.tsx        |  6 ++-
 client/src/layouts/footer/Footer.tsx          |  1 -
 client/src/layouts/header/Header.tsx          |  1 -
 client/src/main.tsx                           |  6 +++
 .../product-listing/ProductListingPage.tsx    |  9 ++---
 .../product-card/ProductCard.module.css       |  0
 .../components/product-card/ProductCard.tsx   | 11 +++--
 .../components/products/Products.tsx          |  4 +-
 20 files changed, 134 insertions(+), 53 deletions(-)
 create mode 100644 client/src/assets/css/global.css
 delete mode 100644 client/src/components/ui/Button.tsx
 create mode 100644 client/src/layouts/filters/components/applied-filters/AppliedFilters.module.css
 create mode 100644 client/src/layouts/filters/components/applied-filters/AppliedFilters.tsx
 create mode 100644 client/src/layouts/filters/components/clear-filter/ClearFilter.module.css
 rename client/src/layouts/filters/components/{ => clear-filter}/ClearFilter.tsx (56%)
 create mode 100644 client/src/pages/product-listing/components/product-card/ProductCard.module.css

diff --git a/client/src/App.tsx b/client/src/App.tsx
index fa2d263..fbd1c08 100644
--- a/client/src/App.tsx
+++ b/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>
   )
 }
diff --git a/client/src/assets/css/global.css b/client/src/assets/css/global.css
new file mode 100644
index 0000000..c1f97b9
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/assets/css/reset.css b/client/src/assets/css/reset.css
index df616cb..d6edfe7 100644
--- a/client/src/assets/css/reset.css
+++ b/client/src/assets/css/reset.css
@@ -22,12 +22,6 @@ body {
   max-width: 100vw;
 }
 
-.AppContainer {
-  background-color: #f1f3f6;
-  z-index: -1;
-  min-height: 100vh;
-}
-
 input,
 button,
 textarea,
@@ -35,10 +29,6 @@ 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,
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
deleted file mode 100644
index c72c12d..0000000
--- a/client/src/components/ui/Button.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-type ButtonType = React.ComponentPropsWithoutRef<'button'>
-
-export default function Button({ children, ...props }: ButtonType) {
-  return <button {...props}>{children}</button>
-}
diff --git a/client/src/layouts/filters/SidebarFilters.tsx b/client/src/layouts/filters/SidebarFilters.tsx
index 1176029..1f30f3a 100644
--- a/client/src/layouts/filters/SidebarFilters.tsx
+++ b/client/src/layouts/filters/SidebarFilters.tsx
@@ -1,16 +1,22 @@
 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',
@@ -18,21 +24,19 @@ function SidebarFilters() {
           flexDirection: 'column',
         }}
       >
-        {/* Clear Filters */}
         <ClearFilter />
 
-        {/* Price Filter */}
+        <AppliedFilters />
+
         <PriceSliderFilter />
-        {/* Sort products */}
+
         <SortProductsFilter />
 
-        {/* Ratings filter */}
         <RatingFilter />
 
-        {/* Category Filters */}
         <CategoryFilter />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/client/src/layouts/filters/components/CategoryFilter.tsx b/client/src/layouts/filters/components/CategoryFilter.tsx
index fbaacfd..797563a 100644
--- a/client/src/layouts/filters/components/CategoryFilter.tsx
+++ b/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>
diff --git a/client/src/layouts/filters/components/PriceSliderFilter.tsx b/client/src/layouts/filters/components/PriceSliderFilter.tsx
index 458e064..2f74e98 100644
--- a/client/src/layouts/filters/components/PriceSliderFilter.tsx
+++ b/client/src/layouts/filters/components/PriceSliderFilter.tsx
@@ -7,12 +7,11 @@ 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}
@@ -20,6 +19,7 @@ function PriceSliderFilter() {
           max={2000}
           min={10}
           step={100}
+          size="small"
         />
       </div>
     </section>
diff --git a/client/src/layouts/filters/components/RatingFilter.tsx b/client/src/layouts/filters/components/RatingFilter.tsx
index c0ce54b..09473c7 100644
--- a/client/src/layouts/filters/components/RatingFilter.tsx
+++ b/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>
diff --git a/client/src/layouts/filters/components/SortProductsFilter.tsx b/client/src/layouts/filters/components/SortProductsFilter.tsx
index ecff194..01c1f95 100644
--- a/client/src/layouts/filters/components/SortProductsFilter.tsx
+++ b/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>
diff --git a/client/src/layouts/filters/components/applied-filters/AppliedFilters.module.css b/client/src/layouts/filters/components/applied-filters/AppliedFilters.module.css
new file mode 100644
index 0000000..d874a86
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/layouts/filters/components/applied-filters/AppliedFilters.tsx b/client/src/layouts/filters/components/applied-filters/AppliedFilters.tsx
new file mode 100644
index 0000000..fef759d
--- /dev/null
+++ b/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
diff --git a/client/src/layouts/filters/components/clear-filter/ClearFilter.module.css b/client/src/layouts/filters/components/clear-filter/ClearFilter.module.css
new file mode 100644
index 0000000..f2a71a1
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/layouts/filters/components/ClearFilter.tsx b/client/src/layouts/filters/components/clear-filter/ClearFilter.tsx
similarity index 56%
rename from client/src/layouts/filters/components/ClearFilter.tsx
rename to client/src/layouts/filters/components/clear-filter/ClearFilter.tsx
index b6ddc98..3787277 100644
--- a/client/src/layouts/filters/components/ClearFilter.tsx
+++ b/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>
   )
 }
diff --git a/client/src/layouts/footer/Footer.tsx b/client/src/layouts/footer/Footer.tsx
index 096ab5a..aad4c84 100644
--- a/client/src/layouts/footer/Footer.tsx
+++ b/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}>
diff --git a/client/src/layouts/header/Header.tsx b/client/src/layouts/header/Header.tsx
index eb07753..aaf6afc 100644
--- a/client/src/layouts/header/Header.tsx
+++ b/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}>
diff --git a/client/src/main.tsx b/client/src/main.tsx
index c3e71be..7c8e4b1 100644
--- a/client/src/main.tsx
+++ b/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') {
diff --git a/client/src/pages/product-listing/ProductListingPage.tsx b/client/src/pages/product-listing/ProductListingPage.tsx
index 56086a3..ecd5f4e 100644
--- a/client/src/pages/product-listing/ProductListingPage.tsx
+++ b/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>
diff --git a/client/src/pages/product-listing/components/product-card/ProductCard.module.css b/client/src/pages/product-listing/components/product-card/ProductCard.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/product-listing/components/product-card/ProductCard.tsx b/client/src/pages/product-listing/components/product-card/ProductCard.tsx
index 124cb06..a3b4621 100644
--- a/client/src/pages/product-listing/components/product-card/ProductCard.tsx
+++ b/client/src/pages/product-listing/components/product-card/ProductCard.tsx
@@ -1,5 +1,5 @@
 import { ProductType } from '@/types'
-import { Paper } from '@mui/material'
+import Paper from '@mui/material/Paper'
 import { Link } from 'react-router-dom'
 
 type Props = {
@@ -7,7 +7,6 @@ type Props = {
 }
 
 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>
diff --git a/client/src/pages/product-listing/components/products/Products.tsx b/client/src/pages/product-listing/components/products/Products.tsx
index 6274247..55a30a6 100644
--- a/client/src/pages/product-listing/components/products/Products.tsx
+++ b/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>
   )
 }