Search and filter from UserPage

web/components/contracts-list.tsx

@@ -86,7 +86,7 @@ function ContractCard(props: { contract: Contract }) {
   )
 }
 
-export function ContractsGrid(props: { contracts: Contract[] }) {
+function ContractsGrid(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
     <ul role="list" className="grid grid-cols-1 gap-6 lg:grid-cols-2">
@@ -98,6 +98,64 @@ export function ContractsGrid(props: { contracts: Contract[] }) {
   )
 }
 
+type Sort = 'createdTime' | 'volume' | 'resolved' | 'all'
+export function SearchableGrid(props: {
+  contracts: Contract[]
+  defaultSort?: Sort
+}) {
+  const { contracts, defaultSort } = props
+  const [query, setQuery] = useState('')
+  const [sort, setSort] = useState(defaultSort || 'volume')
+
+  function check(corpus: String) {
+    return corpus.toLowerCase().includes(query.toLowerCase())
+  }
+  // TODO: Search through @username
+  let matches = contracts.filter(
+    (c) => check(c.question) || check(c.description) || check(c.creatorName)
+  )
+
+  if (sort === 'createdTime' || sort === 'resolved' || sort === 'all') {
+    matches.sort((a, b) => b.createdTime - a.createdTime)
+  } else if (sort === 'volume') {
+    matches.sort((a, b) => compute(b).volume - compute(a).volume)
+  }
+
+  if (sort !== 'all') {
+    // Filter for (or filter out) resolved contracts
+    matches = matches.filter((c) =>
+      sort === 'resolved' ? c.resolution : !c.resolution
+    )
+  }
+
+  return (
+    <div>
+      {/* Show a search input next to a sort dropdown */}
+      <div className="flex justify-between gap-2 my-8">
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search markets"
+          className="input input-bordered w-full"
+        />
+        <select
+          className="select select-bordered"
+          value={sort}
+          onChange={(e) => setSort(e.target.value as Sort)}
+        >
+          <option value="volume">Most traded</option>
+          <option value="createdTime">Newest first</option>
+          <option value="resolved">Resolved</option>
+          <option value="all">All markets</option>
+        </select>
+      </div>
+
+      <ContractsGrid contracts={matches} />
+    </div>
+  )
+}
+
 export function ContractsList(props: { creator: User }) {
   const { creator } = props
   const [contracts, setContracts] = useState<Contract[]>([])
@@ -109,5 +167,5 @@ export function ContractsList(props: { creator: User }) {
     }
   }, [creator])
 
-  return <ContractsGrid contracts={contracts} />
+  return <SearchableGrid contracts={contracts} defaultSort="all" />
 }

web/pages/markets.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
-import { ContractsGrid } from '../components/contracts-list'
+import { SearchableGrid } from '../components/contracts-list'
 import { Header } from '../components/header'
-import { compute, listAllContracts } from '../lib/firebase/contracts'
+import { listAllContracts } from '../lib/firebase/contracts'
 import { Contract } from '../lib/firebase/contracts'
 
 export default function Markets() {
@@ -10,56 +10,11 @@ export default function Markets() {
     listAllContracts().then(setContracts)
   }, [])
 
-  const [query, setQuery] = useState('')
-  type Sort = 'createdTime' | 'volume' | 'resolved' | 'all'
-  const [sort, setSort] = useState('volume')
-
-  function check(corpus: String) {
-    return corpus.toLowerCase().includes(query.toLowerCase())
-  }
-  let matches = contracts.filter(
-    (c) => check(c.question) || check(c.description) || check(c.creatorName)
-  )
-
-  if (sort === 'createdTime' || sort === 'resolved' || sort === 'all') {
-    matches.sort((a, b) => b.createdTime - a.createdTime)
-  } else if (sort === 'volume') {
-    matches.sort((a, b) => compute(b).volume - compute(a).volume)
-  }
-
-  if (sort !== 'all') {
-    // Filter for (or filter out) resolved contracts
-    matches = matches.filter((c) =>
-      sort === 'resolved' ? c.resolution : !c.resolution
-    )
-  }
-
   return (
     <div>
       <Header />
       <div className="max-w-4xl py-8 mx-auto">
-        {/* Show a search input next to a sort dropdown */}
+        <SearchableGrid contracts={contracts} />
-        <div className="flex justify-between gap-2 my-8">
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search markets"
-            className="input input-bordered w-full"
-          />
-          <select
-            className="select select-bordered"
-            value={sort}
-            onChange={(e) => setSort(e.target.value as Sort)}
-          >
-            <option value="volume">Most traded</option>
-            <option value="createdTime">Newest first</option>
-            <option value="resolved">Resolved</option>
-            <option value="all">All markets</option>
-          </select>
-        </div>
-
-        <ContractsGrid contracts={matches} />
       </div>
     </div>
   )