feat: add tabs to connect stats with leaderboard

src/components/leaderboard/GeneralLeaderboardPage.tsx

@@ -1,4 +1,4 @@
-import { Radio } from 'antd'
+import { Tabs } from 'antd'
 import clsx from 'clsx'
 import router from 'next/router'
 import { ReactNode } from 'react-markdown'
@@ -60,34 +60,17 @@ export default function GeneralLeaderboardPage({}: GeneralLeaderboardPageProps)
 
   return (
     <PageContent withLargerMaxWidth meta={{ title: 'Active Staking Dashboard' }}>
-      <div className={clsx(styles.Title)}>
-        <h1 className='DfUnboundedTitle ColorNormal mb-0 FontBig'>Active Staking Dashboard</h1>
-        <div className='d-flex align-items-center GapNormal justify-content-between'>
-          {myAddress && (
-            <div className='d-flex align-items-center GapTiny'>
-              <span className='FontSmall ColorMuted'>Mode:</span>
-
-              <Radio.Group
-                className='DfRadioGroup'
-                options={[
-                  { label: 'Staker', value: 'staker' },
-                  { label: 'Creator', value: 'creator' },
-                  { label: 'General', value: 'general' },
-                ]}
-                onChange={e => {
-                  const value = e.target.value
-                  if (value === 'general') {
-                    return
-                  }
-                  router.push(`/leaderboard/${myAddress}?tab=${value}`)
-                }}
-                value='general'
-                optionType='button'
-              />
-            </div>
-          )}
-        </div>
-      </div>
+      <Tabs
+        activeKey='general'
+        onChange={key => {
+          if (key === 'user') router.push(`/leaderboard/${myAddress}?tab=${key}`)
+          else if (key === 'stats') router.push('/stats')
+        }}
+      >
+        <Tabs.TabPane tab='My Staking Stats' key='user' />
+        <Tabs.TabPane tab='Global Staking Stats' key='general' />
+        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
+      </Tabs>
       {data && (
         <div className={clsx(styles.Statistics)}>
           <ProfileCard title='Total Activity' subtitle='this week' />

src/components/leaderboard/UserLeaderboardPage.tsx

@@ -1,12 +1,12 @@
-import { Button, Radio } from 'antd'
+import { Tabs } from 'antd'
 import clsx from 'clsx'
 import router, { useRouter } from 'next/router'
 import { useState } from 'react'
-import { RiHistoryFill } from 'react-icons/ri'
 import { ReactNode } from 'react-markdown'
 import { useFetchUserRewardHistory } from 'src/rtk/features/activeStaking/hooks'
 import { useFetchUserStatistics } from 'src/rtk/features/leaderboard/hooks'
 import { UserStatistics } from 'src/rtk/features/leaderboard/userStatisticsSlice'
+import { useMyAddress } from '../auth/MyAccountsContext'
 import { FormatBalance } from '../common/balances'
 import RewardHistoryModal, { RewardHistoryPanel } from '../creators/RewardHistoryModal'
 import { PageContent } from '../main/PageWrapper'
@@ -106,6 +106,8 @@ export type UserLeaderboardPageProps = {
   address: string
 }
 export default function UserLeaderboardPage({ address }: UserLeaderboardPageProps) {
+  const myAddress = useMyAddress()
+
   const { query } = useRouter()
   let tabState = query.tab as 'staker' | 'creator'
   if (tabState !== 'staker' && tabState !== 'creator') {
@@ -120,41 +122,17 @@ export default function UserLeaderboardPage({ address }: UserLeaderboardPageProp
 
   return (
     <PageContent withLargerMaxWidth meta={{ title: 'Active Staking Dashboard' }}>
-      <div className={clsx(styles.Title)}>
-        <h1 className='DfUnboundedTitle ColorNormal mb-0 FontBig'>Active Staking Dashboard</h1>
-        <div className='d-flex align-items-center GapNormal justify-content-between'>
-          <div className='d-flex align-items-center GapTiny'>
-            <span className='FontSmall ColorMuted'>Mode:</span>
-
-            <Radio.Group
-              className='DfRadioGroup'
-              options={[
-                { label: 'Staker', value: 'staker' },
-                { label: 'Creator', value: 'creator' },
-                { label: 'General', value: 'general' },
-              ]}
-              onChange={e => {
-                const value = e.target.value
-                if (value === 'general') {
-                  router.push('/leaderboard')
-                  return
-                }
-                router.push(`/leaderboard/${address}?tab=${value}`, undefined, { shallow: true })
-              }}
-              value={tabState}
-              optionType='button'
-            />
-          </div>
-          <Button
-            type='link'
-            className='d-flex align-items-center GapTiny lg-hidden'
-            onClick={() => setIsOpenHistoryModal(true)}
-          >
-            <RiHistoryFill />
-            <span className='FontSmall'>Rewards History</span>
-          </Button>
-        </div>
-      </div>
+      <Tabs
+        activeKey={address === myAddress ? 'user' : ''}
+        onChange={key => {
+          if (key === 'general') router.push('/leaderboard')
+          else if (key === 'stats') router.push('/stats')
+        }}
+      >
+        <Tabs.TabPane tab='My Staking Stats' key='user' />
+        <Tabs.TabPane tab='Global Staking Stats' key='general' />
+        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
+      </Tabs>
       {data && (
         <div className={clsx(styles.Statistics)}>
           <ProfileCard

src/components/statistics/ChartModal.tsx

@@ -3,8 +3,9 @@ import { Divider } from 'antd'
 import Modal from 'antd/lib/modal'
 import clsx from 'clsx'
 import messages from 'src/messages'
-import { periodOpt, StatisticsDataType } from './Statistics'
+import { StatisticsDataType } from './Statistics'
 import styles from './Statistics.module.sass'
+import { periodOpt } from './StatisticsPage'
 
 type ModalProps = {
   open: boolean

src/components/statistics/Statistics.module.sass

@@ -8,8 +8,9 @@
     border-color: $color_link
 
 .DfGridParams
-  row-gap: .5rem
-  column-gap: 0.5rem
+  display: grid
+  grid-template-columns: 1fr 1fr
+  gap: $space_normal
   justify-content: space-between
 
 .DfNavButtonCol
@@ -20,16 +21,13 @@
 @media ( max-width: 755px)
   .DfGridParams
     justify-content: center
+    grid-template-columns: 1fr
 
   .DfNavButtonCol
     width: 94%
     margin-top: $space_normal
     justify-content: space-around
 
-.DfColStatistics
-  width: 21.75rem
-  margin-bottom: $space_normal
-
 .DfFullSize
   width: 712px
   margin-bottom: $space_normal

src/components/statistics/Statistics.tsx

@@ -1,15 +1,11 @@
-import { AppstoreOutlined, MenuOutlined } from '@ant-design/icons'
-import { Col, Radio, Row } from 'antd'
+import { Col, Row } from 'antd'
 import dayjs from 'dayjs'
 import { useEffect, useMemo, useState } from 'react'
 import { useGetActivityCountStat } from 'src/graphql/hooks'
 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'
 import GraphModal from './ChartModal'
 import style from './Statistics.module.sass'
@@ -33,16 +29,10 @@ export const eventArr = [
   'AccountFollowed',
 ]
 
-export const periodOpt = [
-  { label: 'Last 7 days', value: '7' },
-  { label: 'Last month', value: '30' },
-  { label: 'Last 3 months', value: '90' },
-]
-
-const tailsViewOpt = [
-  { label: <AppstoreOutlined />, value: 'block' },
-  { label: <MenuOutlined />, value: 'inline' },
-]
+// const tailsViewOpt = [
+//   { label: <AppstoreOutlined />, value: 'block' },
+//   { label: <MenuOutlined />, value: 'inline' },
+// ]
 
 type StatsType = {
   format_date: string
@@ -70,13 +60,13 @@ export type StatType = {
   statisticsData: StatsType[]
 }
 
-type FormProps = {
+export type StatisticsProps = {
   statisticsData?: StatisticsDataType[]
   tilesView?: string
   period?: string
 }
 
-export function InnerStatistics(props: FormProps) {
+export function InnerStatistics(props: StatisticsProps) {
   const [modalData, setModalData] = useState<StatisticsDataType>()
   const [openModal, setOpenModal] = useState<boolean>(false)
 
@@ -132,15 +122,15 @@ const AFTER_PARACHAIN_MIGRATION_DATE = new Date(2022, 8, 1)
 const MAX_DAY_DIFF = dayjs(new Date()).diff(AFTER_PARACHAIN_MIGRATION_DATE, 'days')
 
 const cachedData: Record<number, StatType[]> = {}
-export function Statistics(props: FormProps) {
+export default function Statistics({ period, ...props }: StatisticsProps & { period: string }) {
   const address = useMyAddress()
   const getActivityCountStat = useGetActivityCountStat()
 
   const [data, setData] = useState<StatType[]>()
   const [isLoaded, setIsLoaded] = useState(false)
-  const [period, setPeriod] = useState<string>('30')
-  const [tilesView, setTilesView] = useState<string>('block')
-  const { isMobile } = useResponsiveSize()
+  const tilesView = 'block'
+  // const [tilesView, setTilesView] = useState<string>('block')
+  // const { isMobile } = useResponsiveSize()
 
   let constrainedPeriod = parseInt(period)
   if (constrainedPeriod > MAX_DAY_DIFF) constrainedPeriod = MAX_DAY_DIFF
@@ -151,13 +141,9 @@ export function Statistics(props: FormProps) {
     return getDatesBetweenDates(startDate, currentDate)
   }, [period])
 
-  const onRadioChange = (e: any) => {
-    setPeriod(e.target.value)
-  }
-
-  const onRadioTilesChange = (e: any) => {
-    setTilesView(e.target.value)
-  }
+  // const onRadioTilesChange = (e: any) => {
+  //   setTilesView(e.target.value)
+  // }
 
   useEffect(() => {
     let isMounted = true
@@ -199,42 +185,15 @@ export function Statistics(props: FormProps) {
     }
   }, [address, period])
 
-  return (
-    <PageContent meta={{ title: 'Statistics' }}>
-      <Section title='Statistics'>
-        <Row className={`${style.DfGridParams} my-3`}>
-          <Col>
-            <Radio.Group
-              options={periodOpt}
-              onChange={onRadioChange}
-              value={period}
-              optionType={'button'}
-            />
-          </Col>
-          {!isMobile && (
-            <Col className={style.DfNavButtonCol}>
-              <Radio.Group
-                options={tailsViewOpt}
-                onChange={onRadioTilesChange}
-                value={tilesView}
-                optionType={'button'}
-                className={style.DfTilesView}
-              />
-            </Col>
-          )}
-        </Row>
-        {isLoaded ? (
-          <InnerStatistics
-            statisticsData={parseData(constrainedPeriod.toString(), dates, data)}
-            tilesView={tilesView}
-            period={period}
-            {...props}
-          />
-        ) : (
-          <Loading />
-        )}
-      </Section>
-    </PageContent>
+  return isLoaded ? (
+    <InnerStatistics
+      statisticsData={parseData(constrainedPeriod.toString(), dates, data)}
+      tilesView={tilesView}
+      period={period}
+      {...props}
+    />
+  ) : (
+    <Loading />
   )
 }
 
@@ -311,5 +270,3 @@ const parseData = (period: string, dates: string[], statData: StatType[] | undef
 
   return statisticsDataArr
 }
-
-export default InnerStatistics

src/components/statistics/StatisticsPage.tsx

@@ -0,0 +1,63 @@
+import { Col, Radio, Row, Tabs } from 'antd'
+import dynamic from 'next/dynamic'
+import router from 'next/router'
+import { useState } from 'react'
+import { useMyAddress } from '../auth/MyAccountsContext'
+import { PageContent } from '../main/PageWrapper'
+import { StatisticsProps } from './Statistics'
+import style from './Statistics.module.sass'
+
+export const periodOpt = [
+  { label: 'Last 7 days', value: '7' },
+  { label: 'Last month', value: '30' },
+  { label: 'Last 3 months', value: '90' },
+]
+
+const Statistics = dynamic(() => import('./Statistics'), { ssr: false })
+
+export default function StatisticsPage(props: StatisticsProps) {
+  const myAddress = useMyAddress()
+  const [period, setPeriod] = useState<string>('30')
+
+  const onRadioChange = (e: any) => {
+    setPeriod(e.target.value)
+  }
+
+  return (
+    <PageContent meta={{ title: 'Statistics' }} withLargerMaxWidth>
+      <Tabs
+        activeKey='stats'
+        onChange={key => {
+          if (key === 'general') router.push('/leaderboard')
+          else if (key === 'user') router.push(`/leaderboard/${myAddress}?tab=staker`)
+        }}
+      >
+        <Tabs.TabPane tab='My Staking Stats' key='user' />
+        <Tabs.TabPane tab='Global Staking Stats' key='general' />
+        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
+      </Tabs>
+      <Row className={`${style.DfGridParams} my-3`}>
+        <Col>
+          <Radio.Group
+            options={periodOpt}
+            onChange={onRadioChange}
+            value={period}
+            optionType={'button'}
+          />
+        </Col>
+        {/* {!isMobile && (
+          <Col className={style.DfNavButtonCol}>
+            <Radio.Group
+              options={tailsViewOpt}
+              onChange={onRadioTilesChange}
+              value={tilesView}
+              optionType={'button'}
+              className={style.DfTilesView}
+            />
+          </Col>
+        )} */}
+      </Row>
+      <Statistics period={period} {...props} />
+    </PageContent>
+  )
+}

src/pages/stats.tsx

@@ -1,8 +1,4 @@
-import dynamic from 'next/dynamic'
-const Statistics = dynamic(
-  () => import('../components/statistics/Statistics').then((mod: any) => mod.Statistics),
-  { ssr: false },
-)
+import StatisticsPage from 'src/components/statistics/StatisticsPage'
 
-export const page = () => <Statistics />
+export const page = () => <StatisticsPage />
 export default page