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) => ( +
+
+
+
+ ))} +
+ ) +}