Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
D
denser
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
hive
denser
Merge requests
!481
Resolve "Update UI: creating comment and nested comments in the post"
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Resolve "Update UI: creating comment and nested comments in the post"
439-update-ui-creating-comment-and-nested-comments-in-the-post
into
main
Overview
0
Commits
7
Pipelines
5
Changes
4
Merged
Wojciech Barcik
requested to merge
439-update-ui-creating-comment-and-nested-comments-in-the-post
into
main
9 months ago
Overview
0
Commits
7
Pipelines
5
Changes
3
Expand
Closes
#439 (closed)
0
0
Merge request reports
Compare
version 2
version 3
b11aa5a3
9 months ago
version 2
f68eff2b
9 months ago
version 1
dcec623d
9 months ago
main (base)
and
version 3
latest version
7b1df528
7 commits,
9 months ago
version 3
b11aa5a3
6 commits,
9 months ago
version 2
f68eff2b
3 commits,
9 months ago
version 1
dcec623d
2 commits,
9 months ago
Show latest version
3 files
+
54
−
39
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
3
Search (e.g. *.vue) (Ctrl+P)
apps/blog/components/
alert-dialog-delete
.tsx
→
apps/blog/components/
comment-delete-dialog
.tsx
+
26
−
17
Options
@@ -10,44 +10,53 @@ import {
AlertDialogTrigger
}
from
'
@ui/components/alert-dialog
'
;
import
{
useUser
}
from
'
@smart-signer/lib/auth/use-user
'
;
import
{
ReactNode
}
from
'
react
'
;
import
{
useDeleteCommentMutation
}
from
'
./hooks/use-comment-mutations
'
;
import
{
handleError
}
from
'
@ui/lib/utils
'
;
import
{
ReactNode
,
useState
}
from
'
react
'
;
export
function
AlertDialogDelete
({
children
,
permlink
}:
{
children
:
ReactNode
;
permlink
:
string
})
{
export
function
CommentDeleteDialog
({
children
,
permlink
,
action
}:
{
children
:
ReactNode
;
permlink
:
string
,
action
:
(
permlink
:
string
)
=>
void
;
})
{
const
{
user
}
=
useUser
();
const
deleteCommentMutation
=
useDeleteCommentMutation
();
const
deleteComment
=
async
()
=>
{
try
{
await
deleteCommentMutation
.
mutateAsync
({
permlink
});
}
catch
(
error
)
{
handleError
(
error
,
{
method
:
'
deleteComment
'
,
params
:
{
permlink
}
});
}
};
const
[
open
,
setOpen
]
=
useState
(
false
);
return
(
<
AlertDialog
>
<
AlertDialog
open
=
{
open
}
onOpenChange
=
{
setOpen
}
>
<
AlertDialogTrigger
asChild
>
{
children
}
</
AlertDialogTrigger
>
<
AlertDialogContent
className
=
"flex flex-col gap-8 sm:rounded-r-xl "
>
<
AlertDialogHeader
className
=
"gap-2"
>
<
div
className
=
"flex items-center justify-between"
>
<
AlertDialogTitle
data-testid
=
"flag-dialog-header"
>
Confirm Delete Comment
</
AlertDialogTitle
>
<
AlertDialogCancel
className
=
"border-none hover:text-red-800"
data-testid
=
"flag-dialog-close"
>
<
AlertDialogCancel
className
=
"border-none hover:text-red-800"
data-testid
=
"flag-dialog-close"
>
X
</
AlertDialogCancel
>
</
div
>
<
AlertDialogDescription
data-testid
=
"flag-dialog-description"
>
Are you sure?
</
AlertDialogDescription
>
</
AlertDialogHeader
>
<
AlertDialogFooter
className
=
"gap-2 sm:flex-row-reverse"
>
<
AlertDialogCancel
className
=
"hover:text-red-800"
data-testid
=
"flag-dialog-cancel"
>
<
AlertDialogCancel
className
=
"hover:text-red-800"
data-testid
=
"flag-dialog-cancel"
>
Cancel
</
AlertDialogCancel
>
{
user
&&
user
.
isLoggedIn
?
(
<
AlertDialogAction
autoFocus
className
=
"rounded-none bg-gray-800 text-base text-white shadow-lg shadow-red-600 hover:bg-red-600 hover:shadow-gray-800 disabled:bg-gray-400 disabled:shadow-none"
data-testid
=
"flag-dialog-ok"
onClick
=
{
deleteComment
}
onClick
=
{
(
e
)
=>
{
e
.
preventDefault
();
action
(
permlink
);
setOpen
(
false
);
}
}
>
OK
</
AlertDialogAction
>
Loading