Mn.approve reject modal2 #363
Conversation
…-Community/speak-for-the-trees-frontend into SK.MN.add.image.drop.down
…-Community/speak-for-the-trees-frontend into SK.MN.approve.reject.image
…nity/speak-for-the-trees-frontend into SK.MN.reject-image2
Finished most of the UI for the grid view and the modals
| > | ||
| Accept | ||
| </Button> |
There was a problem hiding this comment.
⛏️ Seems like this button's contents got deleted, which causes the "Accept" button to not show on the list view:
| const filteredData = useMemo( | ||
| () => | ||
| fetchData | ||
| ? fetchData.filter( | ||
| (data) => !approvedOrRejectedImageIds.includes(data.imageId), | ||
| ) | ||
| : [], | ||
| [fetchData, approvedOrRejectedImageIds], | ||
| ); | ||
|
|
||
| const tableData = useMemo( | ||
| () => (fetchData ? fetchData.map(responseToTableData) : []), | ||
| [fetchData], | ||
| () => (filteredData ? filteredData.map(responseToTableData) : []), | ||
| [filteredData], |
There was a problem hiding this comment.
❓ What's the reason for putting filteredData into its own useMemo here? Seems like we only use it to compute tableData unless I'm missing something
| toReject.push(protectedApiClient.rejectImage(data.key, rejectionReason)); | ||
| Promise.all(toReject).then(() => { | ||
| props.setApprovedOrRejectedImageIds((prevIds) => [...prevIds, data.key]); | ||
| close(); |
There was a problem hiding this comment.
⛏️ Can we add some feedback with the message antd component (specifically, message.success() on success, and message.error() on failure) once the API call finishes? That way, the user can know for sure the outcome of their action instead of having to assume it went through fine.
| Promise.all(toApprove).then(() => { | ||
| props.setApprovedOrRejectedImageIds((prevIds) => [...prevIds, data.key]); | ||
| close(); | ||
| }); |
There was a problem hiding this comment.
⛏️ Same as above - can we add some user feedback here with message as well?
| ); | ||
| } | ||
|
|
||
| const TreeSummaryDisplay = () => { |
There was a problem hiding this comment.
⛏️ Right now, if someone selects an image on the list view and then switches to the grid view, it's not super clear which ones are selected:
Could we add some visuals to show which images are currently selected? Some things I'm thinking are:
- green border around the image
- something like in the figma where a checkmark is overlaid: (although I worry a little it might get read as "approved" instead of "selected")
though if you think of something you feel is better, definitely go for it!
| }; | ||
|
|
||
| const GridView = () => { | ||
| const pageSize = 9; // Number of cards per page |
There was a problem hiding this comment.
do we want the pageSize to stay constant 9 or scale with viewport size?
| () => | ||
| fetchData | ||
| ? fetchData.filter( | ||
| (data) => !approvedOrRejectedImageIds.includes(data.imageId), |
There was a problem hiding this comment.
Just to make sure I understand, whenever someone accepts or rejects an image, after closing the approval box modal the images should disappear from grid view without refreshing?
There was a problem hiding this comment.
I might just be missing it, but in table view does approving/rejecting also update this approvedOrRejectedImageIds list? If not, then the changes made in table view might not be reflected in grid view if not refreshed.
|
Great job on this absolutely behemoth of a ticket guys! very impressive. It was a nightmare to read through |
Checklist
yarn run checkyarn run test#360