App.js

// App.js
import React from 'react';
import { BrowserRouter, Route, Link, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/HomPage';
import ProductsPage from './pages/ProductsPage';
import AboutPage from './pages/AboutPage';

function App() {

    return (
        <div>
            <h1>Lesson 21</h1>
            <BrowserRouter>
                <div>
                    <nav>
                        <ul>
                            <li>
                            <Link to="/" className="nav-link">Home</Link>
                            </li>
                            <li>
                            <Link to="/products" className="nav-link">Products</Link>
                            </li>
                            <li>
                            <Link to="/about" className="nav-link">About</Link>
                            </li>
                        </ul>
                    </nav>

                    <Routes>
                        <Route path="/" exact Component={HomePage} />
                        <Route path="/products" Component={ProductsPage} />
                        <Route path="/about" Component={AboutPage} />
                    </Routes>
                </div>
            </BrowserRouter>
        </div>
    );
}

export default App;
			

App.css

/* Add this CSS to your stylesheet */
nav ul{
    display: flex;
}

nav li{
    list-style-type: none;
}

.nav-link {
    padding: 8px 12px;
    margin-right: 10px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
  }

  .nav-link:hover {
    background-color: #0056b3;
  }

  #main {
    display: flex;
} 
#productList {
    display: block;
    height: 600px;
    width: 15%;
    overflow: scroll;
}
  .icon {
    width: 30px;
}

.image {
    width: 300px;
}
			

pages/HomePage.js

// HomePage.js
import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to our Website!</h1>
      <p>Check out our awesome products and learn more about us.</p>
    </div>
  );
}

export default HomePage;
		

pages/ProductsPage.js

// ProductsPage.js
import React, { useEffect, useState } from 'react';
import Product from '../components/Product';
import ProductInfo from '../components/ProductInfo';

const ProductsPage = () => {
  const [productID, setProductID] = useState(1);
  const [products, setProducts] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then(res=>res.json())
      .then(data => setProducts(data));
  }, []);

  // Filter products based on search query
  useEffect(() => {
    const filtered = products.filter(product =>
      product.title.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setFilteredProducts(filtered);
  }, [searchQuery, products]);

  // Handle search input change
  const handleSearchInputChange = event => {
    setSearchQuery(event.target.value);
  };

  const openProduct = (id) => {
    setProductID(id);
  }

    return (
      <div>
        <input
          type="text"
          placeholder="Search by product name"
          value={searchQuery}
          onChange={handleSearchInputChange}
        />
        <div id="main">

            <div id="productList">
                {
                    filteredProducts.map((product, index) => {
                        return (
                            <Product key={index} productID={product} onClick={openProduct}/>
                        )
                    })
                }
            </div>
            <ProductInfo productID={productID}/>
        </div>
      </div>
    )
}

export default ProductsPage;

components/Product.js

// Product.js
import React, { useState, useEffect } from 'react';

function Product({ productID, onClick }) {
    const [product, setProduct] = useState({});

    useEffect(() => {
        setProduct(productID)
    }, [productID]);

    return (
        <div>
            {product ? (
                <div className="product">
                    <a href={'#'+ product.id} onClick={() => onClick(product.id)}>
                        <img src={product.image} alt='Alternative text' className='icon'/>
                        <span>{product.title}</span>
                    </a>

                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

export default Product;

components/ProductInfo.js

// ProductInfo.js
import React, { useState, useEffect } from 'react';

function ProductInfo({ productID }) {
    const [product, setProduct] = useState({});

    useEffect(() => {
        fetch(`https://fakestoreapi.com/products/${productID}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                setProduct(data);
            });
    }, [productID]); // Dependency array includes productID to refetch when it changes

    return (
        <div>
            {product ? (
                <div>
                    <h1>{product.title}</h1>
                    <p>Category: {product.category}</p>
                    <p>Description: {product.description}</p>
                    <img src={product.image} alt='Alternative text' className='image'/>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

export default ProductInfo;

pages/AboutPage.js

// AboutPage.js
import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a company dedicated to providing high-quality products to our customers.</p>
    </div>
  );
}

export default AboutPage;