feat: add mobile version of tab

dappforce · Jan 24, 2024 · 20163fc · 20163fc
1 parent c84a313
commit 20163fc
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 45 deletions.
diff --git a/src/components/creators/TopUsersCard.tsx b/src/components/creators/TopUsersCard.tsx
@@ -21,8 +21,6 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
   const { data, loading } = useFetchTopUsers()
   const isMobile = useIsMobileWidthOrDevice()
 
-  console.log(data)
-
   const args = useMemo(
     () => ({
       ids: [...(data?.stakers ?? []), ...(data?.creators ?? [])].map(({ address }) => address),

diff --git a/src/components/leaderboard/GeneralLeaderboardPage.tsx b/src/components/leaderboard/GeneralLeaderboardPage.tsx
@@ -1,15 +1,13 @@
-import { Tabs } from 'antd'
 import clsx from 'clsx'
-import router from 'next/router'
 import { ReactNode } from 'react-markdown'
 import { GeneralStatistics } from 'src/rtk/features/leaderboard/generalStatisticsSlice'
 import { useFetchGeneralStatistics } from 'src/rtk/features/leaderboard/hooks'
-import { useMyAddress } from '../auth/MyAccountsContext'
 import { FormatBalance } from '../common/balances'
 import { PageContent } from '../main/PageWrapper'
 import DfCard from '../utils/cards/DfCard'
 import { MutedSpan } from '../utils/MutedText'
 import LeaderboardTable from './common/LeaderboardTable'
+import LeaderboardTabs from './common/LeaderboardTabs'
 import ProfileCard from './common/ProfileCard'
 import StatisticCard from './common/StatisticCard'
 import styles from './GeneralLeaderboardPage.module.sass'
@@ -57,21 +55,10 @@ const stats: Stat[] = [
 export type GeneralLeaderboardPageProps = {}
 export default function GeneralLeaderboardPage({}: GeneralLeaderboardPageProps) {
   const { data } = useFetchGeneralStatistics()
-  const myAddress = useMyAddress()
 
   return (
     <PageContent withLargerMaxWidth meta={{ title: 'Active Staking Dashboard' }}>
-      <Tabs
-        activeKey='general'
-        onChange={key => {
-          if (key === 'user') router.push(`/leaderboard/${myAddress}?role=staker`)
-          else if (key === 'stats') router.push('/stats')
-        }}
-      >
-        {myAddress && <Tabs.TabPane tab='My Staking Stats' key='user' />}
-        <Tabs.TabPane tab='Global Staking Stats' key='general' />
-        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
-      </Tabs>
+      <LeaderboardTabs activeKey='general' />
       {data && (
         <div className={clsx(styles.Statistics)}>
           <ProfileCard

diff --git a/src/components/leaderboard/UserLeaderboardPage.tsx b/src/components/leaderboard/UserLeaderboardPage.tsx
@@ -1,4 +1,4 @@
-import { Radio, Tabs } from 'antd'
+import { Radio } from 'antd'
 import clsx from 'clsx'
 import router, { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -14,6 +14,7 @@ import { useIsMobileWidthOrDevice } from '../responsive'
 import DfCard from '../utils/cards/DfCard'
 import { MutedSpan } from '../utils/MutedText'
 import LeaderboardTable from './common/LeaderboardTable'
+import LeaderboardTabs from './common/LeaderboardTabs'
 import ProfileCard from './common/ProfileCard'
 import StatisticCard from './common/StatisticCard'
 import styles from './UserLeaderboardPage.module.sass'
@@ -151,18 +152,7 @@ export default function UserLeaderboardPage({ address }: UserLeaderboardPageProp
 
   return (
     <PageContent withLargerMaxWidth meta={{ title: 'Active Staking Dashboard' }}>
-      <Tabs
-        activeKey={isMyAddress ? 'user' : ''}
-        onChange={key => {
-          if (key === 'general') router.push('/leaderboard')
-          else if (key === 'stats') router.push('/stats')
-          else router.push(`/leaderboard/${myAddress}?role=${tabState}`)
-        }}
-      >
-        {myAddress && <Tabs.TabPane tab='My Staking Stats' key='user' />}
-        <Tabs.TabPane tab='Global Staking Stats' key='general' />
-        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
-      </Tabs>
+      <LeaderboardTabs activeKey={isMyAddress ? 'user' : ''} />
       {data && (
         <div className={clsx(styles.Statistics)}>
           <ProfileCard

diff --git a/src/components/leaderboard/common/LeaderboardTabs.tsx b/src/components/leaderboard/common/LeaderboardTabs.tsx
@@ -0,0 +1,44 @@
+import { Tabs } from 'antd'
+import router from 'next/router'
+import { useMyAddress } from 'src/components/auth/MyAccountsContext'
+
+export default function LeaderboardTabs({
+  activeKey,
+}: {
+  activeKey: '' | 'user' | 'general' | 'stats'
+}) {
+  const myAddress = useMyAddress()
+
+  return (
+    <>
+      <Tabs
+        className='sm-hidden'
+        activeKey={activeKey}
+        onChange={key => {
+          if (key === 'user')
+            router.push(`/leaderboard/${myAddress}?role=staker`, undefined, { shallow: true })
+          else if (key === 'stats') router.push('/stats', undefined, { shallow: true })
+          else if (key === 'general') router.push('/leaderboard', undefined, { shallow: true })
+        }}
+      >
+        {myAddress && <Tabs.TabPane tab='My Staking Stats' key='user' />}
+        <Tabs.TabPane tab='Global Staking Stats' key='general' />
+        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
+      </Tabs>
+      <Tabs
+        className='lg-hidden'
+        activeKey={activeKey}
+        onChange={key => {
+          if (key === 'user')
+            router.push(`/leaderboard/${myAddress}?role=staker`, undefined, { shallow: true })
+          else if (key === 'stats') router.push('/stats', undefined, { shallow: true })
+          else if (key === 'general') router.push('/leaderboard', undefined, { shallow: true })
+        }}
+      >
+        {myAddress && <Tabs.TabPane tab='My Activity' key='user' />}
+        <Tabs.TabPane tab='Total Activity' key='general' />
+        <Tabs.TabPane tab='App Stats' key='stats' />
+      </Tabs>
+    </>
+  )
+}
diff --git a/src/components/statistics/StatisticsPage.tsx b/src/components/statistics/StatisticsPage.tsx
@@ -1,8 +1,7 @@
-import { Col, Radio, Row, Tabs } from 'antd'
+import { Col, Radio, Row } from 'antd'
 import dynamic from 'next/dynamic'
-import router from 'next/router'
 import { useState } from 'react'
-import { useMyAddress } from '../auth/MyAccountsContext'
+import LeaderboardTabs from '../leaderboard/common/LeaderboardTabs'
 import { PageContent } from '../main/PageWrapper'
 import { StatisticsProps } from './Statistics'
 import style from './Statistics.module.sass'
@@ -16,7 +15,6 @@ export const periodOpt = [
 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) => {
@@ -25,17 +23,7 @@ export default function StatisticsPage(props: StatisticsProps) {
 
   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}?role=staker`)
-        }}
-      >
-        {myAddress && <Tabs.TabPane tab='My Staking Stats' key='user' />}
-        <Tabs.TabPane tab='Global Staking Stats' key='general' />
-        <Tabs.TabPane tab='Polkaverse Activity' key='stats' />
-      </Tabs>
+      <LeaderboardTabs activeKey='stats' />
       <Row className={`${style.DfGridParams} my-3`}>
         <Col>
           <Radio.Group