Sort query in progress

web/components/contracts-list.tsx

@@ -223,14 +223,19 @@ const MAX_CONTRACTS_DISPLAYED = 99
 type Sort = 'creator' | 'tag' | 'createdTime' | 'pool' | 'resolved' | 'all'
 export function SearchableGrid(props: {
   contracts: Contract[]
-  defaultSort?: Sort
+  sort?: Sort
+  setSort: (sort: Sort) => void
   byOneCreator?: boolean
 }) {
-  const { contracts, defaultSort, byOneCreator } = props
+  const { contracts, sort, setSort, byOneCreator } = props
   const [query, setQuery] = useState('')
-  const [sort, setSort] = useState(
+  // const [sort, setSort] = useState(
-    defaultSort || (byOneCreator ? 'pool' : 'creator')
+  //   defaultSort || (byOneCreator ? 'pool' : 'creator')
-  )
+  // )
+
+  // useEffect(() => {
+  //   if (defaultSort) setSort(defaultSort)
+  // }, [defaultSort])
 
   function check(corpus: String) {
     return corpus.toLowerCase().includes(query.toLowerCase())
@@ -311,5 +316,12 @@ export function CreatorContractsList(props: { creator: User }) {
 
   if (contracts === 'loading') return <></>
 
-  return <SearchableGrid contracts={contracts} byOneCreator defaultSort="all" />
+  return (
+    <SearchableGrid
+      contracts={contracts}
+      byOneCreator
+      sort="all"
+      setSort={() => {}}
+    />
+  )
 }

web/pages/markets.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router'
 import { SearchableGrid } from '../components/contracts-list'
 import { Page } from '../components/page'
 import { useContracts } from '../hooks/use-contracts'
@@ -18,11 +19,35 @@ export async function getStaticProps() {
 export default function Markets(props: { contracts: Contract[] }) {
   const contracts = useContracts()
 
+  const router = useRouter()
+  const { tag, creator, newest, mostTraded } = router.query as {
+    tag?: string
+    creator?: string
+    newest?: string
+    mostTraded?: string
+  }
+  const sort =
+    tag === ''
+      ? 'tag'
+      : creator === ''
+      ? 'creator'
+      : newest === ''
+      ? 'createdTime'
+      : mostTraded === ''
+      ? 'pool'
+      : undefined
+
+  const setSort = () => {
+    router.push(router.pathname, '?tag')
+  }
+
   return (
     <Page>
-      {(props.contracts || contracts !== 'loading') && (
+      {(props.contracts || contracts !== 'loading') && router.isReady && (
         <SearchableGrid
           contracts={contracts === 'loading' ? props.contracts : contracts}
+          sort={sort}
+          setSort={setSort}
         />
       )}
     </Page>