user search products

Author: MANISHIMWESalton

src/assets/styles/Search.scss

@@ -8,7 +8,7 @@
           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;
@@ -67,94 +67,15 @@
             margin-top: 20rem;
           }
           .noResult{  
+          margin: 0 auto;
             display: flex;
             flex-direction: column;
-            margin-left: 35%;
-            margin-top: 2vh;
             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;
-// }
+}

src/pages/Search.tsx

@@ -6,6 +6,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import noresults from "../../public/assets/images/noResult.png"
 import Product from "../components/product/Product";
 import { searchProduct } from "../store/features/product/productSlice";
+import { PuffLoader } from "react-spinners";
 
 const SearchBar: React.FC = () => {
   const location = useLocation();
@@ -116,20 +117,19 @@ const SearchBar: React.FC = () => {
           </div>
           <div className="product-main">
             {isLoading ? (
-              <div className="loader-spinner">
-                <SkewLoader color={"#FF6D18"} loading={isLoading} size={100} />
-              </div>
+              <div className="loader">
+              <PuffLoader color="#ff6d18" size={300} loading={isLoading} />
+            </div>
             ) : isSuccess && filteredProduct ? (
               <div className="product-list">
                 <Product
-                  key={filteredProduct.id}
-                  images={filteredProduct.images}
-                  name={filteredProduct.name}
-                  price={`$${filteredProduct.price}`}
-                  stock={Number(filteredProduct.quantity)}
-                  description={filteredProduct.description}
-                  discount={Number(filteredProduct.discount.replace("%", ""))}
-                />
+                      key={filteredProduct.id}
+                      images={filteredProduct.images}
+                      name={filteredProduct.name}
+                      price={`$${filteredProduct.price}`}
+                      stock={Number(filteredProduct.quantity)}
+                      description={filteredProduct.description}
+                      discount={Number(filteredProduct.discount.replace("%", ""))} id={""}                />
               </div>
             ) : isError ? (
               <div className="error-message">

src/pages/SendResetPasswordLink.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React, { useEffect } from 'react'
+import React, { useEffect ,useState} from 'react'
 import { useFormik } from 'formik';
 import { useAppDispatch, useAppSelector } from '../store/store';
 import { sendResetLink } from '../store/features/auth/authSlice';
@@ -11,6 +11,7 @@ const ResetPasswordSchema = Yup.object().shape({
   email: Yup.string().email('Email must be valid').required('Email is required'),
 })
 const SendResetPasswordLink: React.FC = () => {
+  const [hideParagraph, setHideParagraph] = useState(true);
   const dispatch = useAppDispatch();
   const { user, isError, isSuccess, isLoading, message } = useAppSelector((state) => state?.auth);
   const formik = useFormik({
@@ -35,6 +36,7 @@ const SendResetPasswordLink: React.FC = () => {
     if (isSuccess) {
       toast.success(message)
       formik.resetForm()
+      setHideParagraph(false);
     }
   }, [isError, isSuccess, message]);
 
@@ -61,7 +63,11 @@ const SendResetPasswordLink: React.FC = () => {
               />
               <label className="input-label" id="email" htmlFor="email">Email Address</label>
             </div>
-            <p className='error'>{formik.status}</p><br /><br />
+            {hideParagraph ? (
+              <>
+              <p className='error'>{formik.status}</p><br />
+              </>
+            ): null}
             <button
             className={`reset-Button${isLoading ? " loading" : ""}`}
              disabled={isLoading}

src/store/features/product/productService.tsx

@@ -41,7 +41,7 @@ const productService = {
     fetchProducts,
     fetchSingleProduct,
     fetchProductReviews,
-    fetchShopInfo
+    fetchShopInfo,
     searchProduct
 }
 export default productService;