From a0ac7987583c899e607767900c8531fea75c0c21 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 5 Sep 2023 22:45:52 +0700 Subject: [PATCH] Update comments count in post page --- package.json | 2 +- src/components/chat/ChatIframe.tsx | 13 ++++++++----- src/components/posts/PostStats.tsx | 6 ++++-- src/rtk/features/chat/chatHooks.ts | 9 ++++++++- src/rtk/features/chat/chatSlice.ts | 8 +++++++- yarn.lock | 8 ++++---- 6 files changed, 32 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index a9d687ba0..0c4fb1a0b 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "@subsocial/api": "0.8.10", "@subsocial/definitions": "0.8.10", "@subsocial/elasticsearch": "0.8.10", - "@subsocial/grill-widget": "^0.0.11", + "@subsocial/grill-widget": "^0.0.12", "@subsocial/resource-discussions": "^0.0.3", "@subsocial/utils": "0.8.10", "@tiptap/extension-highlight": "^2.0.0-beta.33", diff --git a/src/components/chat/ChatIframe.tsx b/src/components/chat/ChatIframe.tsx index ba2d1ee09..4df29ceeb 100644 --- a/src/components/chat/ChatIframe.tsx +++ b/src/components/chat/ChatIframe.tsx @@ -1,10 +1,11 @@ -import grill, { GrillConfig } from '@subsocial/grill-widget' +import grill, { GrillConfig, GrillEventListener } from '@subsocial/grill-widget' import { Resource } from '@subsocial/resource-discussions' import { summarize } from '@subsocial/utils' import clsx from 'clsx' import { ComponentProps, useEffect } from 'react' import useWrapInRef from 'src/hooks/useWrapInRef' import { useSendEvent } from 'src/providers/AnalyticContext' +import { useSetChatTotalMessageCount } from 'src/rtk/app/hooks' import { useAppSelector } from 'src/rtk/app/store' import { ChatEntity } from 'src/rtk/features/chat/chatSlice' @@ -18,6 +19,7 @@ export default function ChatIframe({ onUnreadCountChange, ...props }: ChatIframe const entity = useAppSelector(state => state.chat.entity) const sendEvent = useSendEvent() const sendEventRef = useWrapInRef(sendEvent) + const setChatTotalMessageCount = useSetChatTotalMessageCount() useEffect(() => { if (!entity) return @@ -33,10 +35,11 @@ export default function ChatIframe({ onUnreadCountChange, ...props }: ChatIframe return iframe } - const listener = onUnreadCountChange - ? (count: number) => { - console.log('unread count', count) - onUnreadCountChange(count) + const listener: GrillEventListener | undefined = onUnreadCountChange + ? (name, value) => { + const parsedValue = parseInt(value) ?? 0 + if (name === 'unread') onUnreadCountChange(parsedValue) + else if (name === 'totalMessage') setChatTotalMessageCount(parsedValue) } : undefined if (listener) { diff --git a/src/components/posts/PostStats.tsx b/src/components/posts/PostStats.tsx index 7b2621fac..f455c3a95 100644 --- a/src/components/posts/PostStats.tsx +++ b/src/components/posts/PostStats.tsx @@ -2,6 +2,7 @@ import { nonEmptyStr } from '@subsocial/utils' import clsx from 'clsx' import { useState } from 'react' import { useSetChatOpen } from 'src/rtk/app/hooks' +import { useAppSelector } from 'src/rtk/app/store' import { idToBn, PostStruct } from 'src/types' import { MutedSpan } from '../utils/MutedText' import { Pluralize } from '../utils/Plularize' @@ -18,14 +19,15 @@ export const StatsPanel = (props: StatsProps) => { const setChatOpen = useSetChatOpen() const [postVotersOpen, setPostVotersOpen] = useState(false) - const { upvotesCount, downvotesCount, repliesCount, sharesCount, id } = post + const totalMessageCount = useAppSelector(state => state.chat.totalMessageCount) + const { upvotesCount, downvotesCount, sharesCount, id } = post const reactionsCount = upvotesCount + downvotesCount const showReactionsModal = () => reactionsCount && setPostVotersOpen(true) const toggleCommentsSection = () => { setChatOpen(true) } - const comments = + const comments = return ( <> diff --git a/src/rtk/features/chat/chatHooks.ts b/src/rtk/features/chat/chatHooks.ts index 2970afb74..60d3d52de 100644 --- a/src/rtk/features/chat/chatHooks.ts +++ b/src/rtk/features/chat/chatHooks.ts @@ -1,6 +1,13 @@ import { useCallback } from 'react' import { useAppDispatch, useAppSelector } from 'src/rtk/app/store' -import { setChatConfig, setChatOpen } from '../chat/chatSlice' +import { setChatConfig, setChatOpen, setTotalMessageCount } from '../chat/chatSlice' + +export function useSetChatTotalMessageCount() { + const dispatch = useAppDispatch() + return useCallback((...params: Parameters) => { + dispatch(setTotalMessageCount(...params)) + }, []) +} export function useSetChatEntityConfig() { const dispatch = useAppDispatch() diff --git a/src/rtk/features/chat/chatSlice.ts b/src/rtk/features/chat/chatSlice.ts index 4b03385ae..a635777c9 100644 --- a/src/rtk/features/chat/chatSlice.ts +++ b/src/rtk/features/chat/chatSlice.ts @@ -10,11 +10,13 @@ type Entity = { export interface ChatEntity { isOpen: boolean entity: Entity + totalMessageCount: number } const initialState: ChatEntity = { isOpen: false, entity: null, + totalMessageCount: 0, } const slice = createSlice({ @@ -26,10 +28,14 @@ const slice = createSlice({ }, setChatConfig: (state, action: PayloadAction) => { state.entity = action.payload + state.totalMessageCount = 0 + }, + setTotalMessageCount: (state, action: PayloadAction) => { + state.totalMessageCount = action.payload }, }, }) -export const { setChatConfig, setChatOpen } = slice.actions +export const { setChatConfig, setChatOpen, setTotalMessageCount } = slice.actions export default slice.reducer diff --git a/yarn.lock b/yarn.lock index fc9637749..1de09f57b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2395,10 +2395,10 @@ "@elastic/elasticsearch" "7.4.0" "@subsocial/utils" latest -"@subsocial/grill-widget@^0.0.11": - version "0.0.11" - resolved "https://registry.yarnpkg.com/@subsocial/grill-widget/-/grill-widget-0.0.11.tgz#c77267b1c1344b5535fadfc5c1d7b062862f331f" - integrity sha512-2XOUbd467AeRtPkv2W3oYYfHGJCXAWEDMx6NpXdYs4AMOm1ZtHPjknrQ88/dcZCxDl26XcCRCSysu9n/6qPu2w== +"@subsocial/grill-widget@^0.0.12": + version "0.0.12" + resolved "https://registry.yarnpkg.com/@subsocial/grill-widget/-/grill-widget-0.0.12.tgz#57384850a3adb5342a5505a3f0d67c258d7e3b0e" + integrity sha512-Xed+wN/NEZ+mQlKA1olVVcBviVIQOTyqaCYcl9pGsg8yDdIBsKVjqJUKty1vvBL7gY0A+1osdwBgX2xUsbHOBA== "@subsocial/resource-discussions@^0.0.3": version "0.0.3"