From 0d4866d2ed2b70f43d2bf7a9b9f4a110fb4750fa Mon Sep 17 00:00:00 2001
From: Riadh mouamnia <riadh.mouamnia@gmail.com>
Date: Tue, 14 Nov 2023 13:52:03 +0100
Subject: [PATCH] fix(products page): refactor code and fix search bar

fix search bar text disappears when refresh and infinite loop when click on clear button

fixes #87
---
 .../Items/Filters/CategoryFilter.jsx          |  74 ++++++++++++
 .../Items/Filters/ClearFilterButton.jsx       |  16 +++
 .../Items/Filters/ListingTypeFilter.jsx       |  72 +++++++++++
 .../Items/Filters/LocationFilter.jsx          |  75 ++++++++++++
 src/components/Items/Filters/Pagination.jsx   |  57 +++++++++
 .../Filters/__test__/CategoryFilter.test.js   |  12 ++
 .../__test__/ClearFilterButton.test.js        |   9 ++
 .../__test__/ListingTypeFilter.test.js        |  12 ++
 .../Filters/__test__/LocationFilter.test.js   |  12 ++
 .../Items/Filters/__test__/Pagination.test.js |  21 ++++
 .../__snapshots__/CategoryFilter.test.js.snap |  63 ++++++++++
 .../ClearFilterButton.test.js.snap            |  30 +++++
 .../ListingTypeFilter.test.js.snap            |  84 +++++++++++++
 .../__snapshots__/LocationFilter.test.js.snap |  71 +++++++++++
 .../__snapshots__/Pagination.test.js.snap     |  72 +++++++++++
 src/components/Items/index.jsx                | 114 ++++++++++++++++++
 .../ProductFiltering/ClearFilterButton.jsx    |   9 +-
 .../__snapshots__/SearchBar.test.js.snap      |   1 -
 src/components/SearchBar/index.jsx            |  45 +++----
 src/pages/products/index.jsx                  |  83 ++-----------
 20 files changed, 836 insertions(+), 96 deletions(-)
 create mode 100644 src/components/Items/Filters/CategoryFilter.jsx
 create mode 100644 src/components/Items/Filters/ClearFilterButton.jsx
 create mode 100644 src/components/Items/Filters/ListingTypeFilter.jsx
 create mode 100644 src/components/Items/Filters/LocationFilter.jsx
 create mode 100644 src/components/Items/Filters/Pagination.jsx
 create mode 100644 src/components/Items/Filters/__test__/CategoryFilter.test.js
 create mode 100644 src/components/Items/Filters/__test__/ClearFilterButton.test.js
 create mode 100644 src/components/Items/Filters/__test__/ListingTypeFilter.test.js
 create mode 100644 src/components/Items/Filters/__test__/LocationFilter.test.js
 create mode 100644 src/components/Items/Filters/__test__/Pagination.test.js
 create mode 100644 src/components/Items/Filters/__test__/__snapshots__/CategoryFilter.test.js.snap
 create mode 100644 src/components/Items/Filters/__test__/__snapshots__/ClearFilterButton.test.js.snap
 create mode 100644 src/components/Items/Filters/__test__/__snapshots__/ListingTypeFilter.test.js.snap
 create mode 100644 src/components/Items/Filters/__test__/__snapshots__/LocationFilter.test.js.snap
 create mode 100644 src/components/Items/Filters/__test__/__snapshots__/Pagination.test.js.snap
 create mode 100644 src/components/Items/index.jsx

diff --git a/src/components/Items/Filters/CategoryFilter.jsx b/src/components/Items/Filters/CategoryFilter.jsx
new file mode 100644
index 0000000..79520eb
--- /dev/null
+++ b/src/components/Items/Filters/CategoryFilter.jsx
@@ -0,0 +1,74 @@
+import { Menu, Transition } from "@headlessui/react";
+import Link from "next/link";
+import { Fragment } from "react";
+import { BiCategory } from "react-icons/bi";
+import { IoMdArrowDropdown } from "react-icons/io";
+
+import getAllCategories from "@/lib/getAllCategories";
+
+function CategoryFilter({ t, queryParams }) {
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  const categories = getAllCategories(t);
+
+  return (
+    <>
+      <Menu as='div' className='relative w-full flex justify-center text-left'>
+        <Menu.Button className='flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider'>
+          <div className='flex gap-2 items-center'>
+            <BiCategory className='w-5 h-5' />
+            <span>
+              {queryParams.category
+                ? t(`categories:${queryParams.category}`)
+                : t("productsPage:all")}
+            </span>
+          </div>
+          <IoMdArrowDropdown />
+        </Menu.Button>
+
+        <Transition
+          as={Fragment}
+          enter='transition ease-out duration-100'
+          enterFrom='transform opacity-0 scale-95'
+          enterTo='transform opacity-100 scale-100'
+          leave='transition ease-in duration-75'
+          leaveFrom='transform opacity-100 scale-100'
+          leaveTo='transform opacity-0 scale-95'
+        >
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
+            <div className='py-1'>
+              {categories.map(({ name, dataKey }) => (
+                <Link
+                  scroll={false}
+                  key={dataKey}
+                  href={{
+                    pathname: "/products",
+                    query: { ...queryParams, category: dataKey },
+                  }}
+                >
+                  <Menu.Item>
+                    {({ active }) => (
+                      <p
+                        className={classNames(
+                          active
+                            ? "bg-gray-100 text-gray-900"
+                            : "text-gray-700",
+                          "block px-4 py-2 tracking-wider my-2"
+                        )}
+                      >
+                        {name}
+                      </p>
+                    )}
+                  </Menu.Item>
+                </Link>
+              ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+}
+
+export default CategoryFilter;
diff --git a/src/components/Items/Filters/ClearFilterButton.jsx b/src/components/Items/Filters/ClearFilterButton.jsx
new file mode 100644
index 0000000..4d1e720
--- /dev/null
+++ b/src/components/Items/Filters/ClearFilterButton.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { MdFilterListOff } from "react-icons/md";
+
+function ClearFilterButton({ t, handleClearFilters }) {
+  return (
+    <button
+      onClick={handleClearFilters}
+      className='btn btn-sm rounded-full btn-neutral normal-case font-light tracking-wider'
+    >
+      <MdFilterListOff />
+      {t("productsPage:clearFilter")}
+    </button>
+  );
+}
+
+export default ClearFilterButton;
diff --git a/src/components/Items/Filters/ListingTypeFilter.jsx b/src/components/Items/Filters/ListingTypeFilter.jsx
new file mode 100644
index 0000000..c5ea0fe
--- /dev/null
+++ b/src/components/Items/Filters/ListingTypeFilter.jsx
@@ -0,0 +1,72 @@
+import { Menu, Transition } from "@headlessui/react";
+import Link from "next/link";
+import { Fragment } from "react";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { TbSitemap } from "react-icons/tb";
+
+function ListingTypeFilter({ t, queryParams }) {
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  const listingTypes = ["exchangeButton", "requestButton", "donationButton"];
+
+  return (
+    <>
+      <Menu as='div' className='relative w-full flex justify-center text-left'>
+        <Menu.Button className='flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider'>
+          <div className='flex gap-2 items-center'>
+            <TbSitemap className='w-5 h-5' />
+            <span>
+              {queryParams.listingType
+                ? t(`addItem:${queryParams.listingType}`)
+                : "Listing type"}
+            </span>
+          </div>
+          <IoMdArrowDropdown />
+        </Menu.Button>
+
+        <Transition
+          as={Fragment}
+          enter='transition ease-out duration-100'
+          enterFrom='transform opacity-0 scale-95'
+          enterTo='transform opacity-100 scale-100'
+          leave='transition ease-in duration-75'
+          leaveFrom='transform opacity-100 scale-100'
+          leaveTo='transform opacity-0 scale-95'
+        >
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
+            <div className='py-1'>
+              {listingTypes.map((type) => (
+                <Link
+                  scroll={false}
+                  key={type}
+                  href={{
+                    pathname: "/products",
+                    query: { ...queryParams, listingType: type },
+                  }}
+                >
+                  <Menu.Item>
+                    {({ active }) => (
+                      <p
+                        className={classNames(
+                          active
+                            ? "bg-gray-100 text-gray-900"
+                            : "text-gray-700",
+                          "block px-4 py-2 tracking-wider my-2"
+                        )}
+                      >
+                        {t(`addItem:${type}`)}
+                      </p>
+                    )}
+                  </Menu.Item>
+                </Link>
+              ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+}
+
+export default ListingTypeFilter;
diff --git a/src/components/Items/Filters/LocationFilter.jsx b/src/components/Items/Filters/LocationFilter.jsx
new file mode 100644
index 0000000..de7705f
--- /dev/null
+++ b/src/components/Items/Filters/LocationFilter.jsx
@@ -0,0 +1,75 @@
+import { Menu, Transition } from "@headlessui/react";
+import Link from "next/link";
+import { Fragment } from "react";
+import { HiOutlineLocationMarker } from "react-icons/hi";
+import { IoMdArrowDropdown } from "react-icons/io";
+
+import getAllStates from "@/lib/getAllStates";
+
+function LocationFilter({ t, queryParams }) {
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  //This is to test the LocationFilter
+  const states = getAllStates(t);
+
+  return (
+    <>
+      <Menu as='div' className='relative w-full flex justify-center text-left'>
+        <Menu.Button className='flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider'>
+          <div className='flex gap-2 items-center'>
+            <HiOutlineLocationMarker className='w-5 h-5' />
+            <span>
+              {queryParams.location
+                ? t(`states:${queryParams.location}`)
+                : t("productsPage:location")}
+            </span>
+          </div>
+          <IoMdArrowDropdown />
+        </Menu.Button>
+
+        <Transition
+          as={Fragment}
+          enter='transition ease-out duration-100'
+          enterFrom='transform opacity-0 scale-95'
+          enterTo='transform opacity-100 scale-100'
+          leave='transition ease-in duration-75'
+          leaveFrom='transform opacity-100 scale-100'
+          leaveTo='transform opacity-0 scale-95'
+        >
+          <Menu.Items className='absolute max-h-52 no-scrollbar overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
+            <div className='py-1'>
+              {states.map(({ name, dataKey }) => (
+                <Link
+                  scroll={false}
+                  key={dataKey}
+                  href={{
+                    pathname: "/products",
+                    query: { ...queryParams, location: dataKey },
+                  }}
+                >
+                  <Menu.Item>
+                    {({ active }) => (
+                      <p
+                        className={classNames(
+                          active
+                            ? "bg-gray-100 text-gray-900"
+                            : "text-gray-700",
+                          "block px-4 py-2 tracking-wider my-2"
+                        )}
+                      >
+                        {name}
+                      </p>
+                    )}
+                  </Menu.Item>
+                </Link>
+              ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+}
+
+export default LocationFilter;
diff --git a/src/components/Items/Filters/Pagination.jsx b/src/components/Items/Filters/Pagination.jsx
new file mode 100644
index 0000000..224bf0d
--- /dev/null
+++ b/src/components/Items/Filters/Pagination.jsx
@@ -0,0 +1,57 @@
+import { useRouter } from "next/router";
+import { BiLeftArrow, BiRightArrow } from "react-icons/bi";
+
+function Pagination({ page, pageSize, totalItems, queryParams, totalPages }) {
+  const router = useRouter();
+
+  const hasPrev = pageSize * (parseInt(page) - 1) > 0;
+  const hasNext = pageSize * (parseInt(page) - 1) + pageSize < totalItems;
+
+  const handleChangePage = (type) => {
+    type === "prev"
+      ? router.push(
+          {
+            pathname: `/products`,
+            query: { ...queryParams, page: page - 1 },
+          },
+          undefined,
+          { scroll: false }
+        )
+      : router.push(
+          {
+            pathname: `/products`,
+            query: { ...queryParams, page: page + 1 },
+          },
+          undefined,
+          { scroll: false }
+        );
+  };
+
+  return (
+    <div className='flex items-center justify-center md:justify-between flex-wrap gap-4'>
+      <div className='flex gap-4'>
+        <button
+          className='btn btn-sm normal-case font-normal tracking-wide'
+          disabled={!hasPrev}
+          onClick={() => handleChangePage("prev")}
+        >
+          <BiLeftArrow /> Previous
+        </button>
+        <button
+          className='btn btn-sm normal-case font-normal tracking-wide'
+          disabled={!hasNext}
+          onClick={() => handleChangePage("next")}
+        >
+          Next <BiRightArrow />
+        </button>
+      </div>
+      <div>
+        <p className='font-normal opacity-50 text-sm tracking-wide'>
+          page: {page} of {totalPages}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Pagination;
diff --git a/src/components/Items/Filters/__test__/CategoryFilter.test.js b/src/components/Items/Filters/__test__/CategoryFilter.test.js
new file mode 100644
index 0000000..9f4227e
--- /dev/null
+++ b/src/components/Items/Filters/__test__/CategoryFilter.test.js
@@ -0,0 +1,12 @@
+import renderer from "react-test-renderer";
+
+import CategoryFilter from "../CategoryFilter";
+
+it("renders correctly", () => {
+  const queryParams = {};
+  const mockT = jest.fn();
+  const tree = renderer
+    .create(<CategoryFilter queryParams={queryParams} t={mockT} />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Items/Filters/__test__/ClearFilterButton.test.js b/src/components/Items/Filters/__test__/ClearFilterButton.test.js
new file mode 100644
index 0000000..0255d53
--- /dev/null
+++ b/src/components/Items/Filters/__test__/ClearFilterButton.test.js
@@ -0,0 +1,9 @@
+import renderer from "react-test-renderer";
+
+import ClearFilterButton from "../ClearFilterButton";
+
+it("renders correctly", () => {
+  const mockT = jest.fn();
+  const tree = renderer.create(<ClearFilterButton t={mockT} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Items/Filters/__test__/ListingTypeFilter.test.js b/src/components/Items/Filters/__test__/ListingTypeFilter.test.js
new file mode 100644
index 0000000..9bd244c
--- /dev/null
+++ b/src/components/Items/Filters/__test__/ListingTypeFilter.test.js
@@ -0,0 +1,12 @@
+import renderer from "react-test-renderer";
+
+import ListingTypeFilter from "../ListingTypeFilter";
+
+it("renders correctly", () => {
+  const queryParams = {};
+  const mockT = jest.fn();
+  const tree = renderer
+    .create(<ListingTypeFilter queryParams={queryParams} t={mockT} />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Items/Filters/__test__/LocationFilter.test.js b/src/components/Items/Filters/__test__/LocationFilter.test.js
new file mode 100644
index 0000000..1f02f97
--- /dev/null
+++ b/src/components/Items/Filters/__test__/LocationFilter.test.js
@@ -0,0 +1,12 @@
+import renderer from "react-test-renderer";
+
+import LocationFilter from "../LocationFilter";
+
+it("renders correctly", () => {
+  const queryParams = {};
+  const mockT = jest.fn();
+  const tree = renderer
+    .create(<LocationFilter queryParams={queryParams} t={mockT} />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Items/Filters/__test__/Pagination.test.js b/src/components/Items/Filters/__test__/Pagination.test.js
new file mode 100644
index 0000000..f1237fe
--- /dev/null
+++ b/src/components/Items/Filters/__test__/Pagination.test.js
@@ -0,0 +1,21 @@
+import renderer from "react-test-renderer";
+
+import Pagination from "../Pagination";
+
+it("renders correctly", () => {
+  const queryParams = {};
+  const mockT = jest.fn();
+  const tree = renderer
+    .create(
+      <Pagination
+        page={1}
+        totalItems={4}
+        totalPages={3}
+        pageSize={4}
+        queryParams={queryParams}
+        t={mockT}
+      />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Items/Filters/__test__/__snapshots__/CategoryFilter.test.js.snap b/src/components/Items/Filters/__test__/__snapshots__/CategoryFilter.test.js.snap
new file mode 100644
index 0000000..4d36c33
--- /dev/null
+++ b/src/components/Items/Filters/__test__/__snapshots__/CategoryFilter.test.js.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="relative w-full flex justify-center text-left"
+  data-headlessui-state=""
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="menu"
+    className="flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider"
+    data-headlessui-state=""
+    id="headlessui-menu-button-:r0:"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    type="button"
+  >
+    <div
+      className="flex gap-2 items-center"
+    >
+      <svg
+        className="w-5 h-5"
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm11-6h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 6h-4V5h4v4zm-9 4H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm-1 6H5v-4h4v4zm8-6c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"
+        />
+      </svg>
+      <span />
+    </div>
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        Object {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 512 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M128 192l128 128 128-128z"
+      />
+    </svg>
+  </button>
+</div>
+`;
diff --git a/src/components/Items/Filters/__test__/__snapshots__/ClearFilterButton.test.js.snap b/src/components/Items/Filters/__test__/__snapshots__/ClearFilterButton.test.js.snap
new file mode 100644
index 0000000..54ffc20
--- /dev/null
+++ b/src/components/Items/Filters/__test__/__snapshots__/ClearFilterButton.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<button
+  className="btn btn-sm rounded-full btn-neutral normal-case font-light tracking-wider"
+>
+  <svg
+    fill="currentColor"
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 0h24v24H0z"
+      fill="none"
+    />
+    <path
+      d="M10.83 8H21V6H8.83l2 2zm5 5H18v-2h-4.17l2 2zM14 16.83V18h-4v-2h3.17l-3-3H6v-2h2.17l-3-3H3V6h.17L1.39 4.22 2.8 2.81l18.38 18.38-1.41 1.41L14 16.83z"
+    />
+  </svg>
+</button>
+`;
diff --git a/src/components/Items/Filters/__test__/__snapshots__/ListingTypeFilter.test.js.snap b/src/components/Items/Filters/__test__/__snapshots__/ListingTypeFilter.test.js.snap
new file mode 100644
index 0000000..df209ca
--- /dev/null
+++ b/src/components/Items/Filters/__test__/__snapshots__/ListingTypeFilter.test.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="relative w-full flex justify-center text-left"
+  data-headlessui-state=""
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="menu"
+    className="flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider"
+    data-headlessui-state=""
+    id="headlessui-menu-button-:r0:"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    type="button"
+  >
+    <div
+      className="flex gap-2 items-center"
+    >
+      <svg
+        className="w-5 h-5"
+        fill="none"
+        height="1em"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+          stroke="none"
+        />
+        <path
+          d="M3 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+        />
+        <path
+          d="M15 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+        />
+        <path
+          d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
+        />
+        <path
+          d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1"
+        />
+        <path
+          d="M12 9l0 3"
+        />
+      </svg>
+      <span>
+        Listing type
+      </span>
+    </div>
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        Object {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 512 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M128 192l128 128 128-128z"
+      />
+    </svg>
+  </button>
+</div>
+`;
diff --git a/src/components/Items/Filters/__test__/__snapshots__/LocationFilter.test.js.snap b/src/components/Items/Filters/__test__/__snapshots__/LocationFilter.test.js.snap
new file mode 100644
index 0000000..e34437c
--- /dev/null
+++ b/src/components/Items/Filters/__test__/__snapshots__/LocationFilter.test.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="relative w-full flex justify-center text-left"
+  data-headlessui-state=""
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="menu"
+    className="flex items-center gap-2 w-full justify-between border bg-white input-sm rounded-full tracking-wider"
+    data-headlessui-state=""
+    id="headlessui-menu-button-:r0:"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    type="button"
+  >
+    <div
+      className="flex gap-2 items-center"
+    >
+      <svg
+        aria-hidden="true"
+        className="w-5 h-5"
+        fill="none"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="2"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span />
+    </div>
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        Object {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 512 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M128 192l128 128 128-128z"
+      />
+    </svg>
+  </button>
+</div>
+`;
diff --git a/src/components/Items/Filters/__test__/__snapshots__/Pagination.test.js.snap b/src/components/Items/Filters/__test__/__snapshots__/Pagination.test.js.snap
new file mode 100644
index 0000000..c116ba6
--- /dev/null
+++ b/src/components/Items/Filters/__test__/__snapshots__/Pagination.test.js.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="flex items-center justify-center md:justify-between flex-wrap gap-4"
+>
+  <div
+    className="flex gap-4"
+  >
+    <button
+      className="btn btn-sm normal-case font-normal tracking-wide"
+      disabled={true}
+      onClick={[Function]}
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.464 2.114a.998.998 0 0 0-1.033.063l-13 9a1.003 1.003 0 0 0 0 1.645l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-.536-.886zM17 19.091 6.757 12 17 4.909v14.182z"
+        />
+      </svg>
+       Previous
+    </button>
+    <button
+      className="btn btn-sm normal-case font-normal tracking-wide"
+      disabled={true}
+      onClick={[Function]}
+    >
+      Next 
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          Object {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.536 21.886a1.004 1.004 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A.998.998 0 0 0 5 3v18a1 1 0 0 0 .536.886zM7 4.909 17.243 12 7 19.091V4.909z"
+        />
+      </svg>
+    </button>
+  </div>
+  <div>
+    <p
+      className="font-normal opacity-50 text-sm tracking-wide"
+    >
+      page: 
+      1
+       of 
+      3
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/Items/index.jsx b/src/components/Items/index.jsx
new file mode 100644
index 0000000..0d5ddec
--- /dev/null
+++ b/src/components/Items/index.jsx
@@ -0,0 +1,114 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { BsBoxSeam } from "react-icons/bs";
+import { IoAddCircleOutline } from "react-icons/io5";
+import { MdFilterList } from "react-icons/md";
+
+import CategoryFilter from "./Filters/CategoryFilter";
+import ClearFilterButton from "./Filters/ClearFilterButton";
+import ListingTypeFilter from "./Filters/ListingTypeFilter";
+import LocationFilter from "./Filters/LocationFilter";
+import Pagination from "./Filters/Pagination";
+import ProductCard from "../ProductCard";
+import SearchBar from "../SearchBar";
+
+function Items({
+  t,
+  queryParams,
+  totalItems,
+  items,
+  page,
+  totalPages,
+  pageSize,
+}) {
+  const router = useRouter();
+  const [searchText, setSearchText] = useState(queryParams.search || "");
+
+  useEffect(() => {
+    if (!queryParams.search) {
+      setSearchText("");
+    }
+  }, [queryParams.search]);
+
+  const handleClearFilters = async () => {
+    router.push(
+      {
+        pathname: "/products",
+        query: undefined,
+      },
+      undefined,
+      { scroll: false }
+    );
+  };
+  return (
+    <div className='flex flex-col lg:flex-row px-8 gap-8 mt-10 items-start min-h-[80vh]'>
+      <div className='lg:w-[30%] h-full w-full bg-white drop-shadow-lg p-4 rounded-xl flex gap-6 flex-col'>
+        <h3 className='flex gap-2 items-center text-2xl tracking-wide lg:mb-8'>
+          <MdFilterList /> Filters
+        </h3>
+        <LocationFilter t={t} queryParams={queryParams} />
+        <CategoryFilter t={t} queryParams={queryParams} />
+        <ListingTypeFilter t={t} queryParams={queryParams} />
+
+        <ClearFilterButton t={t} handleClearFilters={handleClearFilters} />
+      </div>
+      <div className='flex flex-col gap-8 flex-1'>
+        <div className='bg-white drop-shadow-lg flex flex-wrap gap-2 rounded-xl p-4 justify-between'>
+          <h1
+            className='flex gap-2 items-center text-xl tracking-wide flex-1 min-w-fit '
+            id='products'
+          >
+            <BsBoxSeam />
+            {t("productsPage:productsList")}
+            <span className='opacity-70'> | {totalItems}</span>
+          </h1>
+          <SearchBar
+            t={t}
+            queryParams={queryParams}
+            searchText={searchText}
+            setSearchText={setSearchText}
+          />
+          <Link
+            placeholder='dasda'
+            href='/products/create'
+            className='btn btn-sm rounded-full normal-case font-normal'
+          >
+            <IoAddCircleOutline size={20} />
+            {t("common:buttons:addItem")}
+          </Link>
+        </div>
+        <div className='bg-white drop-shadow-lg rounded-xl p-4 flex flex-col gap-4 lg:min-h-[300px] justify-between'>
+          <div className='flex flex-wrap gap-4 items-center justify-center md:justify-start w-full'>
+            {items.map((item) => (
+              <Link
+                key={item.id}
+                href={{
+                  pathname: `/products/${item.id}`,
+                }}
+              >
+                <ProductCard
+                  title={item.title}
+                  listingType={t(`addItem:${item.listingType}`)}
+                  category={t(`categories:${item.category}`)}
+                  location={t(`states:${item.location}`)}
+                  imageUrl={item.images[0]}
+                />
+              </Link>
+            ))}
+            {!items.length && <p>No items found...</p>}
+          </div>
+          <Pagination
+            totalItems={totalItems}
+            page={page}
+            queryParams={queryParams}
+            totalPages={totalPages}
+            pageSize={pageSize}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Items;
diff --git a/src/components/ProductFiltering/ClearFilterButton.jsx b/src/components/ProductFiltering/ClearFilterButton.jsx
index 08a9c5c..c7209ad 100644
--- a/src/components/ProductFiltering/ClearFilterButton.jsx
+++ b/src/components/ProductFiltering/ClearFilterButton.jsx
@@ -7,7 +7,14 @@ function ClearFilterButton({ t }) {
   return (
     <button
       onClick={() => {
-        router.push("/products", undefined, { scroll: false });
+        router.replace(
+          {
+            pathname: "/products",
+            query: {},
+          },
+          undefined,
+          { scroll: false }
+        );
       }}
       className='btn btn-sm rounded-full btn-neutral normal-case font-light tracking-wider'
     >
diff --git a/src/components/SearchBar/__test__/__snapshots__/SearchBar.test.js.snap b/src/components/SearchBar/__test__/__snapshots__/SearchBar.test.js.snap
index 9009ddf..f934df0 100644
--- a/src/components/SearchBar/__test__/__snapshots__/SearchBar.test.js.snap
+++ b/src/components/SearchBar/__test__/__snapshots__/SearchBar.test.js.snap
@@ -27,7 +27,6 @@ exports[`renders correctly 1`] = `
     className="border-none input-sm rounded-full input-bordered input bg-gray-50 outline-none font-light normal-case w-full"
     onChange={[Function]}
     type="text"
-    value=""
   />
 </div>
 `;
diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx
index 3c15f97..c736d96 100644
--- a/src/components/SearchBar/index.jsx
+++ b/src/components/SearchBar/index.jsx
@@ -1,49 +1,52 @@
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { RiSearch2Line } from "react-icons/ri";
 import { useDebounce } from "use-debounce";
 
-function SearchBar({ t, queryParams }) {
+function SearchBar({ t, queryParams, searchText, setSearchText }) {
   const router = useRouter();
-  const [text, setText] = useState("");
-  let [query] = useDebounce(text, 600);
+  let [query] = useDebounce(searchText, 300);
+
+  const handleSearch = (e) => {
+    setSearchText(e.target.value);
+  };
 
   useEffect(() => {
-    // Update the query state when text or queryParams change
     const newQueryParams = { ...queryParams };
     if (query) {
       newQueryParams.search = query;
       delete newQueryParams.page;
+      const currentURL = router.query.search || "";
+
+      if (query !== currentURL) {
+        router.push(
+          {
+            pathname: "/products",
+            query: newQueryParams,
+          },
+          undefined,
+          { scroll: false }
+        );
+      }
     } else {
       delete newQueryParams.search;
-    }
-
-    const currentURL = router.query.search || "";
-
-    // Only update the URL if it's different from the current URL
-    if (query !== currentURL) {
       router.push(
         {
-          pathname: `/products`,
-          query: newQueryParams,
+          pathName: "/products",
+          query: { ...newQueryParams },
         },
         undefined,
         { scroll: false }
       );
     }
-  }, [query, queryParams, router]);
-
-  useEffect(() => {
-    // Update the text input when queryParams change
-    setText(queryParams.search || "");
-  }, [queryParams.search]);
+  }, [query]);
 
   return (
     <div className='relative rounded-full border'>
       <RiSearch2Line className='absolute right-3 translate-y-1/2 transform text-gray-500' />
       <input
-        value={text}
-        onChange={(e) => setText(e.target.value)}
+        value={searchText}
+        onChange={handleSearch}
         type='text'
         placeholder={t("productsPage:searchPlaceHolder")}
         className='border-none input-sm rounded-full input-bordered input bg-gray-50 outline-none font-light normal-case w-full'
diff --git a/src/pages/products/index.jsx b/src/pages/products/index.jsx
index 0a24490..ab19807 100644
--- a/src/pages/products/index.jsx
+++ b/src/pages/products/index.jsx
@@ -1,21 +1,11 @@
-import Link from "next/link";
 import { withTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { BsBoxSeam } from "react-icons/bs";
-import { IoAddCircleOutline } from "react-icons/io5";
-import { MdFilterList } from "react-icons/md";
 
 import { fetchCollectionWithQuery } from "@/lib/fetchCollectionWithQuery";
 import getAllCategories from "@/lib/getAllCategories";
 
 import Carousel from "@/components/Carousel";
-import ProductCard from "@/components/ProductCard";
-import CategoryFilter from "@/components/ProductFiltering/CategoryFilter";
-import ClearFilterButton from "@/components/ProductFiltering/ClearFilterButton";
-import ListingTypeFilter from "@/components/ProductFiltering/ListingTypeFilter";
-import LocationFilter from "@/components/ProductFiltering/LocationFilter";
-import Pagination from "@/components/ProductFiltering/Pagination";
-import SearchBar from "@/components/SearchBar";
+import Items from "@/components/Items";
 
 function ProductsPage({
   t,
@@ -29,71 +19,18 @@ function ProductsPage({
   const categories = getAllCategories(t);
   return (
     <main className='pb-10'>
-      {/* This is Categories Section */}
       <div className='relative md:h-[75vh] h-[80vh] overflow-x-hidden w-full'>
         <Carousel t={t} items={categories} queryParams={queryParams} />
       </div>
-      <div className='flex flex-col lg:flex-row px-8 gap-8 mt-10 items-start min-h-[80vh]'>
-        <div className='lg:w-[30%] h-full w-full bg-white drop-shadow-lg p-4 rounded-xl flex gap-6 flex-col'>
-          <h3 className='flex gap-2 items-center text-2xl tracking-wide lg:mb-8'>
-            <MdFilterList /> Filters
-          </h3>
-          <LocationFilter t={t} queryParams={queryParams} />
-          <CategoryFilter t={t} queryParams={queryParams} />
-          <ListingTypeFilter t={t} queryParams={queryParams} />
-
-          <ClearFilterButton t={t} />
-        </div>
-        <div className='flex flex-col gap-8 flex-1'>
-          <div className='bg-white drop-shadow-lg flex flex-wrap gap-2 rounded-xl p-4 justify-between'>
-            <h1
-              className='flex gap-2 items-center text-xl tracking-wide flex-1 min-w-fit '
-              id='products'
-            >
-              <BsBoxSeam />
-              {t("productsPage:productsList")}
-              <span className='opacity-70'> | {totalItems}</span>
-            </h1>
-            <SearchBar t={t} queryParams={queryParams} />
-            <Link
-              placeholder='dasda'
-              href='/products/create'
-              className='btn btn-sm rounded-full normal-case font-normal'
-            >
-              <IoAddCircleOutline size={20} />
-              {t("common:buttons:addItem")}
-            </Link>
-          </div>
-          <div className='bg-white drop-shadow-lg rounded-xl p-4 flex flex-col gap-4'>
-            <div className='flex flex-wrap gap-4 items-center justify-center md:justify-start w-full'>
-              {items.map((item) => (
-                <Link
-                  key={item.id}
-                  href={{
-                    pathname: `/products/${item.id}`,
-                  }}
-                >
-                  <ProductCard
-                    title={item.title}
-                    listingType={t(`addItem:${item.listingType}`)}
-                    category={t(`categories:${item.category}`)}
-                    location={t(`states:${item.location}`)}
-                    imageUrl={item.images[0]}
-                  />
-                </Link>
-              ))}
-              {!items.length && <p>No items found...</p>}
-            </div>
-            <Pagination
-              totalItems={totalItems}
-              page={page}
-              queryParams={queryParams}
-              totalPages={totalPages}
-              pageSize={pageSize}
-            />
-          </div>
-        </div>
-      </div>
+      <Items
+        t={t}
+        queryParams={queryParams}
+        items={items}
+        page={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        totalPages={totalPages}
+      />
     </main>
   );
 }