Feat: implement DeleteGroupDialog

kanta1207 commented 6 months ago

Overview

Implement DeleteGroupConfirmDialog component.

Changes

Wrap GroupCardDropdownMenu with DialogRoot, and put DeleteGroupConfirmDialog outside of drop down menu because if DialogRoot goes inside of GroupCardDropdownMenuContent, closing the dropdown will also close the dialog.
Add DeleteGroupConfirmDialog component.
Add trigger to open the dialog in GroupCardDropdownMenuContent.

Review points

The trigger is in GroupCardDropdownMenuContent, content is in GroupCardDropdownMenu. Is this component structure complexity okay? If not, not using DialogTrigger to open the dialog can be an another solution.

Screen Captures

https://github.com/nishiki-tech/nishiki-frontend/assets/99339182/bf0f42f3-8db6-4ebe-b508-0294f2940d79

Assignee Checklist:

[x] The naming convention of the PR title is correct (See the comment at the top of this template)
[x] The base branch is correct (See: Types of Branches)
[x] The branch name follows the Branch Naming Conventions
[x] The correct assignees and reviewers have been designated for this PR
[x] The coding style follows the Coding Style Guide
[x] All the related issues are associated with this PR
[x] All criteria in the associated issues are met (please tick the checkboxes)
[x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

[ ] Double-check the "Assignee Checklist"
[x] The code follows the generic best practices and our Coding Style Guide
[ ] The code is well-commented and easy to understand
[x] The UI changes accurately reflect the provided design

kanta1207 commented 6 months ago

@nick-y-ito Thank you for your review! I basically followed the way it's implemented in DeleteFoodDialog, and this PR stays focusing on only UI.

Please take a look at the change when you have time 🙏

kanta1207 commented 6 months ago

@nick-y-ito Thank you for your review!

the dropdown menu should be closed together when closing the dialog

I just forgot to implement the functionality in this PR, so I included it in commit #9c5e7d2.

I am sorry, I found an error in the console after I approved. That says: app-index.js:35 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Could you inspect it, please?

Sorry that I didn't notice the warning in the first place. I should've checked that. I fixed the issue in the commit #00e3444. It was because of unnecessary asChild in DropdownMenuItem.

Please kindly take a look at them again on your convenience 🙏

kanta1207 commented 6 months ago

@kanta1207 Thank you for updating!

I think the dropdown menu should also be closed when after the [ Delete ] button is clicked.

There is another problem with this behavior, though... #269

Thank you for your review! I fixed to close dropdown on closing dialog with delete button clicked! Please take a look again 🙏

nishiki-tech / nishiki-frontend