-
-
Save codecademydev/dc6329450a0f95bba822132fe712d15b to your computer and use it in GitHub Desktop.
Codecademy export
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
import React from 'react'; | |
import { | |
calculateTotal, | |
getCurrencySymbol, | |
} from '../../utilities/utilities.js'; | |
// Import the changeItemQuantity() action creator. | |
import {changeItemQuantity} from './cartSlice.js'; | |
export const Cart = (props) => { | |
const { cart, currencyFilter, dispatch } = props; | |
const onInputChangeHandler = (name, input) => { | |
console.log(input); | |
// If the user enters a bad value... | |
if (input === '') { | |
return; | |
} | |
// Otherwise, convert the input into a number and pass it along as the newQuantity. | |
const newQuantity = Number(input); | |
// Dispatch an action to change the quantity of the given name and quantity. | |
dipatch(changeInputQuantity(name, newQuantity)); | |
}; | |
// Use the cart and currencyFilter slices to render their data. | |
const cartElements = []; | |
for (let item in cart) { | |
cartElements.push(createCartItem(item)); | |
} | |
const total = calculateTotal(cart, currencyFilter); | |
return ( | |
<div id="cart-container"> | |
<ul id="cart-items">{cartElements}</ul> | |
<h3 className="total"> | |
Total{' '} | |
<span className="total-value"> | |
{getCurrencySymbol(currencyFilter)}{total} {currencyFilter} | |
</span> | |
</h3> | |
</div> | |
); | |
function createCartItem(name) { | |
const item = cart[name]; | |
if (item.quantity === 0) { | |
return; | |
} | |
return ( | |
<li key={name}> | |
<p>{name}</p> | |
<select | |
className="item-quantity" | |
value={item.quantity} | |
onChange={(e) => { | |
onInputChangeHandler(name, e.target.value); | |
}} | |
> | |
{[...Array(100).keys()].map((_, index) => ( | |
<option key={index} value={index}> | |
{index} | |
</option> | |
))} | |
</select> | |
</li> | |
); | |
} | |
}; |
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
export const addItem = (itemToAdd) => { | |
return { | |
type: 'cart/addItem', | |
payload: itemToAdd, | |
}; | |
}; | |
// Create your changeItemQuantity action creator here. | |
export const changeItemQuantity = ({name, newQuantity}) => { | |
return { | |
type: 'cart/changeItemQuantity', | |
payload: {name, newQuantity}, | |
}; | |
}; | |
const initialCart = {}; | |
export const cartReducer = (cart = initialCart, action) => { | |
switch (action.type) { | |
case 'cart/addItem': { | |
const { name, price } = action.payload; | |
// if the item already exists, increase the quantity by 1, otherwise set it to 1 | |
const quantity = cart[name] ? cart[name].quantity + 1 : 1; | |
const newItem = { price, quantity }; | |
// Add the new item to the cart (or replace it if it existed already) | |
return { | |
...cart, | |
[name]: newItem | |
}; | |
} | |
case 'cart/changeItemQuantity': { | |
const { name, newQuantity } = action.payload; | |
const itemToUpdate = cart[name]; | |
// Create a copy of itemToUpdate and update the quantity prop. | |
const updatedItem = {...itemToUpdate, quantity: newQuantity}; | |
// Return a copy of the cart with the updatedItem included. | |
return {...cart, updatedItem}; | |
} | |
default: { | |
return cart; | |
} | |
} | |
}; |
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
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { App } from './app/App.js'; | |
// Import the store here. | |
import { store} from './app/store.js'; | |
// Pass state and dispatch props to the <App /> component. | |
const render = () => { | |
ReactDOM.render( | |
<App | |
state={store.getState()} | |
dispatch={store.dispatch} | |
/>, | |
document.getElementById('root') | |
) | |
}; | |
render(); | |
// Subscribe render to the store. | |
store.subscribe(render); |
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
// Import createStore and combineReducers here. | |
import {createStore, combineReducers} from 'redux'; | |
// Import the slice reducers here. | |
import {inventoryReducer} from '../features/inventory/inventorySlice.js'; | |
import {cartReducer} from '../features/cart/cartSlice.js'; | |
import {currencyFilterReducer} from '../features/currencyFilter/currencyFilterSlice.js'; | |
// Create and export the store here. | |
export const store = createStore(combineReducers({ | |
inventory: inventoryReducer, | |
cart: cartReducer, | |
currencyFilter: currencyFilterReducer | |
})); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment