Add minimum 3 unapproved meme to review

src/components/chats/UnapprovedMemeCount.tsx

@@ -0,0 +1,13 @@
+import { getUnapprovedMemesCountQuery } from '@/services/datahub/posts/query'
+
+export default function UnapprovedMemeCount({ address }: { address: string }) {
+  const { data: count, isLoading } =
+    getUnapprovedMemesCountQuery.useQuery(address)
+  if (isLoading) return null
+
+  return (
+    <div className='rounded-full bg-background-lightest px-1.5 py-0 text-xs'>
+      {(count ?? 0) >= 3 ? '✅' : '🚫'} {count ?? 0}
+    </div>
+  )
+}

src/components/extensions/common/CommonChatItem.tsx

@@ -5,19 +5,20 @@ import { useModerateWithSuccessToast } from '@/components/chats/ChatItem/ChatIte
 import ChatRelativeTime from '@/components/chats/ChatItem/ChatRelativeTime'
 import MessageStatusIndicator from '@/components/chats/ChatItem/MessageStatusIndicator'
 import RepliedMessagePreview from '@/components/chats/ChatItem/RepliedMessagePreview'
+import UnapprovedMemeCount from '@/components/chats/UnapprovedMemeCount'
 import { getRepliedMessageId } from '@/components/chats/utils'
 import SuperLike from '@/components/content-staking/SuperLike'
 import useAuthorizedForModeration from '@/hooks/useAuthorizedForModeration'
 import useIsMessageBlocked from '@/hooks/useIsMessageBlocked'
 import { getSuperLikeCountQuery } from '@/services/datahub/content-staking/query'
 import { getModerationReasonsQuery } from '@/services/datahub/moderation/query'
 import { useApproveUser } from '@/services/datahub/posts/mutation'
-import { getProfileQuery } from '@/services/datahub/profiles/query'
 import { isMessageSent } from '@/services/subsocial/commentIds/optimistic'
 import { useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { getTimeRelativeToNow } from '@/utils/date'
 import Linkify from 'linkify-react'
+import { useInView } from 'react-intersection-observer'
 import { ExtensionChatItemProps } from '../types'
 
 type DerivativesData = {
@@ -70,6 +71,7 @@ export default function CommonChatItem({
   bg = 'background',
   showApproveButton,
 }: CommonChatItemProps) {
+  const { inView, ref } = useInView()
   const myAddress = useMyMainAddress()
   const { isAuthorized } = useAuthorizedForModeration(chatId)
   const { mutate: moderate, isLoading: loadingModeration } =
@@ -202,6 +204,7 @@ export default function CommonChatItem({
               'flex items-baseline gap-2 overflow-hidden px-2.5 first:pt-1.5',
               othersMessage.checkMark !== 'top' && 'justify-between'
             )}
+            ref={ref}
           >
             <ProfilePreviewModalName
               clipText
@@ -215,6 +218,9 @@ export default function CommonChatItem({
               enableProfileModal={enableProfileModal}
               className={cx('text-sm font-medium text-text-secondary')}
             />
+            {showApproveButton && inView && (
+              <UnapprovedMemeCount address={ownerId} />
+            )}
             {/* <SubTeamLabel address={ownerId} /> */}
             {othersMessage.checkMark === 'top' &&
               otherMessageCheckMarkElement()}
@@ -351,7 +357,6 @@ function ApproveButton({
   chatId: string
   ownerId: string
 }) {
-  const { data: profile } = getProfileQuery.useQuery(ownerId)
   const { mutate, isLoading } = useApproveUser()
   return (
     <Button

src/constants/chat.ts

@@ -7,3 +7,5 @@ const CUSTOM_CHAT_MAX_LENGTH: Record<string, number> = {
 export function getMaxMessageLength(chatId: string) {
   return CUSTOM_CHAT_MAX_LENGTH[chatId] ?? DEFAULT_MAX_MESSAGE_LENGTH
 }
+
+export const MIN_MEME_FOR_REVIEW = 3

src/services/datahub/generated-query.ts

@@ -2851,6 +2851,15 @@ export type GetLastPostedMemeQuery = {
   }
 }
 
+export type GetUnapprovedMemesCountQueryVariables = Exact<{
+  address: Scalars['String']['input']
+}>
+
+export type GetUnapprovedMemesCountQuery = {
+  __typename?: 'Query'
+  posts: { __typename?: 'FindPostsResponseDto'; total?: number | null }
+}
+
 export type SubscribePostSubscriptionVariables = Exact<{ [key: string]: never }>
 
 export type SubscribePostSubscription = {
@@ -3602,7 +3611,7 @@ export const GetLastPostedMeme = gql`
   query GetLastPostedMeme($address: String!) {
     posts(
       args: {
-        filter: { createdByAccountAddress: $address }
+        filter: { createdByAccountAddress: $address, approvedInRootPost: true }
         pageSize: 1
         orderBy: "createdAtTime"
         orderDirection: DESC
@@ -3614,6 +3623,17 @@ export const GetLastPostedMeme = gql`
     }
   }
 `
+export const GetUnapprovedMemesCount = gql`
+  query GetUnapprovedMemesCount($address: String!) {
+    posts(
+      args: {
+        filter: { createdByAccountAddress: $address, approvedInRootPost: true }
+      }
+    ) {
+      total
+    }
+  }
+`
 export const SubscribePost = gql`
   subscription SubscribePost {
     post {

src/services/datahub/posts/mutation.ts

@@ -278,6 +278,7 @@ export function useSendMessage(
 
       const myAddress = getMyMainAddress()
       if (queryClient && myAddress) {
+        lastSentMessageStorage.remove()
         getTimeLeftUntilCanPostQuery.setQueryData(queryClient, myAddress, 0)
       }
     },

src/services/datahub/posts/query.ts

@@ -26,6 +26,8 @@ import {
   GetPostMetadataQueryVariables,
   GetPostsBySpaceIdQuery,
   GetPostsBySpaceIdQueryVariables,
+  GetUnapprovedMemesCountQuery,
+  GetUnapprovedMemesCountQueryVariables,
   GetUnreadCountQuery,
   GetUnreadCountQueryVariables,
   QueryOrder,
@@ -481,7 +483,7 @@ const GET_LAST_POSTED_MEME = gql`
   query GetLastPostedMeme($address: String!) {
     posts(
       args: {
-        filter: { createdByAccountAddress: $address }
+        filter: { createdByAccountAddress: $address, approvedInRootPost: true }
         pageSize: 1
         orderBy: "createdAtTime"
         orderDirection: DESC
@@ -533,3 +535,31 @@ export const getTimeLeftUntilCanPostQuery = createQuery({
     enabled: !!address,
   }),
 })
+
+const GET_UNAPPROVED_MEMES_COUNT = gql`
+  query GetUnapprovedMemesCount($address: String!) {
+    posts(
+      args: {
+        filter: { createdByAccountAddress: $address, approvedInRootPost: false }
+      }
+    ) {
+      total
+    }
+  }
+`
+export const getUnapprovedMemesCountQuery = createQuery({
+  key: 'unapprovedMemesCount',
+  fetcher: async (address: string) => {
+    const res = await datahubQueryRequest<
+      GetUnapprovedMemesCountQuery,
+      GetUnapprovedMemesCountQueryVariables
+    >({
+      document: GET_UNAPPROVED_MEMES_COUNT,
+      variables: { address },
+    })
+    return res.posts.total ?? 0
+  },
+  defaultConfigGenerator: (address) => ({
+    enabled: !!address,
+  }),
+})

src/services/datahub/posts/subscription.tsx

@@ -1,9 +1,11 @@
 import Toast from '@/components/Toast'
+import { MIN_MEME_FOR_REVIEW } from '@/constants/chat'
 import { getPostQuery } from '@/services/api/query'
 import { commentIdsOptimisticEncoder } from '@/services/subsocial/commentIds/optimistic'
 import { getMyMainAddress, useMyMainAddress } from '@/stores/my-account'
 import { useSubscriptionState } from '@/stores/subscription'
 import { cx } from '@/utils/class-names'
+import { PostData } from '@subsocial/api/types'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
@@ -14,7 +16,13 @@ import {
   SubscribePostSubscription,
 } from '../generated-query'
 import { datahubSubscription, isDatahubAvailable } from '../utils'
-import { getPaginatedPostIdsByPostId, getPostMetadataQuery } from './query'
+import { lastSentMessageStorage } from './mutation'
+import {
+  getPaginatedPostIdsByPostId,
+  getPostMetadataQuery,
+  getTimeLeftUntilCanPostQuery,
+  getUnapprovedMemesCountQuery,
+} from './query'
 
 // Note: careful when using this in several places, if you have 2 places, the first one will be the one subscribing
 // the subscription will only be one, but if the first place is unmounted, it will unsubscribe, making all other places unsubscribed too
@@ -178,29 +186,72 @@ async function processMessage(
       queryClient,
       null
     )
-    if (isCurrentOwner && isCreationEvent) {
+    if (isCreationEvent && newPost) {
       if (newPost.struct.approvedInRootPost) {
-        toast.custom((t) => (
-          <Toast
-            icon={(className) => (
-              <span className={cx(className, 'text-base')}>✨</span>
-            )}
-            t={t}
-            title='Meme Sent!'
-            description={`${tokenomics.socialActionPrice.createCommentPoints} points have been used. More memes, more fun!`}
-          />
-        ))
+        if (isCurrentOwner) {
+          toast.custom((t) => (
+            <Toast
+              icon={(className) => (
+                <span className={cx(className, 'text-base')}>✨</span>
+              )}
+              t={t}
+              title='Meme Sent!'
+              description={`${tokenomics.socialActionPrice.createCommentPoints} points have been used. More memes, more fun!`}
+            />
+          ))
+        }
       } else {
-        toast.custom((t) => (
-          <Toast
-            t={t}
-            icon={(className) => (
-              <span className={cx(className, 'text-base')}>⏳</span>
-            )}
-            title='Your meme is under review'
-            description={`${tokenomics.socialActionPrice.createCommentPoints} points have been used. We got your meme! Hang tight while we give it a quick review.`}
-          />
-        ))
+        // to not wait for another query to run the other synchronous actions below
+        processUnapprovedMeme(newPost)
+        async function processUnapprovedMeme(newPost: PostData) {
+          if (newPost.struct.ownerId) {
+            const cachedCount = getUnapprovedMemesCountQuery.getQueryData(
+              queryClient,
+              newPost.struct.ownerId
+            )
+            if (typeof cachedCount === 'number') {
+              getUnapprovedMemesCountQuery.setQueryData(
+                queryClient,
+                newPost.struct.ownerId,
+                (count) => (count ?? 0) + 1
+              )
+            } else if (isCurrentOwner) {
+              await getUnapprovedMemesCountQuery.fetchQuery(
+                queryClient,
+                myAddress
+              )
+            }
+          }
+          if (isCurrentOwner) {
+            // reset timer because its unapproved meme
+            getTimeLeftUntilCanPostQuery.setQueryData(queryClient, myAddress, 0)
+            lastSentMessageStorage.remove()
+
+            const count = getUnapprovedMemesCountQuery.getQueryData(
+              queryClient,
+              myAddress
+            )
+            const remaining = Math.max(MIN_MEME_FOR_REVIEW - (count ?? 0), 0)
+            const title =
+              remaining > 0
+                ? `Your meme is under review (at least ${remaining} more memes required).`
+                : `Your meme is under review (${MIN_MEME_FOR_REVIEW} required memes submitted).`
+            const description =
+              remaining > 0
+                ? `${tokenomics.socialActionPrice.createCommentPoints} points have been used. We received your meme! Hang tight while we give it a quick review. But we need at least ${remaining} memes from you to start the process.`
+                : `${tokenomics.socialActionPrice.createCommentPoints} points have been used. We received your meme! Hang tight while we give it a quick review.`
+            toast.custom((t) => (
+              <Toast
+                t={t}
+                icon={(className) => (
+                  <span className={cx(className, 'text-base')}>⏳</span>
+                )}
+                title={title}
+                description={description}
+              />
+            ))
+          }
+        }
       }
     }
   }