Update like intro modal

dappforce · Jul 11, 2024 · 882089e · 882089e
1 parent 0c2e228
commit 882089e
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 60 deletions.
diff --git a/src/components/content-staking/SuperLike.tsx b/src/components/content-staking/SuperLike.tsx
@@ -179,36 +179,22 @@ export default function SuperLike({
       }) => {
         if (superLikeCount <= 0 && !showWhenZero) return null
         const button = (
-          // To make the post reward stat not jumping when its liked, maybe its a mac issue
-          <div className='min-w-[3.25rem]'>
-            <button
-              onClick={() => {
-                sendEventWithRef(myAddress ?? '', (refId) => {
-                  sendEvent(
-                    'click_superlike',
-                    { eventSource: 'message', postId },
-                    { ref: refId }
-                  )
-                })
-                handleClick()
-              }}
-              disabled={isDisabled}
-              className={cx(
-                // identifier for toggle chat menu checker in ChatItemMenus
-                'superlike',
-                'flex cursor-pointer items-center gap-2 rounded-full border border-transparent bg-[#EFF4FA] px-2 py-0.5 text-text-muted transition dark:bg-background-lighter',
-                'enabled:hover:border-[#7779F3] enabled:focus-visible:border-[#7779F3]',
-                'disabled:!opacity-50',
-                isMyMessage &&
-                  'dark:disabled:!bg-black/20 dark:disabled:!text-white/50',
-                hasILiked &&
-                  '!bg-gradient-to-r from-[#8B55FD] to-[#7493FC] !text-white'
-              )}
-            >
-              <Image src={Thumbsup} alt='' className='h-4 w-auto' />
-              <span className='relative -top-px'>{superLikeCount}</span>
-            </button>
-          </div>
+          <SuperLikeButton
+            superLikeCount={superLikeCount}
+            isMyMessage={isMyMessage}
+            hasILiked={hasILiked}
+            onClick={() => {
+              sendEventWithRef(myAddress ?? '', (refId) => {
+                sendEvent(
+                  'click_superlike',
+                  { eventSource: 'message', postId },
+                  { ref: refId }
+                )
+              })
+              handleClick()
+            }}
+            disabled={isDisabled}
+          />
         )
         return (
           <div
@@ -255,3 +241,39 @@ function useClientValidationOfPostSuperLike(createdAtTime: number) {
     dayjs(serverTime).diff(dayjs(createdAtTime), 'day') > 7
   return { canBeLiked: !isPostMadeMoreThan1WeekAgo, isLoading }
 }
+
+export type SuperLikeButtonProps = ComponentProps<'button'> & {
+  superLikeCount: number
+  isMyMessage?: boolean
+  hasILiked?: boolean
+}
+export function SuperLikeButton({
+  superLikeCount,
+  isMyMessage,
+  hasILiked,
+  ...props
+}: SuperLikeButtonProps) {
+  return (
+    // To make the post reward stat not jumping when its liked, maybe its a mac issue
+    <div className='min-w-[3.25rem]'>
+      <button
+        {...props}
+        className={cx(
+          // identifier for toggle chat menu checker in ChatItemMenus
+          'superlike',
+          'flex cursor-pointer items-center gap-2 rounded-full border border-transparent bg-[#EFF4FA] px-2 py-0.5 text-text-muted transition dark:bg-background-lighter',
+          'enabled:hover:border-[#7779F3] enabled:focus-visible:border-[#7779F3]',
+          'disabled:!opacity-50',
+          isMyMessage &&
+            'dark:disabled:!bg-black/20 dark:disabled:!text-white/50',
+          hasILiked &&
+            '!bg-gradient-to-r from-[#8B55FD] to-[#7493FC] !text-white',
+          props.className
+        )}
+      >
+        <Image src={Thumbsup} alt='' className='h-4 w-auto' />
+        <span className='relative -top-px'>{superLikeCount}</span>
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/extensions/common/CommonChatItem.tsx b/src/components/extensions/common/CommonChatItem.tsx
@@ -7,7 +7,9 @@ import MessageStatusIndicator from '@/components/chats/ChatItem/MessageStatusInd
 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 SuperLike, {
+  SuperLikeButton,
+} from '@/components/content-staking/SuperLike'
 import useAuthorizedForModeration from '@/hooks/useAuthorizedForModeration'
 import useIsMessageBlocked from '@/hooks/useIsMessageBlocked'
 import { getSuperLikeCountQuery } from '@/services/datahub/content-staking/query'
@@ -42,7 +44,7 @@ type CommonChatItemProps = ExtensionChatItemProps & {
   othersMessage?: OthersMessageConfig
   className?: string
   textColor?: string
-  bg?: 'background' | 'background-light'
+  bg?: 'background' | 'background-light' | 'background-lighter'
   showSuperLikeWhenZero?: boolean
   enableProfileModal?: boolean
 }
@@ -70,6 +72,7 @@ export default function CommonChatItem({
   hubId,
   bg = 'background',
   showApproveButton,
+  dummySuperLike,
 }: CommonChatItemProps) {
   const { inView, ref } = useInView()
   const myAddress = useMyMainAddress()
@@ -194,7 +197,9 @@ export default function CommonChatItem({
             ? 'bg-background-primary-light text-text dark:bg-background-primary/70 dark:text-text-on-primary'
             : bg === 'background'
             ? 'bg-background'
-            : 'bg-background-light',
+            : bg === 'background-light'
+            ? 'bg-background-light'
+            : 'bg-background-lighter',
           className
         )}
       >
@@ -328,7 +333,15 @@ export default function CommonChatItem({
           myMessageConfig.children === 'bottom' &&
           childrenElement}
 
-        {showApproveButton ? (
+        {dummySuperLike ? (
+          <SuperLikeButton
+            {...dummySuperLike}
+            className={cx(
+              'mb-1.5 ml-2.5 mt-1 self-start dark:bg-background-lightest',
+              dummySuperLike.className
+            )}
+          />
+        ) : showApproveButton ? (
           <div className='pt-1' />
         ) : message.struct.approvedInRootPost ? (
           <SuperLike

diff --git a/src/components/extensions/image/ImageChatItem.tsx b/src/components/extensions/image/ImageChatItem.tsx
@@ -21,7 +21,7 @@ export default function ImageChatItem(props: ExtensionChatItemProps) {
       showSuperLikeWhenZero
       othersMessage={{ children: 'middle', checkMark: 'bottom' }}
       myMessageConfig={{ children: 'middle', checkMark: 'adaptive-inside' }}
-      className='max-w-xs'
+      className={cx('max-w-xs', props.className)}
     >
       {({ isMyMessage }) => (
         <div className={cx('flex flex-col', !isMyMessage && 'mt-1')}>

diff --git a/src/components/extensions/types.ts b/src/components/extensions/types.ts
@@ -1,5 +1,6 @@
 import { PostContent, PostData } from '@subsocial/api/types'
 import { ComponentType } from 'react'
+import { SuperLikeButtonProps } from '../content-staking/SuperLike'
 
 export type ExtensionChatItemProps = {
   message: PostData
@@ -8,8 +9,10 @@ export type ExtensionChatItemProps = {
   chatId: string
   hubId: string
   enableProfileModal?: boolean
-  bg?: 'background' | 'background-light'
+  bg?: 'background' | 'background-light' | 'background-lighter'
   showApproveButton?: boolean
+  className?: string
+  dummySuperLike?: SuperLikeButtonProps
 }
 
 export type RepliedMessagePreviewPartProps = {