diff --git a/src/components/chats/UnapprovedMemeCount.tsx b/src/components/chats/UnapprovedMemeCount.tsx new file mode 100644 index 000000000..86ef07b01 --- /dev/null +++ b/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 ( +
+ {(count ?? 0) >= 3 ? '✅' : '🚫'} {count ?? 0} +
+ ) +} diff --git a/src/components/extensions/common/CommonChatItem.tsx b/src/components/extensions/common/CommonChatItem.tsx index ea866f3b0..44fd9b201 100644 --- a/src/components/extensions/common/CommonChatItem.tsx +++ b/src/components/extensions/common/CommonChatItem.tsx @@ -5,6 +5,7 @@ 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' @@ -12,12 +13,12 @@ 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} > + {showApproveButton && inView && ( + + )} {/* */} {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 (