Move shared logic into contracts-list

web/components/contract-overview.tsx

@@ -3,7 +3,7 @@ import { compute, Contract } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
-import { ContractDetails } from '../pages/markets'
+import { ContractDetails } from './contracts-list'
 
 export const ContractOverview = (props: {
   contract: Contract

web/components/contracts-list.tsx

@@ -1,7 +1,79 @@
+import Link from 'next/link'
+import { Col } from '../components/layout/col'
+import { Row } from '../components/layout/row'
 import { useEffect, useState } from 'react'
 import { useUser } from '../hooks/use-user'
-import { Contract, listContracts } from '../lib/firebase/contracts'
-import { ContractsGrid } from '../pages/markets'
+import { compute, Contract, listContracts } from '../lib/firebase/contracts'
+import { formatWithCommas } from '../lib/util/format'
+
+export function ContractDetails(props: { contract: Contract }) {
+  const { contract } = props
+  const { volume, createdDate } = compute(contract)
+
+  return (
+    <Row className="flex-wrap text-sm text-gray-500">
+      <div className="whitespace-nowrap">By {contract.creatorName}</div>
+      <div className="mx-2">•</div>
+      <div className="whitespace-nowrap">{createdDate}</div>
+      <div className="mx-2">•</div>
+      <div className="whitespace-nowrap">{formatWithCommas(volume)} vol</div>
+    </Row>
+  )
+}
+
+function ContractCard(props: { contract: Contract }) {
+  const { contract } = props
+  const { probPercent } = compute(contract)
+
+  return (
+    <Link href={`/contract/${contract.id}`}>
+      <a>
+        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
+          <div className="card">
+            <div className="card-body p-6">
+              <div className="flex justify-between gap-2">
+                {/* Left side of card */}
+                <div>
+                  <p className="font-medium text-indigo-700 mb-8">
+                    {contract.question}
+                  </p>
+                  <ContractDetails contract={contract} />
+                </div>
+
+                {/* Right side of card */}
+                <Col>
+                  <Col className="text-4xl mx-auto items-end">
+                    {contract.resolution || (
+                      <div className="text-primary">
+                        {probPercent}
+                        <div className="text-lg">chance</div>
+                      </div>
+                    )}
+                  </Col>
+                </Col>
+              </div>
+            </div>
+          </div>
+        </li>
+      </a>
+    </Link>
+  )
+}
+
+export function ContractsGrid(props: { contracts: Contract[] }) {
+  const { contracts } = props
+  return (
+    <ul
+      role="list"
+      className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
+    >
+      {contracts.map((contract) => (
+        <ContractCard contract={contract} key={contract.id} />
+      ))}
+      {/* TODO: Show placeholder if empty */}
+    </ul>
+  )
+}
 
 export function ContractsList(props: {}) {
   const creator = useUser()

web/pages/markets.tsx

@@ -1,81 +1,9 @@
-import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
+import { ContractsGrid } from '../components/contracts-list'
 import { Header } from '../components/header'
-import { Col } from '../components/layout/col'
-import { Row } from '../components/layout/row'
 import { Title } from '../components/title'
 import { compute, listAllContracts } from '../lib/firebase/contracts'
 import { Contract } from '../lib/firebase/contracts'
-import { formatWithCommas } from '../lib/util/format'
-
-export function ContractDetails(props: { contract: Contract }) {
-  const { contract } = props
-  const { volume, createdDate } = compute(contract)
-
-  return (
-    <Row className="flex-wrap text-sm text-gray-500">
-      <div className="whitespace-nowrap">By {contract.creatorName}</div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{createdDate}</div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{formatWithCommas(volume)} vol</div>
-    </Row>
-  )
-}
-
-function ContractCard(props: { contract: Contract }) {
-  const { contract } = props
-  const { probPercent } = compute(contract)
-
-  return (
-    <Link href={`/contract/${contract.id}`}>
-      <a>
-        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
-          <div className="card">
-            <div className="card-body p-6">
-              <div className="flex justify-between gap-2">
-                {/* Left side of card */}
-                <div>
-                  <p className="font-medium text-indigo-700 mb-8">
-                    {contract.question}
-                  </p>
-                  <ContractDetails contract={contract} />
-                </div>
-
-                {/* Right side of card */}
-                <Col>
-                  <Col className="text-4xl mx-auto items-end">
-                    {contract.resolution || (
-                      <div className="text-primary">
-                        {probPercent}
-                        <div className="text-lg">chance</div>
-                      </div>
-                    )}
-                  </Col>
-                </Col>
-              </div>
-            </div>
-          </div>
-        </li>
-      </a>
-    </Link>
-  )
-}
-
-export function ContractsGrid(props: { contracts: Contract[] }) {
-  const { contracts } = props
-  return (
-    <ul
-      role="list"
-      className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
-    >
-      {contracts.map((contract) => (
-        <ContractCard contract={contract} key={contract.id} />
-      ))}
-      {/* TODO: Show placeholder if empty */}
-    </ul>
-  )
-}
 
 export default function Markets() {
   const [contracts, setContracts] = useState<Contract[]>([])
@@ -94,19 +22,10 @@ export default function Markets() {
     (c) => check(c.question) || check(c.description) || check(c.creatorName)
   )
 
-  function volume(contract: Contract) {
-    return (
-      contract.pot.YES +
-      contract.pot.NO -
-      contract.seedAmounts.YES -
-      contract.seedAmounts.NO
-    )
-  }
-
   if (sort === 'createdTime') {
     matches.sort((a, b) => b.createdTime - a.createdTime)
   } else if (sort === 'volume') {
-    matches.sort((a, b) => volume(b) - volume(a))
+    matches.sort((a, b) => compute(b).volume - compute(a).volume)
   }
 
   return (