[#3] feat: implement search functionality

client/src/components/PageInfo/index.jsx

@@ -1,12 +1,16 @@
 import styles from "./styles.module.scss";
+import { useProducts } from "../../contexts/Products/ProductsContext";
 
 export default function PageInfo() {
+  const { searchQuery, products } = useProducts();
+
+  console.log("searched data", products.searched);
   return (
     <div className={styles.Container}>
-      <h1 className={styles.PageTitle}>iPhone iOS cep telefonu</h1>
+      <h1 className={styles.PageTitle}>Arama Sonuçları</h1>
       <div className={styles.SearchContainer}>
         <label className={styles.SearchLabel}>Aranan Kelime:</label>
-        <span className={styles.searchText}>iphone 11</span>
+        <span className={styles.searchText}>{searchQuery}</span>
       </div>
     </div>
   );

client/src/components/ProductTable/Pagination/index.jsx

@@ -1,30 +1,47 @@
-// import { usePagination } from "../../../contexts/Pagination/PaginationContext";
 import styles from "./styles.module.scss";
-
+import cn from "classnames";
+// current = number
 export default function Pagination({
   totalProducts,
   productsPerPage,
   paginate,
+  currentPage,
 }) {
   const pageNumbers = [];
+  const current = currentPage;
 
   for (let i = 1; i <= Math.ceil(totalProducts / productsPerPage); i++) {
     pageNumbers.push(i);
   }
 
   return (
     <div className={styles.Container}>
-      <button className={styles.Button}>&#60;</button>
+      <button
+        className={styles.Button}
+        onClick={() => paginate(current === 1 ? current : current - 1)}
+      >
+        &#60;
+      </button>
       {pageNumbers.map((number) => (
         <button
           key={number}
           onClick={() => paginate(number)}
-          className={styles.Button}
+          className={cn(
+            styles.Button,
+            currentPage === number ? styles.Stroke : undefined
+          )}
         >
           {number}
         </button>
       ))}
-      <button className={styles.Button}>&#62;</button>
+      <button
+        className={styles.Button}
+        onClick={() =>
+          paginate(current === pageNumbers.length ? current : current + 1)
+        }
+      >
+        &#62;
+      </button>
     </div>
   );
 }

client/src/components/ProductTable/Pagination/styles.module.scss

@@ -3,7 +3,7 @@
 .Container {
   display: flex;
   align-items: center;
-  margin-top: 39px;
+  margin-top: 22px;
 
   .Button {
     cursor: pointer;
@@ -23,4 +23,8 @@
       margin-right: 0;
     }
   }
+
+  .Stroke {
+    border: 1px solid vars.$stroke-border-color;
+  }
 }

client/src/components/ProductTable/ProductItem/index.jsx

@@ -9,16 +9,13 @@ export default function ProductItem({ product }) {
   const [isHovered, setIsHovered] = useState(false);
 
   const {
-    // _id,
     name,
     brand,
     color,
     price: { base, discountAmount },
-    // createDate,
     imgUrl,
   } = product;
 
-  console.log(product);
   const onMouseEnter = () => setIsHovered(true);
   const onMouseLeave = () => setIsHovered(false);
   return (

client/src/components/ProductTable/ProductRow/styles.module.scss

@@ -5,4 +5,5 @@
   min-width: 100%;
   height: 479px;
   max-height: 479px;
+  margin-bottom: 17px;
 }

client/src/components/ProductTable/index.jsx

@@ -19,10 +19,19 @@ export default function ProductTable() {
   // Get current products
   const indexOfLastProduct = currentPage * productsPerPage;
   const indexOfFirstProduct = indexOfLastProduct - productsPerPage;
-  const currentProducts = products.slice(
-    indexOfFirstProduct,
-    indexOfLastProduct
-  );
+
+  let data = products.initial;
+
+  if (products.searched.length > 0) {
+    data = products.searched;
+  } else if (products.filtered.length > 0) {
+    data = products.filtered;
+  }
+  // else if (products.sorted){ // true false kontrolu lazim
+  //   data = products.sorted;
+  // }
+
+  let currentProducts = data.slice(indexOfFirstProduct, indexOfLastProduct);
 
   let rows = [];
   for (let i = 1; i <= rowCount; i++) {
@@ -36,12 +45,12 @@ export default function ProductTable() {
 
     rows.push(rowData);
   }
-  console.log(rows);
 
   return (
     <div className={styles.Container}>
       <div className={styles.Table}>
         {rows.map((items, i) => {
+          if (items.length === 0) return <></>;
           return (
             <ProductRow key={i}>
               {items.map((item, i) => {
@@ -52,9 +61,10 @@ export default function ProductTable() {
         })}
       </div>
       <Pagination
+        currentPage={currentPage}
         paginate={paginate}
         productsPerPage={productsPerPage}
-        totalProducts={products.length}
+        totalProducts={data.length}
       />
     </div>
   );

client/src/components/ProductTable/styles.module.scss

@@ -10,7 +10,5 @@
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
-    height: 1465px;
-    min-height: 1465px;
   }
 }

client/src/components/Search/index.jsx

@@ -5,7 +5,7 @@ import { useProducts } from "../../contexts/Products/ProductsContext";
 
 export default function Search() {
   const [searchField, setSearchField] = useState({ query: "" });
-  const { products, setFilteredProducts } = useProducts();
+  const { products, setProducts, setSearchQuery } = useProducts();
 
   const handleChange = (event) => {
     setSearchField({ query: event.target.value });
@@ -16,10 +16,24 @@ export default function Search() {
       console.error("Input is not valid.");
       return;
     } else {
-      const filteredProducts = products.filter((product) =>
-        product.name.toLowerCase().includes(searchField.query.toLowerCase())
+      const searchedProducts = products.initial.filter(
+        (product) =>
+          product.name
+            .toLowerCase()
+            .includes(searchField.query.toLowerCase()) ||
+          product.name
+            .toLowerCase()
+            .replace(" ", "")
+            .includes(searchField.query.toLowerCase())
       );
-      setFilteredProducts(filteredProducts);
+      setProducts({
+        initial: products.initial,
+        searched: searchedProducts,
+        filtered: [],
+        sorted: [],
+      });
+      setSearchQuery(searchField.query);
+      setSearchField({ query: "" });
     }
   };
 
@@ -34,6 +48,7 @@ export default function Search() {
         placeholder="25 milyon'dan fazla ürün içerisinde ara"
         onChange={handleChange}
         onKeyPress={(event) => event.key === "Enter" && search()}
+        value={searchField.query}
       />
     </div>
   );

client/src/contexts/Products/ProductsContext.js

@@ -4,8 +4,14 @@ import axios from "axios";
 const ProductsContext = createContext();
 
 export const ProductsProvider = ({ children }) => {
-  const [products, setProducts] = useState([]);
+  const [products, setProducts] = useState({
+    initial: [],
+    searched: [],
+    filtered: [],
+    sorted: [],
+  });
   const [filteredProducts, setFilteredProducts] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
   const [loading, setLoading] = useState(true);
 
   // fetch all products
@@ -15,7 +21,12 @@ export const ProductsProvider = ({ children }) => {
       const res = await axios.get(
         `${process.env.REACT_APP_BACKEND_ENDPOINT}/products/all`
       );
-      setProducts(res.data);
+      setProducts({
+        initial: res.data,
+        searched: [],
+        filtered: [],
+        sorted: [],
+      });
       setLoading(false);
     };
     fetchPosts();
@@ -28,6 +39,8 @@ export const ProductsProvider = ({ children }) => {
     setLoading,
     filteredProducts,
     setFilteredProducts,
+    searchQuery,
+    setSearchQuery,
   };
 
   return (