diff --git a/components/header.js b/components/header.js
index 85d41fe4..5b1c1518 100644
--- a/components/header.js
+++ b/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 () {
recent
-
+
top
{me
@@ -151,7 +146,7 @@ export default function Header () {
-
+
top
diff --git a/fragments/users.js b/fragments/users.js
index 7f778d50..ff3213f2 100644
--- a/fragments/users.js
+++ b/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}
diff --git a/lib/apollo.js b/lib/apollo.js
index 855668eb..f47203c2 100644
--- a/lib/apollo.js
+++ b/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) {
diff --git a/pages/top/users/[within].js b/pages/top/users/[within].js
index 9099b527..1cda6903 100644
--- a/pages/top/users/[within].js
+++ b/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 CommentsFlat from '../../../components/comments-flat'
+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(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 (
-
-
+
+ {users.map(user => (
+
+
+
@{user.name}
+ {user.stacked} stacked
+
+
+ ))}
+
)
}
+
+function UsersSkeleton () {
+ const users = new Array(21).fill(null)
+
+ return (
+ {users.map((_, i) => (
+
+ ))}
+
+ )
+}