top users

components/header.js

@@ -31,11 +31,6 @@ export default function Header () {
   const path = router.asPath.split('?')[0]
   const [fired, setFired] = useState()
   const me = useMe()
-  const [within, setWithin] = useState()
-
-  useEffect(() => {
-    setWithin(localStorage.getItem('topWithin'))
-  }, [])
 
   const Corner = () => {
     if (me) {
@@ -81,7 +76,7 @@ export default function Header () {
                 <Link href='/recent' passHref>
                   <NavDropdown.Item>recent</NavDropdown.Item>
                 </Link>
-                <Link href={`/top${within ? `/${within}` : ''}`} passHref>
+                <Link href='/top/posts/week' passHref>
                   <NavDropdown.Item>top</NavDropdown.Item>
                 </Link>
                 {me
@@ -151,7 +146,7 @@ export default function Header () {
               </Link>
             </Nav.Item>
             <Nav.Item className='d-md-flex d-none'>
-              <Link href={`/top${within ? `/${within}` : ''}`} passHref>
+              <Link href='/top/posts/week' passHref>
                 <Nav.Link className={styles.navLink}>top</Nav.Link>
               </Link>
             </Nav.Item>

fragments/users.js

@@ -39,6 +39,18 @@ export const USER_FIELDS = gql`
     }
   }`
 
+export const TOP_USERS = gql`
+  query TopUsers($cursor: String, $within: String!) {
+    topUsers(cursor: $cursor, within: $within) {
+      users {
+        name
+        stacked
+      }
+      cursor
+    }
+  }
+`
+
 export const USER_FULL = gql`
   ${USER_FIELDS}
   ${ITEM_WITH_COMMENTS}

lib/apollo.js

@@ -25,6 +25,19 @@ export default function getApolloClient () {
       typePolicies: {
         Query: {
           fields: {
+            topUsers: {
+              keyArgs: ['within'],
+              merge (existing, incoming) {
+                if (isFirstPage(incoming.cursor, existing?.users)) {
+                  return incoming
+                }
+
+                return {
+                  cursor: incoming.cursor,
+                  users: [...(existing?.users || []), ...incoming.users]
+                }
+              }
+            },
             moreItems: {
               keyArgs: ['sort', 'name', 'within'],
               merge (existing, incoming) {

pages/top/users/[within].js

@@ -2,22 +2,50 @@ import Layout from '../../../components/layout'
 import { useRouter } from 'next/router'
 import { getGetServerSideProps } from '../../../api/ssrApollo'
 import TopHeader from '../../../components/top-header'
-import { MORE_FLAT_COMMENTS } from '../../../fragments/comments'
+import { TOP_USERS } from '../../../fragments/users'
-import CommentsFlat from '../../../components/comments-flat'
+import { useQuery } from '@apollo/client'
+import Link from 'next/link'
+import MoreFooter from '../../../components/more-footer'
 
-export const getServerSideProps = getGetServerSideProps(MORE_FLAT_COMMENTS, { sort: 'top' })
+export const getServerSideProps = getGetServerSideProps(TOP_USERS)
 
-export default function Index ({ data: { moreFlatComments: { comments, cursor } } }) {
+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='comments' />
+      <TopHeader cat='users' />
-      <CommentsFlat
+      {users.map(user => (
-        comments={comments} cursor={cursor}
+        <Link href={`/${user.name}`} key={user.name}>
-        variables={{ sort: 'top', within: router.query?.within }}
+          <div className='d-flex align-items-center pointer'>
-        includeParent noReply
+            <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>
+  )
+}