user search products

atlp-rwanda · Jul 12, 2024 · 8e55757 · 8e55757
1 parent 234b59a
commit 8e55757
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 199 deletions.
diff --git a/src/assets/styles/Search.scss b/src/assets/styles/Search.scss
@@ -1,14 +1,12 @@
 .wrappers{
-  width: 100vw;
-  height: 100vh;
   background-color: $container-color;
   .upper-side {
           display: flex;
           align-items: center;
           height: 10rem;
           font-size: 1.5rem;
          padding: 5rem;
-         border-bottom: $fourth-color;
+         border-bottom: 2px solid rgba(119, 119, 119, 0.49);
 
          .product-name{
            font-size: 2rem;
@@ -57,7 +55,7 @@
             flex-wrap: wrap;
             margin: 3rem 3rem;
             margin-left: 5rem;
-            gap: 5rem;
+            gap: 3rem;
           }
           .loader-spinner {
             display: flex;
@@ -67,94 +65,16 @@
             margin-top: 20rem;
           }
           .noResult{  
+          margin: 0 auto;
             display: flex;
             flex-direction: column;
-            margin-left: 35%;
-            margin-top: 2vh;
+            margin-bottom: 1rem;
             img{
-              width: 400px;
+              width: auto;
               height: 400px;
             }
           }
         }
 
 
-}
-
-// .product-search {
-//   display: flex;
-//   flex-direction: column;
-//   height: 65px;
-//   background-color: $container-color;
-//   border-bottom: 1px solid #ccc;
-
-//   .main-content-product {
-//     display: flex;
-//     flex-direction: column;
-//     .upper-side {
-//       display: flex;
-//       margin-left: 50px;
-//       margin-right: 50px;
-//       height: 40px;
-//     }
-
-//     .searchPrice-box {
-//       display: flex;
-//       align-items: center;
-//       width: 80rem;
-//       height: 56px;
-//    padding-top: 10px;
-//    padding-bottom: 10px;
-//       line-height: 40px;
-//       margin-left: 5px;
-
-//       &:not(:last-child) {
-//         margin-bottom: 10px;
-//       }
-
-//       .product-name {
-//         font-size: 20px;
-//         margin-right: 10px;
-//         width: 30rem;
-//       }
-
-//       .searchSpan-price {
-//         margin: 0 6px 0 4px;
-//         line-height: 30px;
-//         font-size: 20px;
-//         vertical-align: middle;
-//         display: inline-block;
-//       }
-
-//       .dropdown-container {
-//         display: flex;
-//         align-items: center;
-
-//         .min-span,
-//         .max-span,
-//         .discount-span {
-//           display: flex;
-//           align-items: center;
-//           justify-content: space-between;
-//           width: 100px; 
-//           height: 30px; 
-//           border: 1px solid rgba(255, 109, 24, 0.49);
-//           border-radius: 4px;
-//           padding: 0 5px;
-//           font-size: 15px;
-//           cursor: pointer;
-//           margin-right: 10px; 
-//         }
-//         .header__selected__iconIcon {
-//           margin-left: 8px;
-//           color:rgba(255, 109, 24, 0.49);
-//         }
-
-//       }
-//     }
-//   }
-// }
-// .product-main{
-//   height: 500px;
-//   background-color: $container-color;
-// }
+}
diff --git a/src/assets/styles/SearchInput.scss b/src/assets/styles/SearchInput.scss
@@ -12,7 +12,7 @@
 
     .search-icon {
       font-size: 2.4rem;
-      padding: 0 1rem;
+      padding-left:1rem;
       display: flex;
       color: $primary-color;
       align-items: center;

diff --git a/src/components/inputs/SearchInput.tsx b/src/components/inputs/SearchInput.tsx
@@ -3,18 +3,17 @@
 import React, { useEffect, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 import { useAppDispatch, useAppSelector } from "../../store/store";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { searchProduct } from "../../store/features/product/productSlice";
 interface SearchInputProps {
   className: string;
   placeholder?: string;
 }
 
+
 function SearchInput({ className, placeholder }: SearchInputProps) {
   const dispatch = useAppDispatch();
-  const { isSuccess, isError, isLoading, products } = useAppSelector(
-    (state) => state.products
-  );
+  const { products } = useAppSelector((state) => state.products);
   const [search, setSearch] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -24,11 +23,8 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setSearch(value);
-    if (value.trim()) {
-      dispatch(searchProduct({ name: value.trim() }));
-    } else {
-      setIsFocused(false);
-    }
+    dispatch(searchProduct({ name: value.trim() }));
+    setIsFocused(true);
   };
 
   const handleProductClick = (name: string) => {
@@ -38,6 +34,13 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
     navigate(`/search?name=${name}`);
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (search.trim()) {
+      navigate(`/search?name=${search.trim()}`);
+    }
+  };
+
   useEffect(() => {
     if (!search.trim()) {
       setIsFocused(false);
@@ -51,15 +54,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
 
   return (
     <div className="main-search">
-      <form
-        className={`search-container ${className}`}
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (search.trim()) {
-            navigate(`/search?name=${search.trim()}`);
-          }
-        }}
-      >
+      <form className={`search-container ${className}`} onSubmit={handleSubmit}>
         <div className="search-icon">
           <FiSearch />
         </div>
@@ -75,11 +70,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
           onChange={handleSearchChange}
           value={search}
         />
-        <button
-          className="search-button"
-          type="submit"
-          onClick={() => navigate(`/search?name=${search}`)}
-        >
+        <button className="search-button" type="submit">
           Search
         </button>
       </form>
@@ -92,10 +83,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
           {filteredProducts && filteredProducts.length > 0 ? (
             filteredProducts.map((product: any) => (
               <div key={product.id} className="result">
-                <div
-                  className="link"
-                  onClick={() => handleProductClick(product.name)}
-                >
+                <div className="link" onClick={() => handleProductClick(product.name)}>
                   <p>{product.name}</p>
                 </div>
               </div>