diff --git a/src/assets/styles/Search.scss b/src/assets/styles/Search.scss index 9da42e19..b911755b 100644 --- a/src/assets/styles/Search.scss +++ b/src/assets/styles/Search.scss @@ -1,6 +1,4 @@ .wrappers{ - width: 100vw; - height: 100vh; background-color: $container-color; .upper-side { display: flex; @@ -8,7 +6,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; @@ -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; -// } \ No newline at end of file +} \ No newline at end of file diff --git a/src/assets/styles/SearchInput.scss b/src/assets/styles/SearchInput.scss index 12c48876..c27bb2ad 100644 --- 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 index 467126a4..100c3286 100644 --- 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) => { 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) => { + 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 (
-
{ - e.preventDefault(); - if (search.trim()) { - navigate(`/search?name=${search.trim()}`); - } - }} - > +
@@ -75,11 +70,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) { onChange={handleSearchChange} value={search} /> -
@@ -92,10 +83,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) { {filteredProducts && filteredProducts.length > 0 ? ( filteredProducts.map((product: any) => (
-
handleProductClick(product.name)} - > +
handleProductClick(product.name)}>

{product.name}

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index d426ef81..f2925801 100644 --- a/src/pages/Search.tsx +++ b/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(); @@ -59,97 +60,96 @@ const SearchBar: React.FC = () => { setDiscount(initialDiscount); }, [initialName, initialCategory, initialMaxPrice, initialMinPrice, initialDiscount]); - const filteredProduct = products - ? products.find( - (product: any) => - (!name || product.name.toLowerCase() === name.toLowerCase()) && - (!category || product.category === category) && - (!maxPrice || product.price <= parseInt(maxPrice)) && - (!minPrice || product.price >= parseInt(minPrice)) && - (!discount || parseInt(product.discount) >= parseInt(discount)) - ) - : null; + const filteredProducts = products?.filter((product: any) => + product.name.toLowerCase().includes(name.toLowerCase()) && + (!category || product.category === category) && + (!maxPrice || product.price <= parseInt(maxPrice)) && + (!minPrice || product.price >= parseInt(minPrice)) && + (!discount || parseInt(product.discount) >= parseInt(discount)) + ); return ( <> -
-
-
-
- {name}: -
-
- Price: - - -
-
- Discount: - +
+
+
+
+ {name}: +
+
+ Price: + + +
+
+ Discount: + +
-
-
- {isLoading ? ( -
- -
- ) : isSuccess && filteredProduct ? ( -
- -
- ) : isError ? ( -
-

{"Something went wrong. Please try again later."}

-
- ) : ( - -
-
- -
-
-

No products found matching your search criteria.

-
+
+ {isLoading ? ( +
+ +
+ ) : isSuccess && filteredProducts && filteredProducts.length > 0 ? ( +
+ {filteredProducts.map((product: any) => ( + + ))} +
+ ) : isError ? ( +
+

Something went wrong. Please try again later.

+
+ ) : ( +
+
+ No results +
+
+

No products found matching your search criteria.

+
+
+ )}
- )}
-
); }; diff --git a/src/pages/SendResetPasswordLink.tsx b/src/pages/SendResetPasswordLink.tsx index c5974f96..82840000 100644 --- a/src/pages/SendResetPasswordLink.tsx +++ b/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 = () => { />
-

{formik.status}



+ {hideParagraph ? ( + <> +

{formik.status}


+ + ): null}