Add blocked count

src/components/chats/UnapprovedMemeCount.tsx

@@ -1,5 +1,12 @@
+import CheckImage from '@/assets/emojis/check.png'
+import ForbiddenImage from '@/assets/emojis/forbidden.png'
+import TimeImage from '@/assets/emojis/time.png'
+import { env } from '@/env.mjs'
+import { getBlockedResourcesQuery } from '@/services/datahub/moderation/query'
 import { getUnapprovedMemesCountQuery } from '@/services/datahub/posts/query'
 import { cx } from '@/utils/class-names'
+import Image from 'next/image'
+import { useMemo } from 'react'
 
 export default function UnapprovedMemeCount({
   address,
@@ -10,11 +17,34 @@ export default function UnapprovedMemeCount({
   chatId: string
   className?: string
 }) {
-  const { data: count, isLoading } = getUnapprovedMemesCountQuery.useQuery({
-    address,
-    chatId,
-  })
-  if (isLoading) return null
+  const { data: count, isLoading: loadingUnapproved } =
+    getUnapprovedMemesCountQuery.useQuery({
+      address,
+      chatId,
+    })
+  const { data: blockedInApp, isLoading: loadingBlockedInApp } =
+    getBlockedResourcesQuery.useQuery({ appId: env.NEXT_PUBLIC_APP_ID })
+  const { data: blockedInChat, isLoading: loadingBlockedInContest } =
+    getBlockedResourcesQuery.useQuery({
+      postEntityId: env.NEXT_PUBLIC_CONTEST_CHAT_ID,
+    })
+
+  const isLoading =
+    loadingUnapproved || loadingBlockedInApp || loadingBlockedInContest
+  const blockedCount = useMemo(() => {
+    if (isLoading) return null
+    const blockedInAppCount =
+      blockedInApp?.blockedResources.postId?.filter((id) =>
+        count?.ids.includes(id)
+      ).length ?? 0
+    const blockedInChatCount =
+      blockedInChat?.blockedResources.postId?.filter((id) =>
+        count?.ids.includes(id)
+      ).length ?? 0
+    return blockedInAppCount + blockedInChatCount
+  }, [count, blockedInApp, blockedInChat, isLoading])
+
+  if (isLoading || loadingBlockedInApp || loadingBlockedInContest) return null
 
   const approved = count?.approved ?? 0
   const unapproved = count?.unapproved ?? 0
@@ -26,7 +56,22 @@ export default function UnapprovedMemeCount({
         className
       )}
     >
-      {`⏳ ${unapproved} / ✅ ${approved}`}
+      <div className='flex items-center gap-1'>
+        <div className='flex items-center gap-1'>
+          <Image src={ForbiddenImage} className='h-4 w-4' alt='' />
+          <span>{blockedCount}</span>
+        </div>
+        <span>/</span>
+        <div className='flex items-center gap-1'>
+          <Image src={TimeImage} className='h-4 w-4' alt='' />
+          <span>{unapproved}</span>
+        </div>
+        <span>/</span>
+        <div className='flex items-center gap-1'>
+          <Image src={CheckImage} className='h-4 w-4' alt='' />
+          <span>{approved}</span>
+        </div>
+      </div>
     </div>
   )
 }

src/services/datahub/generated-query.ts

@@ -2884,7 +2884,11 @@ export type GetUnapprovedMemesCountQuery = {
   __typename?: 'Query'
   posts: {
     __typename?: 'FindPostsResponseDto'
-    data: Array<{ __typename?: 'Post'; approvedInRootPost: boolean }>
+    data: Array<{
+      __typename?: 'Post'
+      id: string
+      approvedInRootPost: boolean
+    }>
   }
 }
 
@@ -3675,6 +3679,7 @@ export const GetUnapprovedMemesCount = gql`
       }
     ) {
       data {
+        id
         approvedInRootPost
       }
     }

src/services/datahub/posts/query.ts

@@ -558,6 +558,7 @@ const GET_UNAPPROVED_MEMES_COUNT = gql`
       }
     ) {
       data {
+        id
         approvedInRootPost
       }
     }
@@ -579,7 +580,7 @@ export const getUnapprovedMemesCountQuery = createQuery({
       if (post.approvedInRootPost) approved++
       else unapproved++
     })
-    return { unapproved, approved }
+    return { unapproved, approved, ids: res.posts.data.map((post) => post.id) }
   },
   defaultConfigGenerator: (params) => ({
     enabled: !!params?.address && !!params.chatId,