Sb es modal test #44
Sb es modal test #44
Conversation
| @@ -0,0 +1,235 @@ | |||
| /** Modal Styling **/ | |||
There was a problem hiding this comment.
I would probably include a comment linking to the source of this CSS
There was a problem hiding this comment.
True, true. I just forgot.
src/components/ListItem.js
Outdated
| </button> | ||
| <button onClick={handleShow}>View Details</button> | ||
| </li> | ||
| <TestModal item={item} show={show} handleClose={handleClose} /> |
There was a problem hiding this comment.
This is great! Nice way to show the item details. Another option using a different library might be Drawer from Material UI
| let lastPurchase = item ? new Date(item.last_purchased).toDateString() : ''; | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
You shouldn't need the Fragment if you have a wrapping component like Modal.
| return ( | ||
| <> | ||
| <Modal show={show} onHide={handleClose}> | ||
| <Modal.Header> |
There was a problem hiding this comment.
Nice use of Modal's compound components 👍
| <button | ||
| className={isPurchased ? 'purchased' : 'not-purchased'} | ||
| onClick={onHandle} | ||
| disabled={isPurchased ? !null : null} |
There was a problem hiding this comment.
Not from this PR, but this expression can be simply disabled={!isPurchased}.
| disabled={isPurchased ? !null : null} | |
| disabled={!isPurchased} |
| <Shopping userToken={userToken} list={data} /> | ||
| )} | ||
| /> | ||
| <Route |
There was a problem hiding this comment.
The /add route needs to go first @espain16 @skillitzimberg. Switch will match the first path that it matches.
Type of Changes
Related Issue
closes #15
Description
From the shopping list, the user can tap to navigate to a detailed view of the item.
The detail view includes the following information:
When in the “item details” view, a back arrow is displayed in the header to take the user back to the “list” view.
List To Complete Task
Updates
Before
Previous Shopping List
After
Update To Shopping List UI
Item Detail View
Acceptance Criteria
Testing Steps / QA Criteria
Click Here for the preview of our branch.