diff --git a/components/user-list.js b/components/user-list.js index 97a80a3b..da25f1d5 100644 --- a/components/user-list.js +++ b/components/user-list.js @@ -4,8 +4,46 @@ 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, useState } from 'react' + +// 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.nitems)} 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 ({ users, sort }) { + const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator)) + + useEffect(() => { + if (sort) { + // shift the stat we are sorting by to the front + const comps = [...STAT_COMPONENTS] + setStatComps(seperate([...comps.splice(STAT_POS[sort], 1), ...comps], Seperator)) + } + }, [sort]) -export default function UserList ({ users }) { return ( <> {users.map(user => (