import Link from 'next/link' import Image from 'react-bootstrap/Image' import { abbrNum, numWithUnits } from '../lib/format' import styles from './item.module.css' import userStyles from './user-header.module.css' import { useEffect, useMemo, useState } from 'react' import { useQuery } from '@apollo/client' import MoreFooter from './more-footer' import { useData } from './use-data' import Hat from './hat' // all of this nonsense is to show the stat we are sorting by first const Stacked = ({ user }) => (user.optional.stacked !== null && {abbrNum(user.optional.stacked)} stacked) const Spent = ({ user }) => (user.optional.spent !== null && {abbrNum(user.optional.spent)} spent) const Posts = ({ user }) => ( {numWithUnits(user.nposts, { unitSingular: 'post', unitPlural: 'posts' })} ) const Comments = ({ user }) => ( {numWithUnits(user.ncomments, { unitSingular: 'comment', unitPlural: 'comments' })} ) const Referrals = ({ user }) => (user.optional.referrals !== null && {numWithUnits(user.optional.referrals, { unitSingular: 'referral', unitPlural: 'referrals' })}) const Seperator = () => ( \ ) const STAT_POS = { stacked: 0, spent: 1, posts: 2, comments: 3, referrals: 4 } const STAT_COMPONENTS = [Stacked, Spent, Posts, Comments, Referrals] function seperate (arr, seperator) { return arr.flatMap((x, i) => i < arr.length - 1 ? [x, seperator] : [x]) } export default function UserList ({ ssrData, query, variables, destructureData }) { const { data, fetchMore } = useQuery(query, { variables }) const dat = useData(data, ssrData) const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator)) useEffect(() => { // shift the stat we are sorting by to the front const comps = [...STAT_COMPONENTS] setStatComps(seperate([...comps.splice(STAT_POS[variables?.by || 0], 1), ...comps], Seperator)) }, [variables?.by]) const { users, cursor } = useMemo(() => { if (!dat) return {} if (destructureData) { return destructureData(dat) } else { return dat } }, [dat]) if (!dat) { return } return ( <> {users?.map(user => (
@{user.name}
{statComps.map((Comp, i) => )}
))} ) } export function UsersSkeleton () { const users = new Array(21).fill(null) return (
{users.map((_, i) => (
))}
) }