Notes

ProductPage.jsx
import axios from "axios";
import { useEffect, useState } from "react";
import Navbar from "../Navbar";
import Product from "../Product";

const ProductPage = () => {
const [products, setProducts] = useState([]);
const [term, setTerm] = useState("");

const getProducts = async () => {
await axios
.get("https://fakestoreapi.com/products")
.then((response) => setProducts(response.data));
};

const getProductsbyId = async (id) => {
console.log("getProductsbyId");
await axios
.get(`https://fakestoreapi.com/products/${id}`)
.then((response) => {
console.log(response.data);
setProducts([response.data]);
});
};

const searchProduct = (term) => {
const fetchedProducts = products.filter((product) =>
product.title.includes(term)
);
console.log("searchProduct");
console.log(fetchedProducts);
setProducts(fetchedProducts);
};

useEffect(() => {
getProducts();
console.log(products);
}, []);

console.log(products);

return (
<div>
<Navbar
term={term}
setTerm={setTerm}
setProducts={setProducts}
getProductsbyId={getProductsbyId}
searchProduct={searchProduct}
/>
{products.map((product) => (
<Product
key={product.id}
product={product}
getProductsbyId={getProductsbyId}
searchProduct={searchProduct}
/>
))}
</div>
);
};

export default ProductPage;


Navbar.jsx


import axios from "axios";
import { Component } from "react";

class Navbar extends Component {
render() {
const onSearch = (e) => {
console.log("onSearch");
e.preventDefault();
if (!isNaN(this.props.term)) {
console.log("inside number if");
const id = Number(this.props.term);
window.history.replaceState(null, "Products", `/products/${id}`);
// this.props.history.replace({ pathname: `/products/${id}` });
this.props.getProductsbyId(id);
} else {
window.history.replaceState(null, "Products", `/products`);
this.props.searchProduct(this.props.term);
}
this.props.setTerm("");
// setTerm(term)
};
return (
<nav className="navbar navbar-expand-lg bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">
online shopping
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" aria-current="page" href="#">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Products
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Offers
</a>
</li>
</ul>
</div>
<form onSubmit={onSearch}>
<input
type="text"
value={this.props.term}
onChange={(e) => this.props.setTerm(e.target.value)}
style={{ margin: "5px" }}
/>
<button className="btn btn-primary" type="submit">
Search
</button>
</form>
</div>

<button
type="button"
className="btn btn-primary"
style={{ float: "right", marginRight: "10px" }}
>
Signin
</button>
</nav>
);
}
}

export default Navbar;

Product.jsx

import { Button, Card } from "react-bootstrap";

const Product = ({ product, getProductsbyId }) => {
return (
<div style={{ padding: "10px", float: "left" }}>
<Card style={{ width: "18rem" }}>
<Card.Img
variant="top"
src={product.image}
style={{ height: "100px", width: "100px" }}
onClick={() => getProductsbyId(product.id)}
/>
<Card.Body>
<Card.Title>{product.title}</Card.Title>
<Card.Text>{product.description}</Card.Text>
<Button variant="primary"> Add To Cart</Button>
</Card.Body>
</Card>
</div>
);
};

export default Product;