Notes

import React from 'react';
import { Link } from 'react-router-dom';

import './Home.css';
import { Dropdown } from 'react-bootstrap';
import { useState, useEffect } from 'react';
import axios from 'axios';

import SearchBarSection from './search';
import CartPage from './Cart';

function Home() {
const navigationLinks = []
const [items, setItems] = useState([]);
const [mysteryBooks, setMysteryBooks] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('All');

useEffect(() => {
axios
.get('http://localhost:3001/books')
.then((response) => {
setItems(response.data);
setMysteryBooks(response.data.filter((item) => item.category === 'Mystery'));
})
.catch((error) => console.error(error));
}, []);
useEffect(() => {
axios
.get('http://localhost:3001/books')
.then((response) => {
setItems(response.data);
// Filter and set mystery books initially
setMysteryBooks(response.data.filter((item) => item.category === 'Mystery'));
})
.catch((error) => console.error(error));
}, []);
const bookCategories = [ // Define your book categories
'Fiction',
'self-help',
'Mystery',
'romance',
'children',
'thriller',
'political',
'finance',
'non-fiction',
'health',
'historical-fiction',

// Add more categories as needed
];
const filterBooksByCategory = (category, data) => {
if (category === 'All') {
setMysteryBooks(data);
} else {
const filteredBooks = data.filter((item) => item.category === category);
setMysteryBooks(filteredBooks);
}
setSelectedCategory(category);
};

function topFunction() {
window.scrollTo(0, 0);
}

function topFunction() {
window.scrollTo(0, 0);
}

function handleLogout() {
// Clear local storage
localStorage.clear();
window.location.reload(); // This refreshes the current page
}

// Search Functionality
const [books, setBooks] = useState([]);
const [search, setSearch] = useState("");
const [isSearchVisible, setSearchVisible] = useState(false);

const handleSearchClick = () => {
setSearchVisible(true);
};
const handleSearchBlur = () => {
setSearchVisible(false);
};

useEffect(() => {
const apiUrl = "http://localhost:3001/books";

axios.get(apiUrl)
.then((response) => {
setBooks(response.data);
})
.catch((error) => {
console.error("Error fetching data from API:", error);
});
}, []);

// Cart
// Function to add an item to the cart
const addToCart = (productId) => {
// Retrieve the existing cart items from local storage
const cartItems = JSON.parse(localStorage.getItem('cart')) || [];

// Check if the product is already in the cart
if (!cartItems.includes(productId)) {
// If not, add the product ID to the cart
cartItems.push(productId);

// Update the cart in local storage
localStorage.setItem('cart', JSON.stringify(cartItems));

// Notify the user that the product was added to the cart
alert('Product added to cart!');
} else {
// If the product is already in the cart, you can display a message or take appropriate action
alert('Product is already in the cart.');
}
};



return (

<div className="container">
<nav className="nav">
<div className="book">BOOKHIVE</div>
<form action="https://www.google.com/search" method="GET">
<input type="search" name="q" placeholder="Search" aria-label="Search"
value={search} onChange={(e) => setSearch(e.target.value)} onClick={handleSearchClick} />
{/* onBlur={handleSearchBlur} */}



<button className="go" type="submit" value="gsearch">
GO
</button>
</form>
<Link to="/cart" className="cart-link">
<img
src="https://cdn-icons-png.flaticon.com/512/25/25619.png"
alt="Cart"
width="24"
height="24"
/>
Cart
</Link>

</nav>
{/* <Route path="/cart" component={CartPage} /> */}
<div>
{isSearchVisible && (
<SearchBarSection books={books} search={search} addToCart={addToCart} />
)}
</div>


<div className="nav2">
{navigationLinks.map((link, index) => (
<div className="navContent" key={index}>
<Link to={link.link} className="nav_a">
{link.text}
</Link>
<div>
<h1>Home Page</h1>
<ul>
{items.map((item, index) => (
<li key={index}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</li>
))}
</ul>
</div>
</div>
))}
<div className="navContent">
{localStorage.getItem('token') ? (
<button onClick={handleLogout} className="nav_button grey-button">
Logout
</button>
) : (
<Link to="/login" className="nav_a grey-button">
Login/Signup
</Link>
)}
</div>
<div className="navContent">
<Link to="/notifications" className="nav_a grey-button">
Notifications
</Link>
</div>
<div className="navContent">
<Link to="/" className="nav_a grey-button">
Home
</Link>
</div>
<div className="navContent">
<Link to="/#footer" className="nav_a grey-button">
Contact Us
</Link>
</div>
<Dropdown>
<Dropdown.Toggle variant="secondary" id="book-categories-dropdown">
Book Categories
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item key="All" onClick={() => filterBooksByCategory('All', items)}>
All
</Dropdown.Item>
{bookCategories.map((category) => (
<Dropdown.Item key={category} onClick={() => filterBooksByCategory(category, items)}>
{category}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>

{/* Render the books */}
{/* <div>
<h1>Books in Category: {selectedCategory}</h1>
{mysteryBooks.map((item, index) => (
<div key={index}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
))}
</div> */}
</div>
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="carousel-item active">
<img className="d-block w-100" src="https://storage.googleapis.com/zopping-uploads/images%2F1024%2F20230616%2F16687231981668723198goodreadsmisc-20230616-071853.png" alt="First slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="hhttps://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeQnrPQ0A2oV4nrrmtrVd6s3Nko_uG3EGvww&usqp=CAUhttps://storage.googleapis.com/zopping-uploads/1024/20220516/002213281366x154-20220516-124746.jpegttps://storage.googleapis.com/zopping-uploads/1024/20220516/aa-20220516-155336.jpeg" alt="Second slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeQnrPQ0A2oV4nrrmtrVd6s3Nko_uG3EGvww&usqp=CAUhttps://storage.googleapis.com/zopping-uploads/1024/20220516/002213281366x154-20220516-124746.jpeg" alt="Third slide" />
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>

<div className="row product-row">
<div className="col-md-3 mb-4">
<div className="card product-card">
<img
className="card-img-top"
src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRfZjNht9GUFNpK1ECCibxFD26p5-jPQmSUPt6eqOOVMUO-Mt3j"
alt="Product 1"
/>
<div className="card-body">
<h5 className="card-title">Mrs. Dalloway is a novel by Virginia Woolf </h5>
<p className="card-text">Best seller </p>
<a href="#" className="btn btn-primary">
Add to cart
</a>
</div>
</div>
</div>
<div className="col-md-3 mb-4">
<div className="card product-card">
<img
className="card-img-top"
src="https://rukminim2.flixcart.com/image/850/1000/xif0q/regionalbooks/6/v/l/verity-original-imagru362cyxbga8.jpeg?q=20"
alt="Product 1"
/>
<div className="card-body">
<h5 className="card-title">Verity by Colleen Hoover</h5>
<p className="card-text">Best seller on sale 20% off</p>
<a href="#" className="btn btn-primary">
Add to cart
</a>
</div>
</div>
</div>
<div className="col-md-3 mb-4">
<div className="card product-card">
<img
className="card-img-top"
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRO7Te2MLyEC2TPkOt7Ghh_SpYdEyuYUsznDwdc-0qhy-Ju4v0I"
alt="Product 1"
/>
<div className="card-body">
<h5 className="card-title">To Kill a Mockingbird by Harper Lee
</h5>
<p className="card-text"> sale 20% off</p>
<a href="#" className="btn btn-primary">
Add to cart
</a>
</div>
</div>
</div>
<div className="col-md-3 mb-4">
<div className="card product-card">
<img
className="card-img-top"
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwC92gVzIq0FbHn16d8jEYoN_SLSxzdbTj8s4TdoljoHwQt_DJ"
alt="Product 1"
/>
<div className="card-body">
<h5 className="card-title">The Color Purple by Alice Walker
</h5>
<p className="card-text">Best seller on sale 10% off</p>
<a href="#" className="btn btn-primary">
Add to cart
</a>
</div>
</div>
</div>
<div className="row product-row">
<div className="col-md-3 mb-4"> {/* Use col-md-3 to create a 4-column layout on larger screens */}
<div className="card product-card h-100">
<img
className="card-img-top"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT6R-pec1ZGrLjA7nM14E0kjaQJK-_9Hk3r0s6r7V7iLhFI5jxI"
alt="Product 1"
style={{ height: '300px' }} // Set a fixed height for the image
/>
<div className="card-body d-flex flex-column">
<h5 className="card-title">The Great Gatsby by F. Scott Fitzgerald.</h5>
<p className="card-text">Best seller </p>
<a href="#" className="btn btn-primary mt-auto"> {/* Use mt-auto to push button to the bottom */}
Add to cart
</a>
</div>
</div>
</div>
{mysteryBooks.map((item, index) => (
<div className="col-md-3 mb-4" key={index}> {/* Use col-md-3 for consistency */}
<div className="card product-card h-100">
<img
className="card-img-top"
src={item.image}
alt={item.title}
style={{ height: '200px' }}
/>
<div className="card-body d-flex flex-column">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">
{item.description.length > 10
? `${item.description.slice(0, 10)}...`
: item.description}
</p>
{item.description.length > 10 && (
<a href="#" className="btn btn-link">
Read More
</a>
)}
<a href="#" className="btn btn-primary mt-auto">
Add to cart
</a>
</div>
</div>
</div>
))}
</div>


<div className="topButton">
<button className="top" onClick={topFunction}>
Back to top
</button>
</div>

</div>

<div className="info" id="footer">
<div className="foot">
<ul className="footer">
<li>
<b>Mail us:</b>
</li>
<li>[email protected]</li>
<li
>Mob: +919535440445</li>
</ul>
<ul className="footer">
<li>
<b>Visit Us</b>
</li>
<li>
52, Indranagar, Haridevpur, Shanthala Nagar, Ashok Nagar, Bengaluru, Karnataka 560001, India</li>
</ul>
<ul className="footer">
<li>
<b>Policy:</b>
</li>
<li>Our policy is very heretically banal with profound but fastidious pointers. So do not be polemical about it.</li>
</ul>
<ul className="footer">
<li>
<b>Owners:</b>
</li>
<li>Alok</li>
<li>Ahesh</li>
<li>Aditi</li>
<li>A prasad</li>
<li>Aditya</li>
</ul>
<div className="quick-links">
<ul className="footer">
<b>Quick Links:</b>
<li>
<a href="#">ABOUT US</a>
</li>
<li>
<a href="#">HELP</a>
</li>
<li>
<a href="#">EVENTS</a>
</li>
<li>
<a href="#">CONTACT US</a>
</li>
<li>
<a href="#">Cancellation And Refund Policy</a>
</li>
<li>
<a href="#">Shipping Policy</a>
</li>
</ul>
</div>
</div>
<div className="connect">connect with us on</div>
<div className="iconAlign">
<a href="https://www.instagram.com/your-instagram-profile">
<img src="https://i.pinimg.com/originals/f2/73/ee/f273ee301463c4b4f90ba9609a4c9346.png" className="icon" alt="Instagram" height="40px" width="40px" />
</a>

<a href="https://twitter.com/your-twitter-profile">
<img src="https://i.pinimg.com/originals/7d/44/d5/7d44d55ead7dda48bd95632d92fb259d.png" className="icon" alt="Twitter" height="40px" width="40px" />
</a>
<a href="https://www.facebook.com/your-facebook-profile" className="social-icon">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3Z_gaE_EVthiXYf3tuMwAfetJjjQXc0g5abLhQJI1eU5gbmLJlK5XtZZBMgE8043AjDk&usqp=CAU" // Replace with your Facebook icon URL
alt="Facebook"
height="40px"
width="40px"
/>
</a>
</div>

</div>



<div className="row">
<div className="col-md-12 text-center">
<p>&copy; 2023, BookHive.com, Inc. All rights reserved.</p>
</div>
</div>
</div>

);
}

export default Home;