import Link from 'next/link'
import Image from 'react-bootstrap/Image'
import { abbrNum } from '../lib/format'
import CowboyHat from './cowboy-hat'
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'
// all of this nonsense is to show the stat we are sorting by first
const Stacked = ({ user }) => ({abbrNum(user.stacked)} stacked)
const Spent = ({ user }) => ({abbrNum(user.spent)} spent)
const Posts = ({ user }) => (
{abbrNum(user.nposts)} posts
)
const Comments = ({ user }) => (
{abbrNum(user.ncomments)} comments
)
const Referrals = ({ user }) => ({abbrNum(user.referrals)} 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 [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator))
useEffect(() => {
if (variables?.by) {
// shift the stat we are sorting by to the front
const comps = [...STAT_COMPONENTS]
setStatComps(seperate([...comps.splice(STAT_POS[variables.by], 1), ...comps], Seperator))
}
}, [variables?.by])
const { users, cursor } = useMemo(() => {
if (!data && !ssrData) return {}
if (destructureData) {
return destructureData(data || ssrData)
} else {
return data || ssrData
}
}, [data, ssrData])
if (!ssrData && !data) {
return