Product api integration complete

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.20.5",
+    "axios": "^0.27.2",
     "bootstrap": "^5.1.3",
     "react": "^18.1.0",
     "react-bootstrap": "^2.3.1",
@@ -16,6 +17,7 @@
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-select": "^5.3.2",
     "react-toastify": "^8.1.0",
     "redux-thunk": "^2.4.1",
     "sass": "^1.51.0",

src/Components/Card.js/Card.js

@@ -12,7 +12,7 @@ const MainCard = ({ data, openNotification }) => {
   return (
     <div>
       <Card
-        cover={<img alt="example" src={data?.image} style={{ height: 280 }} />}
+        cover={<img alt="example" src={data?.thumbnail} style={{ height: 280 }} />}
       >
         <Meta title={firstLatter + data?.title?.substring(1)} />
         <div className={style.priceAndButton}>

src/Components/Drawer/Drawer.js

@@ -8,7 +8,7 @@ import {
   removeItem,
   increaseQuantity,
   decreaseQuantity,
-  submitRequest
+  submitRequest,
 } from "../../store/Reducers/cartReducer";
 import { notification } from "antd";
 
@@ -31,7 +31,7 @@ const MainDrawer = ({ visible, setVisible }) => {
     setVisible(false);
   };
 
-  console.log(window.innerWidth);
+  // console.log(window.innerWidth);
 
   if (window.innerWidth < 600) {
     setSmallScreen(false);
@@ -77,7 +77,11 @@ const MainDrawer = ({ visible, setVisible }) => {
                     <MdCancel className={style.crossIcon} />
                   </div>
                   <div className={style.imageContainer}>
-                    <img src={item?.data?.image} alt="" />
+                    <img
+                      className={style.image}
+                      src={item?.data?.thumbnail}
+                      alt=""
+                    />
                   </div>
                   <div className={style.rightContainer}>
                     <p>{item?.data?.title}</p>
@@ -125,7 +129,7 @@ const MainDrawer = ({ visible, setVisible }) => {
               : style.submitBtn
           }
           disabled={Object.values(cart)?.length === 0}
-          onClick={()=> dispatch(submitRequest())}
+          onClick={() => dispatch(submitRequest())}
         >
           {loading ? "Submit..." : "Submit"}
         </button>

src/Components/Drawer/Drawer.module.scss

@@ -50,8 +50,8 @@
     }
   }
   .imageContainer {
-    width: 30%;
-    height: 80%;
+    width: 120px;
+    height: 120px;
     object-fit: contain;
     margin-left: 20px;
     margin-right: 20px;

src/Components/Navbar/Navbar.js

-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Container, Navbar, Nav } from "react-bootstrap";
 import style from "./Navbar.module.scss";
 import logo from "../../assets/images/logo.png";
 import { Input } from "antd";
 import { IoCartOutline } from "react-icons/io5";
 import { headerData } from "../../Helper/dummyData";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import AsyncSelect from "react-select/async";
+import {
+  resetProduct,
+  searchProduct,
+} from "../../store/Reducers/searchReducer";
+import Select from "react-select/";
 
 const { Search } = Input;
 
 const MainNavbar = ({ setVisible }) => {
+  const dispatch = useDispatch();
   const { cart } = useSelector((state) => state.cart);
+  const { searchResult } = useSelector((state) => state.search);
+  const [searchResultArr, setSearchResultArr] = useState([]);
+  // debugger;
 
+  const onSearch = (e) => {
+    console.log(e, "e");
+  };
+  const onInput = () => {
+    console.log("abc");
+  };
+
+  const customStyles = {
+    control: (styles, { isFocused, isDisabled }) => ({
+      ...styles,
+      height: "100%",
+      borderColor: "black",
+      borderRadius: 0,
+      boxShadow: "none",
+      width: "700px",
+    }),
+  };
+
+  const onSearchInput = (e) => {
+    console.log(e.target.value);
+    dispatch(searchProduct());
+  };
+  const input = (e) => {
+    console.log(e);
+  };
+  const options = [
+    { value: "OPPOF19", label: "OPPOF19" },
+    { value: "IPhone X", label: "IPhone X" },
+    { value: "Samsung Universe", label: "Samsung Universe" },
+  ];
   return (
     <>
       <div className={style.mainCOntainer}>
@@ -38,10 +78,27 @@ const MainNavbar = ({ setVisible }) => {
               <Navbar.Collapse id="responsive-navbar-nav">
                 <Nav className="me-auto"></Nav>
                 <Nav className={`me-auto ${style.searchContainer}`}>
-                  <Search
+                  {/* <Search
                     placeholder="Search Products"
                     enterButton="Search"
                     size="large"
+                    onSearch={onSearch}
+                    onInput={onInput}
+                    allowClear={true}
+                  /> */}
+                  {/* <AsyncSelect
+                    cacheOptions
+                    // defaultOptions={options}
+                    styles={customStyles}
+                    loadOptions={promiseOptions}
+                    placeholder="Search"
+                    // options={options}
+                  /> */}
+                  <Select
+                    options={options}
+                    styles={customStyles}
+                    onChange={onSearchInput}
+                    placeholder="Search"
                   />
                   {/* <Nav.Link href="#features">Features</Nav.Link>
                   <Nav.Link href="#pricing">Pricing</Nav.Link> */}
@@ -53,7 +110,9 @@ const MainNavbar = ({ setVisible }) => {
                       onClick={() => setVisible(true)}
                     >
                       <IoCartOutline className={style.cartIcon} />
-                      <p className={style.cartCount}>{Object.values(cart).length}</p>
+                      <p className={style.cartCount}>
+                        {Object.values(cart).length}
+                      </p>
                     </div>
                   </Nav.Link>
                 </Nav>

src/Screens/Home/Home.js

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import MainNavbar from "../../Components/Navbar/Navbar";
 import MainCarousel from "../../Components/Carousel/Carousel";
 import style from "./Home.module.scss";
@@ -14,10 +14,15 @@ import { useDispatch, useSelector } from "react-redux";
 
 import MainDrawer from "../../Components/Drawer/Drawer";
 import { notification } from "antd";
+import {
+  getAllProducts,
+  getProducts,
+} from "../../store/Reducers/productReducer";
 
 const Home = () => {
   const dispatch = useDispatch();
   const { cart } = useSelector((state) => state.cart);
+  const { products } = useSelector((state) => state.products);
 
   const [visible, setVisible] = useState(false);
 
@@ -52,6 +57,10 @@ const Home = () => {
     }
   };
 
+  useEffect(() => {
+    dispatch(getAllProducts());
+  }, []);
+
   // console.log(count);
 
   return (
@@ -89,7 +98,24 @@ const Home = () => {
                   <h3>Mobile Phone</h3>
                 </div>
                 <Row>
-                  {cardData?.map((item, index) => {
+                  {products &&
+                    products?.map((item, index) => {
+                      return (
+                        <Col
+                          key={index}
+                          xl={3}
+                          md={4}
+                          sm={12}
+                          className={style.cardCol}
+                        >
+                          <MainCard
+                            data={item}
+                            openNotification={openNotification}
+                          />
+                        </Col>
+                      );
+                    })}
+                  {/* {cardData?.map((item, index) => {
                     return (
                       <Col
                         key={index}
@@ -104,7 +130,7 @@ const Home = () => {
                         />
                       </Col>
                     );
-                  })}
+                  })} */}
                 </Row>
               </Container>
             </div>

src/store/Constants/apiUrl.js

+const api = "https://dummyjson.com/";
+
+export { api };

src/store/Reducers/cartReducer.js

@@ -86,11 +86,6 @@ export const cartSlice = createSlice({
     },
     submitRequest(state, action) {
       state.loading = true;
-      // setTimeout(() => {
-      //   state.cart = {};
-      //   state.total = 0;
-      //   state.loading = false;
-      // }, 1000);
     },
   },
 });

src/store/Reducers/productReducer.js

+import { createSlice } from "@reduxjs/toolkit";
+import { api } from "../Constants/apiUrl";
+import axios from "axios";
+
+export const productSlice = createSlice({
+  name: "products",
+  initialState: {
+    loading: false,
+    products: [],
+  },
+  reducers: {
+    getProducts(state, action) {
+      state.loading = true;
+      state.products = action.payload.products;
+    },
+  },
+});
+
+const getAllProducts = () => {
+  return async (dispatch) => {
+    await axios
+      .get(`${api}products/category/smartphones`)
+      .then((response) => {
+        dispatch(getProducts(response.data));
+      })
+      .catch((error) => {
+        console.log(error, "error");
+      });
+  };
+};
+// each case under reducers becomes an action
+export const { getProducts } = productSlice.actions;
+export { getAllProducts };
+export default productSlice.reducer;

src/store/Reducers/searchReducer.js

+import { createSlice } from "@reduxjs/toolkit";
+import { api } from "../Constants/apiUrl";
+import axios from "axios";
+
+export const searchSlice = createSlice({
+  name: "search",
+  initialState: {
+    loading: false,
+    searchResult: [],
+  },
+  reducers: {
+    getProducts(state, action) {
+      state.loading = true;
+      // console.log("abcb", action.payload);
+      let testArr = [];
+      action.payload.products.map((item) => {
+        return testArr.push({
+          ...item,
+          value: item["title"],
+          label: item["title"],
+        });
+      });
+      state.searchResult = testArr;
+      console.log(testArr, "teeetetete");
+    },
+    resetProduct(state, action) {
+      // console.log("first");
+      state.searchResult = [];
+    },
+  },
+});
+
+const searchProduct = (val) => {
+  return async (dispatch) => {
+    await axios
+      .get(`${api}products/search?q=${val}`)
+      .then((response) => {
+        // console.log(response.data);
+        dispatch(getProducts(response.data));
+      })
+      .catch((error) => {
+        console.log(error, "error");
+      });
+  };
+};
+// each case under reducers becomes an action
+export const { getProducts, resetProduct } = searchSlice.actions;
+export { searchProduct };
+export default searchSlice.reducer;

src/store/store.js

@@ -2,11 +2,15 @@ import { configureStore, applyMiddleware } from "@reduxjs/toolkit";
 import thunk from "redux-thunk";
 import counterSlice from "./Reducers/counterReducer";
 import cartSlice from "./Reducers/cartReducer";
+import productSlice from "./Reducers/productReducer";
+import searchSlice from "./Reducers/searchReducer";
 
 const store = configureStore({
   reducer: {
     counter: counterSlice,
     cart: cartSlice,
+    products: productSlice,
+    search: searchSlice,
   }, //add reducers here
 });