52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
import Layout from '../../../components/layout'
|
|
import { useRouter } from 'next/router'
|
|
import { getGetServerSideProps } from '../../../api/ssrApollo'
|
|
import TopHeader from '../../../components/top-header'
|
|
import { TOP_USERS } from '../../../fragments/users'
|
|
import { useQuery } from '@apollo/client'
|
|
import Link from 'next/link'
|
|
import MoreFooter from '../../../components/more-footer'
|
|
|
|
export const getServerSideProps = getGetServerSideProps(TOP_USERS)
|
|
|
|
export default function Index ({ data: { topUsers: { users, cursor } } }) {
|
|
const router = useRouter()
|
|
|
|
const { data, fetchMore } = useQuery(TOP_USERS, {
|
|
variables: { within: router.query?.within }
|
|
})
|
|
|
|
if (data) {
|
|
({ topUsers: { users, cursor } } = data)
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<TopHeader cat='users' />
|
|
{users.map(user => (
|
|
<Link href={`/${user.name}`} key={user.name}>
|
|
<div className='d-flex align-items-center pointer'>
|
|
<h3 className='mb-0'>@{user.name}</h3>
|
|
<h2 className='ml-2 mb-0'><small className='text-success'>{user.stacked} stacked</small></h2>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
<MoreFooter cursor={cursor} fetchMore={fetchMore} Skeleton={UsersSkeleton} />
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
function UsersSkeleton () {
|
|
const users = new Array(21).fill(null)
|
|
|
|
return (
|
|
<div>{users.map((_, i) => (
|
|
<div key={i} className='d-flex align-items-center' style={{ height: '34px' }}>
|
|
<div className='clouds' style={{ width: '172px', borderRadius: '.4rem', height: '27px' }} />
|
|
<div className='ml-2 clouds' style={{ width: '137px', borderRadius: '.4rem', height: '30px', margin: '3px 0px' }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|