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:
ilya-bkv 2024-03-06 14:56:32 +03:00
parent 780c3571e4
commit eb03dc1d05
3 changed files with 21 additions and 5 deletions

View File

@ -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)
} }

View File

@ -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>

View File

@ -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
}, },