[Derivers#18758479] ft-user-search

src/components/inputs/SearchInput.tsx

@@ -1,23 +1,29 @@
 /* eslint-disable */
 
-import React from "react";
+import React, { useState } from "react";
 import { FiSearch } from "react-icons/fi";
 import "../../styles/SearchInput.scss";
-
+import { useNavigate } from "react-router-dom";
 interface SearchInputProps {
   className: string;
   placeholder?: string;
 }
-
 function SearchInput({ className, placeholder }: SearchInputProps) {
+  const [search,setSearch] = useState('')
+const navigate = useNavigate()
   return (
+    <>
     <form className={`search-container ${className}`}>
       <div className="search-icon">
         <FiSearch />
       </div>
-      <input type="text" placeholder={placeholder} />
-      <button className="search-button">Search</button>
+      <input type="text" placeholder={placeholder} onChange={(e)=>setSearch(e.target.value)}/>
+      <button className="search-button" onClick={()=>navigate(`/search?name=${search}`)}>Search</button>
     </form>
+    <div>
+    </div>
+    </>
+
   );
 }
 

src/pages/Search.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import React, { useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../store/store';
+import { searchProduct, selectSearchResults, selectSearchError } from '../store/features/ProductSlice';
+import { useLocation } from 'react-router-dom';
+
+const SearchBar: React.FC = () => {
+    const location = useLocation()
+    const params = new URLSearchParams(location.search);
+    const name = params.get("name")
+    const category = params.get("category")
+    const maxPrice = params.get("maxPrice")
+    const minPrice = params.get("minPrice")
+
+  const dispatch = useAppDispatch();
+  const searchResults = useAppSelector(selectSearchResults);
+  const searchError = useAppSelector(selectSearchError);
+useEffect(()=>{
+dispatch(searchProduct({name:name?name:undefined,category:category?category:undefined,maxPrice:maxPrice?parseInt(maxPrice):undefined,minPrice:minPrice?parseInt(minPrice):undefined}))
+},[])
+  return (
+    <div>
+        <h1>
+            search
+        </h1>
+      {searchError && <p>Error: {searchError}</p>}
+      <div>
+        {searchResults.length > 0 ? (
+          <ul>
+            {searchResults.map((product:any) => (
+              <li key={product.id}>{product.name} : ${product.price}</li>
+            ))}
+          </ul>
+        ) : (
+          <p>No products found.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;

src/router.tsx

@@ -5,14 +5,17 @@ import { Route, Routes } from "react-router-dom";
 import LandingPage from "./pages/LandingPage";
 import Login from "./pages/Login";
 import NotFound from "./pages/NotFound";
+import Search from "./pages/Search";
 
 const AppRouter: React.FC = () => {
   return (
     <div>
       <Routes>
         <Route path="/" element={<LandingPage />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/search" element={<Search/>}/>
         <Route path="*" element={<NotFound />} />
+
       </Routes>
     </div>
   );

src/store/features/ProductSlice.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable */
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axiosInstance from '../../utils/axios/axiosInstance';
+import { IProducts } from '../../utils/types/Product';
+
+const initialState: IProducts = {
+  nextPage: 0,
+  currentPage: 0,
+  previousPage: 0,
+  limit: 0,
+  data: [],
+};
+
+interface SearchCriteria {
+  name?: string;
+  category?: string;
+  minPrice?: number;
+  maxPrice?: number;
+}
+
+export const searchProduct = createAsyncThunk<IProducts, SearchCriteria>(
+  'searchProduct',
+  async (criteria) => {
+    const response = await axiosInstance.get<IProducts>('/api/shop/user-search-products', {
+      params: criteria,
+    });
+    return response.data;
+  }
+);
+
+const productSlice = createSlice({
+  name: 'product',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(searchProduct.fulfilled, (state, action: PayloadAction<IProducts>) => {
+        state.nextPage = action.payload.nextPage;
+        state.currentPage = action.payload.currentPage;
+        state.previousPage = action.payload.previousPage;
+        state.limit = action.payload.limit;
+        state.data = action.payload.data;
+        state.error = undefined;
+      })
+      .addCase(searchProduct.rejected, (state, action) => {
+        state.currentPage = -1;
+        state.error = action.error.message;
+      });
+  },
+});
+
+export const selectSearchResults = (state:any) => state.searchProduct.data;
+export const selectSearchError = (state:any) => state.searchProduct.error;
+
+export default productSlice.reducer;

src/store/store.ts

@@ -3,10 +3,12 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import welcomeReducer from "./features/welcomeSlice";
+import productReducer from "./features/ProductSlice";
 
 export const store = configureStore({
   reducer: {
     initialMessage: welcomeReducer,
+    searchProduct:productReducer
   },
 });
 

src/utils/axios/axiosInstance.ts

@@ -3,7 +3,7 @@
 import axios from "axios";
 
 const axiosInstance = axios.create({
-  baseURL: "https://e-commerce-ninjas-platform-backend.onrender.com/",
+  baseURL: "http://localhost:8000",
   headers: {
     "Content-Type": "application/json",
   },

src/utils/types/Product.d.ts

@@ -0,0 +1,11 @@
+export interface IProducts {
+  nextPage:number;
+  currentPage: number;
+  previousPage:number;
+  limit:number;
+  data:[];
+  error?:string
+}
+export interface IProductsState {
+  searchProduct: searchProduct;
+}