diff --git a/src/pages/Cart.js b/src/pages/Cart.js new file mode 100644 index 000000000..fa5bec1fa --- /dev/null +++ b/src/pages/Cart.js @@ -0,0 +1,65 @@ +import React, {useEffect, useState} from 'react'; +import Link from 'next/link'; + +export default function Cart() { + const [cart, setCart] = useState([]); + + useEffect(() => { + const stored = localStorage.getItem('cart'); + if (stored) setCart(JSON.parse(stored)); + }, []); + + function removeFromCart(index) { + const newCart = cart.slice(); + newCart.splice(index, 1); + setCart(newCart); + localStorage.setItem('cart', JSON.stringify(newCart)); + } + + return ( +
+

Your Cart

+ + Back to Store + + {cart.length === 0 ? ( +

Your cart is empty.

+ ) : ( + + )} +
+ ); +} diff --git a/src/pages/Store.js b/src/pages/Store.js new file mode 100644 index 000000000..8b7abe69d --- /dev/null +++ b/src/pages/Store.js @@ -0,0 +1,79 @@ +import React, {useState, useEffect} from 'react'; +import Link from 'next/link'; + +const products = [ + { + id: 1, + name: 'React Conf 2019 Mug', + description: 'A stylish mug from React Conf 2019.', + image: '/images/home/conf2019/nat.jpg', + price: 12.99, + }, + { + id: 2, + name: 'React Conf 2019 T-shirt', + description: 'Comfy T-shirt from React Conf 2019.', + image: '/images/home/conf2019/sophie.jpg', + price: 19.99, + }, + { + id: 3, + name: 'React Conf 2019 Sticker', + description: 'Sticker pack from React Conf 2019.', + image: '/images/home/conf2019/tae.jpg', + price: 4.99, + }, +]; + +export default function Store() { + const [cart, setCart] = useState([]); + + useEffect(() => { + const stored = localStorage.getItem('cart'); + if (stored) setCart(JSON.parse(stored)); + }, []); + + function addToCart(product) { + const newCart = [...cart, product]; + setCart(newCart); + localStorage.setItem('cart', JSON.stringify(newCart)); + } + + return ( +
+

Store

+ + Go to Cart ({cart.length}) + +
+ {products.map((product) => ( +
+ {product.name} +

{product.name}

+

{product.description}

+

${product.price.toFixed(2)}

+ +
+ ))} +
+
+ ); +}