ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add numbering to top stacker and territories

This commit is contained in:
keyan 2024-02-14 15:06:42 -06:00
parent f59ee5df17
commit bbbd5060d0
8 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/item.module.css
View File

@ -140,6 +140,11 @@ a.link:visited {
margin-top: -2px; margin-top: -2px;
} }
.grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
}
/* .itemJob .hunk { /* .itemJob .hunk {
align-self: center; align-self: center;
} }
@ -163,6 +168,7 @@ a.link:visited {
display: flex; display: flex;
color: var(--theme-grey); color: var(--theme-grey);
font-size: 90%; font-size: 90%;
margin-right: .75rem;
} }
.skeleton .other { .skeleton .other {

41
components/territory-list.js
View File

@ -1,10 +1,12 @@
import Link from 'next/link' import Link from 'next/link'
import { abbrNum, numWithUnits } from '../lib/format' import { abbrNum, numWithUnits } from '../lib/format'
import styles from './item.module.css' import styles from './item.module.css'
import { useEffect, useMemo, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import { useQuery } from '@apollo/client' import { useQuery } from '@apollo/client'
import MoreFooter from './more-footer' import MoreFooter from './more-footer'
import { useData } from './use-data' import { useData } from './use-data'
import Info from './info'
import { TerritoryInfo } from './territory-header'
// all of this nonsense is to show the stat we are sorting by first // all of this nonsense is to show the stat we are sorting by first
const Revenue = ({ sub }) => (sub.optional.revenue !== null && <span>{abbrNum(sub.optional.revenue)} revenue</span>) const Revenue = ({ sub }) => (sub.optional.revenue !== null && <span>{abbrNum(sub.optional.revenue)} revenue</span>)
@ -33,7 +35,7 @@ function separate (arr, separator) {
return arr.flatMap((x, i) => i < arr.length - 1 ? [x, separator] : [x]) return arr.flatMap((x, i) => i < arr.length - 1 ? [x, separator] : [x])
} }
export default function TerritoryList ({ ssrData, query, variables, destructureData }) { export default function TerritoryList ({ ssrData, query, variables, destructureData, rank }) {
const { data, fetchMore } = useQuery(query, { variables }) const { data, fetchMore } = useQuery(query, { variables })
const dat = useData(data, ssrData) const dat = useData(data, ssrData)
const [statComps, setStatComps] = useState(separate(STAT_COMPONENTS, Separator)) const [statComps, setStatComps] = useState(separate(STAT_COMPONENTS, Separator))
@ -59,18 +61,31 @@ export default function TerritoryList ({ ssrData, query, variables, destructureD
return ( return (
<> <>
{subs?.map(sub => ( <div className={styles.grid}>
<div className={`${styles.item} mb-2`} key={sub.name}> {subs?.map((sub, i) => (
<div className={styles.hunk}> <React.Fragment key={sub.name}>
<Link href={`/~${sub.name}`} className={`${styles.title} d-inline-flex align-items-center text-reset`}> {rank
{sub.name} ? (
</Link> <div className={styles.rank}>
<div className={styles.other}> {i + 1}
{statComps.map((Comp, i) => <Comp key={i} sub={sub} />)} </div>)
: <div />}
<div className={`${styles.item} mb-2`}>
<div className={styles.hunk}>
<div className='d-flex align-items-center'>
<Link href={`/~${sub.name}`} className={`${styles.title} mb-0 d-inline-flex align-items-center text-reset`}>
{sub.name}
</Link>
<Info className='d-flex'><TerritoryInfo sub={sub} /></Info>
</div>
<div className={styles.other}>
{statComps.map((Comp, i) => <Comp key={i} sub={sub} />)}
</div>
</div>
</div> </div>
</div> </React.Fragment>
</div> ))}
))} </div>
<MoreFooter cursor={cursor} count={subs?.length} fetchMore={fetchMore} Skeleton={SubsSkeleton} noMoreText='NO MORE' /> <MoreFooter cursor={cursor} count={subs?.length} fetchMore={fetchMore} Skeleton={SubsSkeleton} noMoreText='NO MORE' />
</> </>
) )

5
components/user-header.module.css
View File

@ -36,4 +36,9 @@
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
}
.grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
} }

48
components/user-list.js
View File

@ -3,7 +3,7 @@ import Image from 'react-bootstrap/Image'
import { abbrNum, numWithUnits } from '../lib/format' import { abbrNum, numWithUnits } from '../lib/format'
import styles from './item.module.css' import styles from './item.module.css'
import userStyles from './user-header.module.css' import userStyles from './user-header.module.css'
import { useEffect, useMemo, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import { useQuery } from '@apollo/client' import { useQuery } from '@apollo/client'
import MoreFooter from './more-footer' import MoreFooter from './more-footer'
import { useData } from './use-data' import { useData } from './use-data'
@ -36,7 +36,7 @@ function seperate (arr, seperator) {
return arr.flatMap((x, i) => i < arr.length - 1 ? [x, seperator] : [x]) return arr.flatMap((x, i) => i < arr.length - 1 ? [x, seperator] : [x])
} }
export default function UserList ({ ssrData, query, variables, destructureData }) { export default function UserList ({ ssrData, query, variables, destructureData, rank }) {
const { data, fetchMore } = useQuery(query, { variables }) const { data, fetchMore } = useQuery(query, { variables })
const dat = useData(data, ssrData) const dat = useData(data, ssrData)
const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator)) const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator))
@ -62,24 +62,34 @@ export default function UserList ({ ssrData, query, variables, destructureData }
return ( return (
<> <>
{users?.map(user => ( <div className={styles.grid}>
<div className={`${styles.item} mb-2`} key={user.name}> {users?.map((user, i) => (
<Link href={`/${user.name}`}> <React.Fragment key={user.name}>
<Image {rank
src={user.photoId ? `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${user.photoId}` : '/dorian400.jpg'} width='32' height='32' ? (
className={`${userStyles.userimg} me-2`} <div className={styles.rank}>
/> {i + 1}
</Link> </div>)
<div className={styles.hunk}> : <div />}
<Link href={`/${user.name}`} className={`${styles.title} d-inline-flex align-items-center text-reset`}> <div className={`${styles.item} mb-2`}>
@{user.name}<Hat className='ms-1 fill-grey' height={14} width={14} user={user} /> <Link href={`/${user.name}`}>
</Link> <Image
<div className={styles.other}> src={user.photoId ? `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${user.photoId}` : '/dorian400.jpg'} width='32' height='32'
{statComps.map((Comp, i) => <Comp key={i} user={user} />)} className={`${userStyles.userimg} me-2`}
/>
</Link>
<div className={styles.hunk}>
<Link href={`/${user.name}`} className={`${styles.title} d-inline-flex align-items-center text-reset`}>
@{user.name}<Hat className='ms-1 fill-grey' height={14} width={14} user={user} />
</Link>
<div className={styles.other}>
{statComps.map((Comp, i) => <Comp key={i} user={user} />)}
</div>
</div>
</div> </div>
</div> </React.Fragment>
</div> ))}
))} </div>
<MoreFooter cursor={cursor} count={users?.length} fetchMore={fetchMore} Skeleton={UsersSkeleton} noMoreText='NO MORE' /> <MoreFooter cursor={cursor} count={users?.length} fetchMore={fetchMore} Skeleton={UsersSkeleton} noMoreText='NO MORE' />
</> </>
) )

3
fragments/subs.js
View File

@ -116,10 +116,11 @@ export const SUB_PAY = gql`
}` }`
export const TOP_SUBS = gql` export const TOP_SUBS = gql`
${SUB_FULL_FIELDS}
query TopSubs($cursor: String, $when: String, $from: String, $to: String, $by: String, ) { query TopSubs($cursor: String, $when: String, $from: String, $to: String, $by: String, ) {
topSubs(cursor: $cursor, when: $when, from: $from, to: $to, by: $by) { topSubs(cursor: $cursor, when: $when, from: $from, to: $to, by: $by) {
subs { subs {
name ...SubFullFields
ncomments(when: $when, from: $from, to: $to) ncomments(when: $when, from: $from, to: $to)
nposts(when: $when, from: $from, to: $to) nposts(when: $when, from: $from, to: $to)

1
pages/~/top/cowboys.js
View File

@ -13,6 +13,7 @@ export default function Index ({ ssrData }) {
<UserList <UserList
ssrData={ssrData} query={TOP_COWBOYS} ssrData={ssrData} query={TOP_COWBOYS}
destructureData={data => data.topCowboys} destructureData={data => data.topCowboys}
rank
/> />
</Layout> </Layout>
) )

1
pages/~/top/stackers/[when].js
View File

@ -17,6 +17,7 @@ export default function Index ({ ssrData }) {
<UserList <UserList
ssrData={ssrData} query={TOP_USERS} ssrData={ssrData} query={TOP_USERS}
variables={variables} destructureData={data => data.topUsers} variables={variables} destructureData={data => data.topUsers}
rank
/> />
</Layout> </Layout>
) )

1
pages/~/top/territories/[when].js
View File

@ -19,6 +19,7 @@ export default function Index ({ ssrData }) {
query={TOP_SUBS} query={TOP_SUBS}
variables={variables} variables={variables}
destructureData={data => data.topSubs} destructureData={data => data.topSubs}
rank
/> />
</Layout> </Layout>
) )