Code to add checkout functionality. #9
Conversation
Added the ability to update the cart items quantity. Linked the "Checkout" button to the checkout page. Created a form in the Checkout page. The "Place order" button has been linked to the Order completed page. Order complete page shows user info and order info. Cart clear implemented on Order complete.
| import styled from "styled-components"; | ||
| import { addOrderDetails } from "../common/pokemonStorage"; | ||
|
|
||
| const SubmitButton = styled.button` |
There was a problem hiding this comment.
I think since it's too many styled components needed it make sense to move them into a separate file. Nothing wrong with this implementation just nice code splitting :)
| const { name, value } = event.target; | ||
|
|
||
| setContact((prevValue) => { | ||
| if (name === "fName") { |
There was a problem hiding this comment.
All that could be written shorter:
setContact((prevState) => {
...prevState,
[name]: value,
});Let me know if you don't understand this structure so I can explain what it does :)
|
|
||
| export function CheckOut() { | ||
| const [contact, setContact] = useState({ | ||
| fName: "", |
There was a problem hiding this comment.
suggestion: name property as it is - meaning write it in full words firstName, lastName. Because you're not saving any space here but readability would be way better.
| return <div>OrderCompleted</div>; | ||
| const cart = getCartItems(); | ||
| const order = getOrderDetails(); | ||
| console.log("order", order); |
| import { useHistory } from "react-router-dom"; | ||
| import styled from "styled-components"; | ||
| import { HRStyle } from "./Hr"; | ||
| import {} from "module"; |
There was a problem hiding this comment.
this is probably some leftover code
| try { | ||
| const counterStorage = localStorage.getItem(COUNTER_KEY); | ||
| if (counterStorage) { | ||
| /* eslint-disable */ |
There was a problem hiding this comment.
don't use this generic disabling syntax - because it's not telling to others what exactly you're trying to fix with it. In case you need to do it - disable exact rule which is failing
| flex-direction: column; | ||
| align-items: flex-end; | ||
| `; | ||
|
|
|
|
||
| export const getCartItems = () => { | ||
| try { | ||
| const cartStorage = localStorage.getItem(STORAGE_KEY); | ||
| return JSON.parse(cartStorage); | ||
| return cartStorage ? JSON.parse(cartStorage) : []; |
There was a problem hiding this comment.
you can do it shorter: JSON.parse(cartStorage) || [].
| } catch (e) { | ||
| return []; | ||
| } | ||
| }; | ||
|
|
||
| export const addToCart = (item) => { | ||
| const cartStorage = getCartItems(); | ||
| const currentCounter = getCounter(); | ||
| const foundIndex = cartStorage.findIndex((itm) => itm.name === item.name); |
There was a problem hiding this comment.
same here about names: itm is not really a good name. In such case I'll go with just i as a short from item, or with full cartItem which probably better because you see instantly that you're trying to find same nae in cart
| localStorage.setItem(STORAGE_KEY, JSON.stringify(filteredCart)); | ||
| return filteredCart; | ||
| const currentCounter = getCounter(); | ||
| console.log("currentCounter", currentCounter); |
Added the ability to update the cart items quantity. Linked the "Checkout" button to the checkout page. Created a form in the Checkout page. The "Place order" button has been linked to the Order completed page. Order complete page shows user info and order info. Cart clear implemented on Order complete.