Update comments count in post page

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",

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) {

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 = <Pluralize count={repliesCount || 0} singularText='Comment' />
+  const comments = <Pluralize count={totalMessageCount || 0} singularText='Comment' />
 
   return (
     <>

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<typeof setTotalMessageCount>) => {
+    dispatch(setTotalMessageCount(...params))
+  }, [])
+}
 
 export function useSetChatEntityConfig() {
   const dispatch = useAppDispatch()

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<Entity>) => {
       state.entity = action.payload
+      state.totalMessageCount = 0
+    },
+    setTotalMessageCount: (state, action: PayloadAction<number>) => {
+      state.totalMessageCount = action.payload
     },
   },
 })
 
-export const { setChatConfig, setChatOpen } = slice.actions
+export const { setChatConfig, setChatOpen, setTotalMessageCount } = slice.actions
 
 export default slice.reducer

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"