import React, {useState, useEffect} from 'react';
import { products } from './products.js';
import ImageModal from './ImageModal.jsx';

const Store = () => {
    const localStorageCart = localStorage.getItem('shoppingCart') || '[{}]';
    const generatedCart = JSON.parse(localStorageCart);
    const [showModal, setShowModal] = useState(false);
    const [modalImage, setModalImage] = useState('');
    const [shoppingCart, setShoppingCart] = useState(generatedCart);

    const addProductToCart = (product) => {
        setShoppingCart([...shoppingCart, product])
    }

    useEffect(() => {
        const filteredCart = shoppingCart.filter(value => Object.keys(value).length !== 0);
        localStorage.setItem('shoppingCart', JSON.stringify(filteredCart))
    }, [JSON.stringify(shoppingCart)]);

    return (
        <section>
            <div className="products-grid">
                {products.map((product) => (
                    <div className="product"  key={product.id}>
                        <img src={product.image} alt="stax product"
                    onClick={() => {setShowModal(true); setModalImage(product.image) }}/>
                        <h3>{product.name}</h3>
                        <p>{product.description}</p>
                        <div className="price-row">
                            <div>
                                {product.price}
                            </div>
                            <div>
                                <button onClick={() => addProductToCart(product)}>Add To Cart</button>
                            </div>
                        </div>
                    </div>
                ))}
                <ImageModal onClose={() => setShowModal(false)} showModal={showModal} productImage={modalImage} />
            </div>
        </section>
            )
}

export default Store;


import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
library.add(fas)

const Nav = () => {
    const getCartFromLocalStorage = localStorage.getItem('shoppingCart');
    const generatedCart = JSON.parse(getCartFromLocalStorage) || 0;

    useEffect(() => {

    })
    return (
        <nav>
            <div className=" navbar">
                <div className='nav-left'>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/store">Store</Link>
                        </li>
                    </ul>
                </div>
                <div className="nav-center">
                    <h1>STAX World</h1>
                </div>
                <div className='nav-right'>
                    <Link to="/checkout"><FontAwesomeIcon icon='shopping-cart' size='lg' /></Link>({generatedCart.length})
                </div>
            </div>
        </nav>
    )
}

export default Nav;