Untitled
plain_text
2 months ago
4.3 kB
7
Indexable
Never
import React, { useEffect, useState } from 'react'; import axios from 'axios'; import styled from 'styled-components'; const Card = styled.div` border: 1px solid #ddd; &:hover { box-shadow: 0 0 10px #ddd; } `; const Image = styled.img` height: 150px; /* Adjust the height as needed */ object-fit: contain; `; const ProductCard = styled.div` margin-bottom: 20px; /* Add spacing between cards */ `; const CheapestProducts = () => { const [products, setProducts] = useState([]); const [currentPage, setCurrentPage] = useState(1); useEffect(() => { const fetchProducts = async () => { try { const response = await axios.get(`http://localhost:5000/api/aggregated/cheapest/getall?page=${currentPage}`); const productsData = response.data; console.log("product data is fetched") console.log("from") console.log("http://localhost:5000/api/aggregated/cheapest/getall?page=}",currentPage) console.log(productsData) setProducts(productsData); } catch (error) { console.error('Error fetching data:', error); } }; fetchProducts(); }, [currentPage]); const handlePageChange = (page) => { console.log("Clicked on page:", page); // Add this line to log the clicked page setCurrentPage(page); }; return ( <div className="container mt-5"> <div className="row"> {products.map(product => ( <div className="col-md-3" key={product.id}> <ProductCard> <Card className="card h-100 product-card"> <div className="card-footer"> <Image src={product.image_link} alt={product.name} className="card-img-top"/> </div> <div className="card-body"> <h5 className="card-title">{product.name}</h5> <p className="card-text product-details"style={{ fontSize: '0.8rem' }}> <span className="text-muted">Ürün:</span> {product.product_name} <br/> <span className="text-muted">Marka:</span> {product.brand_name} TL <br/> <span className="text-muted">Fiyat:</span> {product.price} TL <br/> <span className="text-muted">Kaynak:</span> {product.fromWhere} <br/> <span className="text-muted">İşlemci:</span> {product.cpu} <br/> <span className="text-muted">Ram:</span> {product.ram} <br/> <span className="text-muted">Ekran Boyutu:</span> {product.screen} <br/> <span className="text-muted">İşletim Sistemi:</span> {product.os} <br/> <span className="text-muted">SSD:</span> {product.ssd} <br/> <span className="text-muted">HDD:</span> {product.hdd} <br/> <span className="text-muted">Güncellenme Tarihi:</span> {product.saved_time} <br/> <span className="text-muted">Puan(5 üzerinden): {product.review_rating}</span> </p> </div> <div className="card-footer"> <a href={product.product_link} className="btn btn-primary btn-sm">View</a> </div> </Card> </ProductCard> </div> ))} </div> <div className="row justify-content-center mt-3"> <nav aria-label="Page navigation"> <ul className="pagination"> {Array.from({ length: 5 }, (_, index) => index + 1).map(pageNumber => ( <li key={pageNumber} className={`page-item ${currentPage === pageNumber ? 'active' : ''}`}> <button className="page-link" onClick={() => handlePageChange(pageNumber)}> {pageNumber} </button> </li> ))} </ul> </nav> </div> </div> ); }; export default CheapestProducts;