Checkout#8
Conversation
MrTim
left a comment
MrTim
left a comment
There was a problem hiding this comment.
Good work! left some comments and suggestions where could be improved.
One thing in general I see in your code - not consistent code style and broken indentation. This aspect of the code is very important and would be really helpful (for you) if you'll try to pay a little bit more attention there :)
| export function Checkout() { | ||
| return <div>Checkout</div>; | ||
| return <div> | ||
| <Form /> |
There was a problem hiding this comment.
something wrong with indentation. And check it in all the files and code, because there are some places below when it's broken.
| display: block; | ||
| margin: 5px; | ||
| `; | ||
|
|
| const [customer, setCustomer] = useState(); | ||
| const history = useHistory(); | ||
| const handleChange = (e)=>{ | ||
| const name=e.target.value; |
There was a problem hiding this comment.
pay attention to the code style, this is super important when you're submitting your code for review.
Here you don't put spaces around = and =>.
Suggestion (one more time): install Prettier so it can help you
| <h1>CHECKOUT</h1> | ||
| <PanelStyle> | ||
| <FormLayout onSubmit={handleSubmit}> | ||
| <Label>NAME</Label> |
There was a problem hiding this comment.
You don't need to use caps in the field names. Name them just with first capital letter, that would be enough
| flex-direction: column; | ||
| align-items: flex-end; | ||
| `; | ||
| const Card = ({name, img, type, price, quantity}) =>( |
There was a problem hiding this comment.
should not this Card component come from "./components/Card"; same as in ShoppingCart?
| <Wrapper> | ||
| <Message>Hello {customerName} your order was successfully placed, Thank You for Shopping with us!!</Message> | ||
| <br /> | ||
| <Message>ORDERED LIST</Message> |
There was a problem hiding this comment.
Same here: don't use caps text in the UI, this is not a good practice.
| {cart.map((item) => ( | ||
| <Card | ||
| key={item.name} | ||
| {...item} |
There was a problem hiding this comment.
better would be to not just spread whatever is inside item object, but explicitely pass props one by one. This will increase quality of the code (and you want need to turn off eslint rules)
2 participants
checkout and order confirmation.
@correttojs