From eb03dc1d05276d61af7810aca4207eb50baaf40d Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Wed, 6 Mar 2024 14:56:32 +0300 Subject: [PATCH 1/3] 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. --- src/components/Article/Comment/Comment.tsx | 8 +++++++- src/components/Views/Author/Author.tsx | 17 +++++++++++++---- src/graphql/client/core.ts | 1 + 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx index 445d4944..316f0fa2 100644 --- a/src/components/Article/Comment/Comment.tsx +++ b/src/components/Article/Comment/Comment.tsx @@ -30,6 +30,7 @@ type Props = { showArticleLink?: boolean clickedReply?: (id: number) => void clickedReplyId?: number + onDelete?: (id: number) => void } export const Comment = (props: Props) => { @@ -64,9 +65,14 @@ export const Comment = (props: Props) => { if (isConfirmed) { await deleteReaction(props.comment.id) - + // TODO: Учесть то что deleteReaction может вернуть error + if (props.onDelete) { + props.onDelete(props.comment.id) + } await showSnackbar({ body: t('Comment successfully deleted') }) } + + } catch (error) { console.error('[deleteReaction]', error) } diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 1649d92c..b519ca28 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -127,9 +127,8 @@ export const AuthorView = (props: Props) => { } createEffect(() => { - const a = author() - if (a) { - fetchComments(a) + if (author()) { + fetchComments(author()) } }) @@ -139,6 +138,9 @@ export const AuthorView = (props: Props) => { : getImageUrl('production/image/logo_image.png'), ) const description = createMemo(() => getDescription(author()?.bio)) + const handleDeleteComment = (id: number) => { + setCommented((prev) => prev.filter((comment) => comment.id !== id)); + } return (
@@ -233,7 +235,14 @@ export const AuthorView = (props: Props) => {
    - {(comment) => } + {(comment) => + handleDeleteComment(id)} + /> + }
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts index d9fef87a..b46cdc27 100644 --- a/src/graphql/client/core.ts +++ b/src/graphql/client/core.ts @@ -135,6 +135,7 @@ export const apiClient = { user?: string }): Promise => { const response = await publicGraphQLClient.query(authorFollows, params).toPromise() + console.log("!!! response:", response); return response.data.get_author_follows }, From 45e8f2ba02db6c26717a58799b0244526ed106af Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Wed, 6 Mar 2024 15:02:32 +0300 Subject: [PATCH 2/3] Refactor Comment component and improve debug logging Implemented a delete function in the Comment component that filters out the selected comment in real time, enhancing the user experience by providing immediate feedback upon deletion. Also, refactor the authorFollows function in the GraphQL client core to use standardized string quotations for better code consistency. --- src/components/Article/Comment/Comment.tsx | 2 -- src/components/Views/Author/Author.tsx | 6 +++--- src/graphql/client/core.ts | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx index 316f0fa2..a0fee501 100644 --- a/src/components/Article/Comment/Comment.tsx +++ b/src/components/Article/Comment/Comment.tsx @@ -71,8 +71,6 @@ export const Comment = (props: Props) => { } await showSnackbar({ body: t('Comment successfully deleted') }) } - - } catch (error) { console.error('[deleteReaction]', error) } diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index b519ca28..ad9f5f66 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -139,7 +139,7 @@ export const AuthorView = (props: Props) => { ) const description = createMemo(() => getDescription(author()?.bio)) const handleDeleteComment = (id: number) => { - setCommented((prev) => prev.filter((comment) => comment.id !== id)); + setCommented((prev) => prev.filter((comment) => comment.id !== id)) } return ( @@ -235,14 +235,14 @@ export const AuthorView = (props: Props) => {
    - {(comment) => + {(comment) => ( handleDeleteComment(id)} /> - } + )}
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts index b46cdc27..bfc0e03f 100644 --- a/src/graphql/client/core.ts +++ b/src/graphql/client/core.ts @@ -135,7 +135,7 @@ export const apiClient = { user?: string }): Promise => { const response = await publicGraphQLClient.query(authorFollows, params).toPromise() - console.log("!!! response:", response); + console.log('!!! response:', response) return response.data.get_author_follows }, From 626624ddb425f3544af9bc2ad133d45251cf4602 Mon Sep 17 00:00:00 2001 From: Untone Date: Wed, 6 Mar 2024 15:36:12 +0300 Subject: [PATCH 3/3] topics-comments --- public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + src/components/Topic/TopicBadge/TopicBadge.tsx | 11 +++++++---- src/components/Views/AllTopics/AllTopics.tsx | 1 - 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5dfd02bb..15668aca 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -83,6 +83,7 @@ "Comment successfully deleted": "Comment successfully deleted", "Commentator": "Commentator", "Comments": "Comments", + "CommentsWithCount": "{count, plural, =0 {{count} comments} one {{count} comment} few {{count} comments} other {{count} comments}}", "Communities": "Communities", "Community Discussion Rules": "Community Discussion Rules", "Community Principles": "Community Principles", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 8c93787b..788d31cc 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -88,6 +88,7 @@ "Comment": "Комментировать", "Commentator": "Комментатор", "Comments": "Комментарии", + "CommentsWithCount": "{count, plural, =0 {{count} комментариев} one {{count} комментарий} few {{count} комментария} other {{count} комментариев}}", "Communities": "Сообщества", "Community Discussion Rules": "Правила дискуссий в сообществе", "Community Principles": "Принципы сообщества", diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx index 9f7f712e..f4767986 100644 --- a/src/components/Topic/TopicBadge/TopicBadge.tsx +++ b/src/components/Topic/TopicBadge/TopicBadge.tsx @@ -115,12 +115,15 @@ export const TopicBadge = (props: Props) => {
- {t('shoutsWithCount', { count: props.topic?.stat?.shouts })} - {t('authorsWithCount', { count: props.topic?.stat?.authors })} + {t('shoutsWithCount', {count: props.topic?.stat?.shouts})} + {t('authorsWithCount', {count: props.topic?.stat?.authors})} - {t('followersWithCount', { count: props.topic?.stat?.followers })} + {t('FollowersWithCount', {count: props.topic?.stat?.followers})} + + {t('CommentsWithCount', {count: props.topic?.stat?.comments ?? 0})} +
- + ) } diff --git a/src/components/Views/AllTopics/AllTopics.tsx b/src/components/Views/AllTopics/AllTopics.tsx index 3fe6243d..fdb8b532 100644 --- a/src/components/Views/AllTopics/AllTopics.tsx +++ b/src/components/Views/AllTopics/AllTopics.tsx @@ -12,7 +12,6 @@ import { capitalize } from '../../../utils/capitalize' import { dummyFilter } from '../../../utils/dummyFilter' import { getImageUrl } from '../../../utils/getImageUrl' import { scrollHandler } from '../../../utils/scroll' -import { TopicCard } from '../../Topic/Card' import { Loading } from '../../_shared/Loading' import { SearchField } from '../../_shared/SearchField'