Finish profile detail modal

src/components/chats/ChatItem/profilePosts/ProfileDetailModal.tsx

@@ -0,0 +1,60 @@
+import MenuList from '@/components/MenuList'
+import ProfilePreview from '@/components/ProfilePreview'
+import { Skeleton } from '@/components/SkeletonFallback'
+import Modal, { ModalFunctionalityProps } from '@/components/modals/Modal'
+import useIsModerationAdmin from '@/hooks/useIsModerationAdmin'
+import useTgLink from '@/hooks/useTgLink'
+import { getUserReferralsQuery } from '@/services/datahub/leaderboard/query'
+import { formatNumber } from '@/utils/strings'
+import { FaPaperPlane } from 'react-icons/fa6'
+
+export default function ProfileDetailModal({
+  address,
+  ...props
+}: ModalFunctionalityProps & { address: string }) {
+  const { telegramLink, isLoading } = useTgLink(address)
+  const { data: referralData } = getUserReferralsQuery.useQuery(address || '')
+  const isAdmin = useIsModerationAdmin()
+  if (!isAdmin) return null
+
+  return (
+    <Modal {...props} title='Profile' withCloseButton>
+      <div className='flex flex-col gap-3 border-b border-b-border-gray pb-4'>
+        <ProfilePreview asLink address={address} />
+        <div className='grid grid-cols-1'>
+          <div className='grid grid-cols-[max-content_1fr] gap-2'>
+            <span className='text-text-muted'>Referrals Count</span>
+            <span>
+              <span className='text-text-muted'>: </span>
+              {referralData ? (
+                formatNumber(referralData.refCount)
+              ) : (
+                <Skeleton />
+              )}
+            </span>
+            <span className='text-text-muted'>Points from Referral</span>
+            <span>
+              <span className='text-text-muted'>: </span>
+              {referralData ? (
+                formatNumber(referralData.pointsEarned)
+              ) : (
+                <Skeleton />
+              )}
+            </span>
+          </div>
+        </div>
+      </div>
+      <MenuList
+        className='-mx-3 -mb-5 w-[calc(100%_+_1.5rem)] px-0'
+        menus={[
+          {
+            text: 'Message User',
+            icon: FaPaperPlane,
+            href: telegramLink,
+            disabled: isLoading,
+          },
+        ]}
+      />
+    </Modal>
+  )
+}

src/components/chats/ChatItem/profilePosts/ProfileProstsListModal.tsx

@@ -1,10 +1,13 @@
 import AddressAvatar from '@/components/AddressAvatar'
 import Button from '@/components/Button'
 import Name from '@/components/Name'
+import SkeletonFallback from '@/components/SkeletonFallback'
 import { env } from '@/env.mjs'
 import useAuthorizedForModeration from '@/hooks/useAuthorizedForModeration'
+import useIsModerationAdmin from '@/hooks/useIsModerationAdmin'
 import { TabButton } from '@/modules/chat/HomePage/ChatTabs'
 import { getModerationReasonsQuery } from '@/services/datahub/moderation/query'
+import { getUserPostedMemesForCountQuery } from '@/services/datahub/posts/query'
 import { getPaginatedPostIdsByPostIdAndAccount } from '@/services/datahub/posts/queryByAccount'
 import { useSendEvent } from '@/stores/analytics'
 import { useProfilePostsModal } from '@/stores/profile-posts-modal'
@@ -13,9 +16,13 @@ import { Transition } from '@headlessui/react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { HiOutlineChevronLeft } from 'react-icons/hi2'
-import SkeletonFallback from '../../../SkeletonFallback'
+import {
+  HiOutlineChevronLeft,
+  HiOutlineInformationCircle,
+} from 'react-icons/hi2'
+import UnapprovedMemeCount from '../../UnapprovedMemeCount'
 import { useModerateWithSuccessToast } from '../ChatItemMenus'
+import ProfileDetailModal from './ProfileDetailModal'
 import ProfilePostsList from './ProfilePostsList'
 
 type Tab = 'all' | 'contest'
@@ -33,6 +40,7 @@ const chatIdByTab = {
 }
 
 const ProfilePostsListModal = ({ tabsConfig }: ProfilePostsListModalProps) => {
+  const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedTab, setSelectedTab] = useState<Tab>(
     tabsConfig?.defaultTab || 'all'
   )
@@ -51,16 +59,24 @@ const ProfilePostsListModal = ({ tabsConfig }: ProfilePostsListModalProps) => {
 
   const { mutate: moderate } = useModerateWithSuccessToast(messageId, chatId)
   const sendEvent = useSendEvent()
+  const isAdmin = useIsModerationAdmin()
   const { isAuthorized } = useAuthorizedForModeration(chatId)
-
-  const { data: reasons } = getModerationReasonsQuery.useQuery(null)
-  const firstReasonId = reasons?.[0].id
+  const { data: userPostedMemes, isLoading: loadingMemes } =
+    getUserPostedMemesForCountQuery.useQuery(
+      {
+        address,
+        chatId,
+      },
+      { enabled: isOpen }
+    )
 
   const { data, isLoading } =
     getPaginatedPostIdsByPostIdAndAccount.useInfiniteQuery(chatId, address)
-
   const totalPostsCount = data?.pages[0].totalData || 0
 
+  const { data: reasons } = getModerationReasonsQuery.useQuery(null)
+  const firstReasonId = reasons?.[0].id
+
   const onBlockUserClick = () => {
     sendEvent('block_user', { hubId, chatId })
     moderate({
@@ -102,8 +118,13 @@ const ProfilePostsListModal = ({ tabsConfig }: ProfilePostsListModalProps) => {
         leaveFrom='h-auto'
         leaveTo='opacity-0 -translate-y-24 !duration-150'
       >
+        <ProfileDetailModal
+          isOpen={isOpenDetail}
+          closeModal={() => setIsOpenDetail(false)}
+          address={address}
+        />
         <div className='mx-auto flex w-full max-w-screen-md flex-1 flex-col overflow-auto'>
-          <div className='relative mx-auto flex w-full items-center justify-between gap-2 px-4 py-4'>
+          <div className='relative mx-auto flex w-full items-center justify-between gap-2 px-4 py-3'>
             <div className='flex flex-1 items-center gap-2'>
               <Button
                 variant='transparent'
@@ -122,29 +143,51 @@ const ProfilePostsListModal = ({ tabsConfig }: ProfilePostsListModalProps) => {
                 address={address}
                 className='flex-shrink-0 cursor-pointer'
               />
-              <div className='flex flex-col gap-1'>
+              <div
+                className='flex flex-col gap-0.5'
+                onClick={() => {
+                  if (isAdmin) setIsOpenDetail(true)
+                }}
+              >
                 <Name address={address} className='!text-text' clipText />
-                <span className='flex items-center gap-1 text-xs font-medium leading-[normal] text-slate-400'>
-                  <span>Memes:</span>
-                  <SkeletonFallback
-                    isLoading={isLoading}
-                    className='my-0 w-fit min-w-8'
-                  >
-                    {totalPostsCount}
-                  </SkeletonFallback>
-                </span>
+                {isAdmin ? (
+                  <UnapprovedMemeCount
+                    className='bg-transparent p-0 text-text-muted'
+                    address={address}
+                    chatId={chatId}
+                  />
+                ) : (
+                  <span className='flex items-center gap-1 text-xs font-medium leading-[normal] text-slate-400'>
+                    <span>Memes:</span>
+                    <SkeletonFallback
+                      isLoading={isLoading}
+                      className='my-0 w-fit min-w-8'
+                    >
+                      {totalPostsCount}
+                    </SkeletonFallback>
+                  </span>
+                )}
               </div>
             </div>
 
             {isAuthorized && (
-              <Button
-                size='md'
-                variant='redOutline'
-                className='w-fit text-red-400'
-                onClick={onBlockUserClick}
-              >
-                Block user
-              </Button>
+              <div className='flex items-center gap-2'>
+                <Button
+                  size='circleSm'
+                  variant='transparent'
+                  onClick={() => setIsOpenDetail(true)}
+                >
+                  <HiOutlineInformationCircle className='text-lg text-text-muted' />
+                </Button>
+                <Button
+                  size='md'
+                  variant='redOutline'
+                  className='w-fit text-red-400'
+                  onClick={onBlockUserClick}
+                >
+                  Block user
+                </Button>
+              </div>
             )}
           </div>
           <div className='relative mx-auto flex h-full max-h-full min-h-[400px] w-full flex-col items-center px-4'>

src/modules/chat/HomePage/ChatContent.tsx

@@ -46,6 +46,7 @@ const chatIdsBasedOnSelectedTab = {
 
 export default function ChatContent({ className }: Props) {
   const { query } = useRouter()
+  const isAdmin = useIsModerationAdmin()
   let [selectedTab, setSelectedTab] = useLocalStorage<TabState>(
     'memes-tab',
     'all'
@@ -58,6 +59,12 @@ export default function ChatContent({ className }: Props) {
   } else if (selectedTab === 'not-approved-contest' && getIsContestEnded()) {
     selectedTab = 'not-approved'
   }
+  if (
+    !isAdmin &&
+    (selectedTab === 'not-approved' || selectedTab === 'not-approved-contest')
+  ) {
+    setSelectedTab('all')
+  }
 
   useLayoutEffect(() => {
     if (query.tab === 'contest') {
@@ -69,7 +76,6 @@ export default function ChatContent({ className }: Props) {
     }
   }, [query.tab, setSelectedTab])
 
-  const isAdmin = useIsModerationAdmin()
   const [isOpenRules, setIsOpenRules] = useState(false)
   const { data: serverTime } = getServerTimeQuery.useQuery(null)
   const isContestEnded =