Add delete function to Comment component
The Comment component has been updated to include a delete function which removes the selected comment from the displayed list in real time. This update enhances user experience by providing instant feedback when a comment is deleted. Additionally, debug logging was added to authorFollows function for testing purposes.
This commit is contained in:
parent
780c3571e4
commit
eb03dc1d05
|
@ -30,6 +30,7 @@ type Props = {
|
||||||
showArticleLink?: boolean
|
showArticleLink?: boolean
|
||||||
clickedReply?: (id: number) => void
|
clickedReply?: (id: number) => void
|
||||||
clickedReplyId?: number
|
clickedReplyId?: number
|
||||||
|
onDelete?: (id: number) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Comment = (props: Props) => {
|
export const Comment = (props: Props) => {
|
||||||
|
@ -64,9 +65,14 @@ export const Comment = (props: Props) => {
|
||||||
|
|
||||||
if (isConfirmed) {
|
if (isConfirmed) {
|
||||||
await deleteReaction(props.comment.id)
|
await deleteReaction(props.comment.id)
|
||||||
|
// TODO: Учесть то что deleteReaction может вернуть error
|
||||||
|
if (props.onDelete) {
|
||||||
|
props.onDelete(props.comment.id)
|
||||||
|
}
|
||||||
await showSnackbar({ body: t('Comment successfully deleted') })
|
await showSnackbar({ body: t('Comment successfully deleted') })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[deleteReaction]', error)
|
console.error('[deleteReaction]', error)
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,9 +127,8 @@ export const AuthorView = (props: Props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const a = author()
|
if (author()) {
|
||||||
if (a) {
|
fetchComments(author())
|
||||||
fetchComments(a)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -139,6 +138,9 @@ export const AuthorView = (props: Props) => {
|
||||||
: getImageUrl('production/image/logo_image.png'),
|
: getImageUrl('production/image/logo_image.png'),
|
||||||
)
|
)
|
||||||
const description = createMemo(() => getDescription(author()?.bio))
|
const description = createMemo(() => getDescription(author()?.bio))
|
||||||
|
const handleDeleteComment = (id: number) => {
|
||||||
|
setCommented((prev) => prev.filter((comment) => comment.id !== id));
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={styles.authorPage}>
|
<div class={styles.authorPage}>
|
||||||
|
@ -233,7 +235,14 @@ export const AuthorView = (props: Props) => {
|
||||||
<div class="col-md-20 col-lg-18">
|
<div class="col-md-20 col-lg-18">
|
||||||
<ul class={stylesArticle.comments}>
|
<ul class={stylesArticle.comments}>
|
||||||
<For each={commented()?.sort(byCreated).reverse()}>
|
<For each={commented()?.sort(byCreated).reverse()}>
|
||||||
{(comment) => <Comment comment={comment} class={styles.comment} showArticleLink />}
|
{(comment) =>
|
||||||
|
<Comment
|
||||||
|
comment={comment}
|
||||||
|
class={styles.comment}
|
||||||
|
showArticleLink={true}
|
||||||
|
onDelete={(id) => handleDeleteComment(id)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
</For>
|
</For>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -135,6 +135,7 @@ export const apiClient = {
|
||||||
user?: string
|
user?: string
|
||||||
}): Promise<AuthorFollows> => {
|
}): Promise<AuthorFollows> => {
|
||||||
const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
|
const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
|
||||||
|
console.log("!!! response:", response);
|
||||||
return response.data.get_author_follows
|
return response.data.get_author_follows
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user