Skip to content

Commit 8e55757

Browse files
MANISHIMWESaltonMANISHIMWESalton
committed
user search products
1 parent 234b59a commit 8e55757

File tree

6 files changed

+113
-199
lines changed

6 files changed

+113
-199
lines changed

‎src/assets/styles/Search.scss

+6-86
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
.wrappers{
2-
width: 100vw;
3-
height: 100vh;
42
background-color: $container-color;
53
.upper-side {
64
display: flex;
75
align-items: center;
86
height: 10rem;
97
font-size: 1.5rem;
108
padding: 5rem;
11-
border-bottom: $fourth-color;
9+
border-bottom: 2px solid rgba(119, 119, 119, 0.49);
1210

1311
.product-name{
1412
font-size: 2rem;
@@ -57,7 +55,7 @@
5755
flex-wrap: wrap;
5856
margin: 3rem 3rem;
5957
margin-left: 5rem;
60-
gap: 5rem;
58+
gap: 3rem;
6159
}
6260
.loader-spinner {
6361
display: flex;
@@ -67,94 +65,16 @@
6765
margin-top: 20rem;
6866
}
6967
.noResult{
68+
margin: 0 auto;
7069
display: flex;
7170
flex-direction: column;
72-
margin-left: 35%;
73-
margin-top: 2vh;
71+
margin-bottom: 1rem;
7472
img{
75-
width: 400px;
73+
width: auto;
7674
height: 400px;
7775
}
7876
}
7977
}
8078

8179

82-
}
83-
84-
// .product-search {
85-
// display: flex;
86-
// flex-direction: column;
87-
// height: 65px;
88-
// background-color: $container-color;
89-
// border-bottom: 1px solid #ccc;
90-
91-
// .main-content-product {
92-
// display: flex;
93-
// flex-direction: column;
94-
// .upper-side {
95-
// display: flex;
96-
// margin-left: 50px;
97-
// margin-right: 50px;
98-
// height: 40px;
99-
// }
100-
101-
// .searchPrice-box {
102-
// display: flex;
103-
// align-items: center;
104-
// width: 80rem;
105-
// height: 56px;
106-
// padding-top: 10px;
107-
// padding-bottom: 10px;
108-
// line-height: 40px;
109-
// margin-left: 5px;
110-
111-
// &:not(:last-child) {
112-
// margin-bottom: 10px;
113-
// }
114-
115-
// .product-name {
116-
// font-size: 20px;
117-
// margin-right: 10px;
118-
// width: 30rem;
119-
// }
120-
121-
// .searchSpan-price {
122-
// margin: 0 6px 0 4px;
123-
// line-height: 30px;
124-
// font-size: 20px;
125-
// vertical-align: middle;
126-
// display: inline-block;
127-
// }
128-
129-
// .dropdown-container {
130-
// display: flex;
131-
// align-items: center;
132-
133-
// .min-span,
134-
// .max-span,
135-
// .discount-span {
136-
// display: flex;
137-
// align-items: center;
138-
// justify-content: space-between;
139-
// width: 100px;
140-
// height: 30px;
141-
// border: 1px solid rgba(255, 109, 24, 0.49);
142-
// border-radius: 4px;
143-
// padding: 0 5px;
144-
// font-size: 15px;
145-
// cursor: pointer;
146-
// margin-right: 10px;
147-
// }
148-
// .header__selected__iconIcon {
149-
// margin-left: 8px;
150-
// color:rgba(255, 109, 24, 0.49);
151-
// }
152-
153-
// }
154-
// }
155-
// }
156-
// }
157-
// .product-main{
158-
// height: 500px;
159-
// background-color: $container-color;
160-
// }
80+
}

‎src/assets/styles/SearchInput.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
.search-icon {
1414
font-size: 2.4rem;
15-
padding: 0 1rem;
15+
padding-left:1rem;
1616
display: flex;
1717
color: $primary-color;
1818
align-items: center;

‎src/components/inputs/SearchInput.tsx

+15-27
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
import React, { useEffect, useState } from "react";
44
import { FiSearch } from "react-icons/fi";
55
import { useAppDispatch, useAppSelector } from "../../store/store";
6-
import { Link, useNavigate } from "react-router-dom";
6+
import { Link, useLocation, useNavigate } from "react-router-dom";
77
import { searchProduct } from "../../store/features/product/productSlice";
88
interface SearchInputProps {
99
className: string;
1010
placeholder?: string;
1111
}
1212

13+
1314
function SearchInput({ className, placeholder }: SearchInputProps) {
1415
const dispatch = useAppDispatch();
15-
const { isSuccess, isError, isLoading, products } = useAppSelector(
16-
(state) => state.products
17-
);
16+
const { products } = useAppSelector((state) => state.products);
1817
const [search, setSearch] = useState("");
1918
const [isFocused, setIsFocused] = useState(false);
2019
const [isHovered, setIsHovered] = useState(false);
@@ -24,11 +23,8 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
2423
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
2524
const value = e.target.value;
2625
setSearch(value);
27-
if (value.trim()) {
28-
dispatch(searchProduct({ name: value.trim() }));
29-
} else {
30-
setIsFocused(false);
31-
}
26+
dispatch(searchProduct({ name: value.trim() }));
27+
setIsFocused(true);
3228
};
3329

3430
const handleProductClick = (name: string) => {
@@ -38,6 +34,13 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
3834
navigate(`/search?name=${name}`);
3935
};
4036

37+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
38+
e.preventDefault();
39+
if (search.trim()) {
40+
navigate(`/search?name=${search.trim()}`);
41+
}
42+
};
43+
4144
useEffect(() => {
4245
if (!search.trim()) {
4346
setIsFocused(false);
@@ -51,15 +54,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
5154

5255
return (
5356
<div className="main-search">
54-
<form
55-
className={`search-container ${className}`}
56-
onSubmit={(e) => {
57-
e.preventDefault();
58-
if (search.trim()) {
59-
navigate(`/search?name=${search.trim()}`);
60-
}
61-
}}
62-
>
57+
<form className={`search-container ${className}`} onSubmit={handleSubmit}>
6358
<div className="search-icon">
6459
<FiSearch />
6560
</div>
@@ -75,11 +70,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
7570
onChange={handleSearchChange}
7671
value={search}
7772
/>
78-
<button
79-
className="search-button"
80-
type="submit"
81-
onClick={() => navigate(`/search?name=${search}`)}
82-
>
73+
<button className="search-button" type="submit">
8374
Search
8475
</button>
8576
</form>
@@ -92,10 +83,7 @@ function SearchInput({ className, placeholder }: SearchInputProps) {
9283
{filteredProducts && filteredProducts.length > 0 ? (
9384
filteredProducts.map((product: any) => (
9485
<div key={product.id} className="result">
95-
<div
96-
className="link"
97-
onClick={() => handleProductClick(product.name)}
98-
>
86+
<div className="link" onClick={() => handleProductClick(product.name)}>
9987
<p>{product.name}</p>
10088
</div>
10189
</div>

0 commit comments

Comments
 (0)