-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b93a5f9
commit 1ae7972
Showing
19 changed files
with
277 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,52 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import { CartDataContextProvider } from './context/CartDataContext'; | ||
| import Accessibility from './components/Accessibility/Accessibility'; | ||
| import HeaderNavbar from './components/Navbar/HeaderNavbar'; | ||
| import Router from './components/Router/Router'; | ||
| import Footer from './components/Footer/Footer'; | ||
|
|
||
| export default function App() { | ||
| const [theme, setTheme] = useState('dark'); | ||
| const [theme, setTheme] = useState('dark'); | ||
| const topOfPage = useRef(null); | ||
|
|
||
| // Initialize theme from local storage or set theme in local storage | ||
| // when App mounts | ||
| useEffect(() => { | ||
| let savedTheme = localStorage.getItem('theme'); | ||
| // Initialize theme from local storage or set theme in local storage | ||
| // when App mounts | ||
| useEffect(() => { | ||
| let savedTheme = localStorage.getItem('theme'); | ||
|
|
||
| if (!localStorage.getItem('theme')) { | ||
| savedTheme = 'dark'; | ||
| localStorage.setItem('theme', savedTheme); | ||
| } | ||
| setTheme(savedTheme); | ||
| }, []); | ||
| if (!localStorage.getItem('theme')) { | ||
| savedTheme = 'dark'; | ||
| localStorage.setItem('theme', savedTheme); | ||
| } | ||
| setTheme(savedTheme); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| document.documentElement.className = theme; | ||
| }, [theme]); | ||
| useEffect(() => { | ||
| document.documentElement.className = theme; | ||
| }, [theme]); | ||
|
|
||
| const handleThemeToggle = (e) => { | ||
| if (e.type === 'click' || e.key === ' ' || e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| const newTheme = theme === 'dark' ? 'light' : 'dark'; | ||
| const handleThemeToggle = (e) => { | ||
| if (e.type === 'click' || e.key === ' ' || e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| const newTheme = theme === 'dark' ? 'light' : 'dark'; | ||
|
|
||
| setTheme(newTheme); | ||
| localStorage.setItem('theme', newTheme); | ||
| } | ||
| }; | ||
| setTheme(newTheme); | ||
| localStorage.setItem('theme', newTheme); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <CartDataContextProvider> | ||
| <header> | ||
| <Accessibility siteTheme={theme} toggleEvent={handleThemeToggle} /> | ||
| <HeaderNavbar /> | ||
| </header> | ||
| <Router /> | ||
| <Footer siteTheme={theme} /> | ||
| </CartDataContextProvider> | ||
| ); | ||
| return ( | ||
| <CartDataContextProvider> | ||
| <header> | ||
| <Accessibility | ||
| siteTheme={theme} | ||
| toggleEvent={handleThemeToggle} | ||
| topRef={topOfPage} | ||
| /> | ||
| <HeaderNavbar /> | ||
| </header> | ||
| <Router /> | ||
| <Footer siteTheme={theme} topRef={topOfPage} /> | ||
| </CartDataContextProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,48 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import ItemICardmage from './ItemICardmage'; | ||
|
|
||
| const StockWarning = ({ children }) => { | ||
| return <div id='stock-warning'>{children}</div>; | ||
| const StockWarning = ({ stock, id }) => { | ||
| return ( | ||
| <div id={`stock-warning-${id}`} className='item-stock-warning'> | ||
| {stock === 0 | ||
| ? 'Sold Out' | ||
| : stock < 20 | ||
| ? `Only ${stock} left` | ||
| : null} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default function ItemCard({ item }) { | ||
| const { id, name, stock } = item; | ||
| const { id, name, image, price, stock } = item; | ||
| return ( | ||
| <div> | ||
| <h2> | ||
| <div className='item-card'> | ||
| <div className='primary-preview-container'> | ||
| <Link | ||
| to={`/shop/${id}`} | ||
| className='preview-image-link' | ||
| aria-hidden='true' | ||
| tabIndex='-1' | ||
| > | ||
| <ItemICardmage image={image} /> | ||
| </Link> | ||
| </div> | ||
| <div className='secondary-preview-container'> | ||
| <Link | ||
| to={`/shop/${id}`} | ||
| className='link' | ||
| aria-describedby={stock < 10 ? 'stock-warning' : null} | ||
| className='item-link' | ||
| aria-describedby={`price-${id} ${ | ||
| stock < 10 ? `stock-warning-${id}` : null | ||
| }`} | ||
| > | ||
| {name} | ||
| </Link> | ||
| </h2> | ||
| {!stock ? ( | ||
| <StockWarning>Sold Out</StockWarning> | ||
| ) : stock < 10 ? ( | ||
| <StockWarning>Only {stock} left!</StockWarning> | ||
| ) : null} | ||
| <div id={`price-${id}`} className='item-price'> | ||
| ${price} | ||
| </div> | ||
| {stock < 10 ? <StockWarning stock={stock} id={id} /> : null} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from 'react'; | ||
|
|
||
| function ImageUnavailable() { | ||
| return ( | ||
| <div className='image-unavailable elevation-04dp'> | ||
| Image | ||
| <br /> | ||
| Unavailable | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function ItemImage({ image }) { | ||
| return ( | ||
| <div className='preview-image'> | ||
| {image ? <img src={image} alt='' /> : <ImageUnavailable />} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,44 @@ | ||
| { | ||
| "clothing": [ | ||
| { | ||
| "id": 0, | ||
| "name": "T-Shirt", | ||
| "description": "Short sleeve.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 7 | ||
| }, | ||
| { | ||
| "id": 1, | ||
| "name": "Sweater", | ||
| "description": "Comfy.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 2 | ||
| }, | ||
| { | ||
| "id": 2, | ||
| "name": "Pants", | ||
| "description": "Denim.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 100 | ||
| } | ||
| ] | ||
| "clothing": [ | ||
| { | ||
| "id": 0, | ||
| "name": "T-Shirt", | ||
| "description": "Short sleeve.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 7 | ||
| }, | ||
| { | ||
| "id": 1, | ||
| "name": "Sweater", | ||
| "description": "Comfy.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 0 | ||
| }, | ||
| { | ||
| "id": 2, | ||
| "name": "Pants", | ||
| "description": "Denim.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 100 | ||
| }, | ||
| { | ||
| "id": 3, | ||
| "name": "Shoes", | ||
| "description": "For walking.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 100 | ||
| }, | ||
| { | ||
| "id": 4, | ||
| "name": "Socks", | ||
| "description": "Well that socks.", | ||
| "image": null, | ||
| "price": 19.99, | ||
| "stock": 100 | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.