Merge Super Likes Stats with Old Likes

src/components/creators/cards/CreatorInfoCard.tsx

@@ -62,7 +62,11 @@ export default function CreatorInfoCard({ space, showStakeButton = true }: Creat
           />
         </div>
       </div>
-      <CollapsibleParagraph className='FontSmall mb-2' text={space.content?.about ?? ''} />
+      <CollapsibleParagraph
+        className='FontSmall mb-2'
+        text={space.content?.about ?? ''}
+        limit={120}
+      />
       {!stakeData?.hasStaked ? (
         (shouldShowFollowButton || shouldShowStakeButton) && (
           <div className={clsx('GapSmall d-flex flex-column mt-2')}>

src/components/posts/view-post/helpers.tsx

@@ -327,7 +327,7 @@ export const PostActionsPanel: FC<PostActionsPanelProps> = props => {
         <SuperLike post={struct} />
         {preview && <CommentAction {...props} />}
       </div>
-      <PostRewardStat postId={postDetails.id} style={{ alignSelf: 'end' }} />
+      <PostRewardStat postId={postDetails.id} />
       {/* <ShareDropdown postDetails={postDetails} space={space} className='DfAction' /> */}
     </div>
   )

src/components/statistics/Statistics.tsx

@@ -8,6 +8,7 @@ import messages from 'src/messages'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { PageContent } from '../main/PageWrapper'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
+import { getSuperLikesStats, SuperLikesStat } from '../utils/datahub/active-staking'
 import { Loading } from '../utils/index'
 import Section from '../utils/Section'
 import { Stats } from '../utils/Stats'
@@ -26,10 +27,10 @@ export type ActivityEvent =
 export const eventArr = [
   'PostReactionCreated,CommentReactionCreated',
   'PostCreated',
+  'CommentCreated,CommentReplyCreated',
   'SpaceCreated',
   'SpaceFollowed',
-  'PostShared,CommentShared',
-  'CommentCreated,CommentReplyCreated',
+  // 'PostShared,CommentShared',
   'AccountFollowed',
 ]
 
@@ -165,12 +166,20 @@ export function Statistics(props: FormProps) {
     const load = async () => {
       setIsLoaded(false)
 
-      const statisticsDataArr = await Promise.all(
+      const statisticsDataArrPromise = Promise.all(
         eventArr.map(async eventName => {
           const event = eventName as ActivityEvent
           return getActivityCountStat({ event, period: constrainedPeriod })
         }),
       )
+      const superLikeDataPromise = getSuperLikesStats(constrainedPeriod)
+
+      const [statisticsDataArr, superLikeData] = await Promise.all([
+        statisticsDataArrPromise,
+        superLikeDataPromise,
+      ] as const)
+
+      combineOldLikesAndSuperLikes(statisticsDataArr, superLikeData)
 
       if (isMounted) {
         setData(statisticsDataArr)
@@ -224,6 +233,39 @@ export function Statistics(props: FormProps) {
   )
 }
 
+function combineOldLikesAndSuperLikes(
+  stats: StatType[],
+  superLikesStats: SuperLikesStat,
+): StatType[] {
+  const likesStat = stats.find(
+    stat => stat.activityType === 'PostReactionCreated,CommentReactionCreated',
+  )
+  if (!likesStat) return stats
+
+  const totalSuperLikes = superLikesStats.data.reduce((acc, stat) => acc + stat.count, 0)
+  likesStat.totalCount += superLikesStats.total
+  likesStat.countByPeriod += totalSuperLikes
+  likesStat.todayCount = superLikesStats.data[superLikesStats.data.length - 1].count
+
+  const allLikesMap = new Map<string, StatsType>()
+  likesStat.statisticsData.forEach(stat => allLikesMap.set(stat.format_date, stat))
+
+  superLikesStats.data.forEach(stat => {
+    const dateFormat = dayjs(stat.dayUnixTimestamp * 1000).format('YYYY-MM-DD')
+    const existingStat = allLikesMap.get(dateFormat)
+    if (existingStat) {
+      existingStat.count += stat.count
+    } else {
+      likesStat.statisticsData.push({ count: stat.count, format_date: dateFormat })
+    }
+  })
+
+  likesStat.statisticsData.sort((a, b) => {
+    return dayjs(a.format_date).unix() - dayjs(b.format_date).unix()
+  })
+  return stats
+}
+
 const getDatesBetweenDates = (startDate: Date, endDate: Date) => {
   let dates: string[] = []
   const theDate = new Date(startDate)

src/components/utils/CollapsibleParagraph/CollapsibleParagraph.tsx

@@ -7,9 +7,10 @@ import styles from './CollapsibleParagraph.module.sass'
 
 export type CollapsibleParagraphProps = ComponentProps<'span'> & {
   text: string
+  limit?: number
 }
 
-export default function CollapsibleParagraph({ text, ...props }: CollapsibleParagraphProps) {
+export default function CollapsibleParagraph({ text, limit, ...props }: CollapsibleParagraphProps) {
   const [collapseAbout, setCollapseAbout] = useState(true)
   const summarized = useMemo(() => summarizeMd(text), [text])
 
@@ -31,6 +32,7 @@ export default function CollapsibleParagraph({ text, ...props }: CollapsiblePara
       ) : (
         <SummarizeMd
           omitDefaultClassName
+          limit={limit}
           content={summarized}
           more={
             <span className='DfBlackLink font-weight-semibold' onClick={onToggleShow}>

src/components/utils/datahub/active-staking.ts

@@ -278,6 +278,44 @@ export async function getRewardHistory(address: string): Promise<RewardHistory>
   }
 }
 
+const GET_SUPER_LIKES_STATS = gql`
+  query GetSuperLikesStats($from: String!, $to: String!) {
+    activeStakingSuperLikeCountsByDate(args: { fromDate: $from, toDate: $to, total: true }) {
+      byDate {
+        count
+        dayUnixTimestamp
+      }
+      total
+    }
+  }
+`
+export type SuperLikesStat = { total: number; data: { count: number; dayUnixTimestamp: number }[] }
+export async function getSuperLikesStats(period: number): Promise<SuperLikesStat> {
+  const { day: currentTimestamp } = getDayAndWeekTimestamp()
+  const currentMinusPeriod = dayjs().subtract(period, 'day').toDate()
+  const { day: startTimestamp } = getDayAndWeekTimestamp(currentMinusPeriod)
+  const res = await datahubQueryRequest<
+    {
+      activeStakingSuperLikeCountsByDate: {
+        byDate: {
+          count: number
+          dayUnixTimestamp: number
+        }[]
+        total: number
+      }
+    },
+    { from: string; to: string }
+  >({
+    document: GET_SUPER_LIKES_STATS,
+    variables: { from: startTimestamp.toString(), to: currentTimestamp.toString() },
+  })
+
+  return {
+    data: res.activeStakingSuperLikeCountsByDate.byDate,
+    total: res.activeStakingSuperLikeCountsByDate.total,
+  }
+}
+
 // MUTATIONS
 export async function createSuperLike(
   params: DatahubParams<SocialCallDataArgs<'synth_active_staking_create_super_like'>>,

src/layout/SideMenuItems.tsx

@@ -3,6 +3,7 @@ import {
   BugOutlined,
   BulbOutlined,
   GlobalOutlined,
+  LineChartOutlined,
   // LineChartOutlined,
   LinkOutlined,
   NotificationOutlined,
@@ -55,11 +56,11 @@ export const DefaultMenu: MenuItem[] = [
   //   page: [ polkaStatsUrl ],
   //   icon: <BlockOutlined />,
   // },
-  // {
-  //   name: 'Statistics',
-  //   page: ['/stats'],
-  //   icon: <LineChartOutlined />,
-  // },
+  {
+    name: 'Statistics',
+    page: ['/stats'],
+    icon: <LineChartOutlined />,
+  },
   Divider,
   {
     name: config.appName,