add numbering to top stacker and territories

components/item.module.css

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

components/territory-list.js

@@ -1,10 +1,12 @@
 import Link from 'next/link'
 import { abbrNum, numWithUnits } from '../lib/format'
 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 MoreFooter from './more-footer'
 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
 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])
 }
 
-export default function TerritoryList ({ ssrData, query, variables, destructureData }) {
+export default function TerritoryList ({ ssrData, query, variables, destructureData, rank }) {
   const { data, fetchMore } = useQuery(query, { variables })
   const dat = useData(data, ssrData)
   const [statComps, setStatComps] = useState(separate(STAT_COMPONENTS, Separator))
@@ -59,18 +61,31 @@ export default function TerritoryList ({ ssrData, query, variables, destructureD
 
   return (
     <>
-      {subs?.map(sub => (
-        <div className={`${styles.item} mb-2`} key={sub.name}>
-          <div className={styles.hunk}>
-            <Link href={`/~${sub.name}`} className={`${styles.title} d-inline-flex align-items-center text-reset`}>
-              {sub.name}
-            </Link>
-            <div className={styles.other}>
-              {statComps.map((Comp, i) => <Comp key={i} sub={sub} />)}
+      <div className={styles.grid}>
+        {subs?.map((sub, i) => (
+          <React.Fragment key={sub.name}>
+            {rank
+              ? (
+                <div className={styles.rank}>
+                  {i + 1}
+                </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>
       <MoreFooter cursor={cursor} count={subs?.length} fetchMore={fetchMore} Skeleton={SubsSkeleton} noMoreText='NO MORE' />
     </>
   )

components/user-header.module.css

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

components/user-list.js

@@ -3,7 +3,7 @@ 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 React, { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@apollo/client'
 import MoreFooter from './more-footer'
 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])
 }
 
-export default function UserList ({ ssrData, query, variables, destructureData }) {
+export default function UserList ({ ssrData, query, variables, destructureData, rank }) {
   const { data, fetchMore } = useQuery(query, { variables })
   const dat = useData(data, ssrData)
   const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator))
@@ -62,24 +62,34 @@ export default function UserList ({ ssrData, query, variables, destructureData }
 
   return (
     <>
-      {users?.map(user => (
-        <div className={`${styles.item} mb-2`} key={user.name}>
-          <Link href={`/${user.name}`}>
-            <Image
-              src={user.photoId ? `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${user.photoId}` : '/dorian400.jpg'} width='32' height='32'
-              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 className={styles.grid}>
+        {users?.map((user, i) => (
+          <React.Fragment key={user.name}>
+            {rank
+              ? (
+                <div className={styles.rank}>
+                  {i + 1}
+                </div>)
+              : <div />}
+            <div className={`${styles.item} mb-2`}>
+              <Link href={`/${user.name}`}>
+                <Image
+                  src={user.photoId ? `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${user.photoId}` : '/dorian400.jpg'} width='32' height='32'
+                  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>
       <MoreFooter cursor={cursor} count={users?.length} fetchMore={fetchMore} Skeleton={UsersSkeleton} noMoreText='NO MORE' />
     </>
   )

fragments/subs.js

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

pages/~/top/cowboys.js

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

pages/~/top/stackers/[when].js

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

pages/~/top/territories/[when].js

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