Refactor useQueryAndSortParams into the SearchableGrid component

web/components/contracts-list.tsx

@@ -199,13 +199,16 @@ const MAX_CONTRACTS_DISPLAYED = 99
 
 export function SearchableGrid(props: {
   contracts: Contract[]
-  query: string
-  setQuery: (query: string) => void
-  sort: Sort
-  setSort: (sort: Sort) => void
   byOneCreator?: boolean
+  querySortOptions?: {
+    defaultSort: Sort
+    shouldLoadFromStorage?: boolean
+  }
 }) {
-  const { contracts, query, setQuery, sort, setSort, byOneCreator } = props
+  const { contracts, byOneCreator, querySortOptions } = props
+
+  const { query, setQuery, sort, setSort } =
+    useQueryAndSortParams(querySortOptions)
 
   const queryWords = query.toLowerCase().split(' ')
   function check(corpus: String) {
@@ -324,11 +327,6 @@ export function CreatorContractsList(props: { creator: User }) {
   const { creator } = props
   const [contracts, setContracts] = useState<Contract[] | 'loading'>('loading')
 
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
-    defaultSort: 'all',
-    shouldLoadFromStorage: false,
-  })
-
   useEffect(() => {
     if (creator?.id) {
       // TODO: stream changes from firestore
@@ -342,10 +340,10 @@ export function CreatorContractsList(props: { creator: User }) {
     <SearchableGrid
       contracts={contracts}
       byOneCreator
-      query={query}
+      querySortOptions={{
-      setQuery={setQuery}
+        defaultSort: 'all',
-      sort={sort}
+        shouldLoadFromStorage: false,
-      setSort={setSort}
+      }}
     />
   )
 }

web/pages/fold/[...slugs]/index.tsx

@@ -22,7 +22,6 @@ import { Col } from '../../../components/layout/col'
 import { useUser } from '../../../hooks/use-user'
 import { useFold } from '../../../hooks/use-fold'
 import { SearchableGrid } from '../../../components/contracts-list'
-import { useQueryAndSortParams } from '../../../hooks/use-sort-and-query-params'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { scoreCreators, scoreTraders } from '../../../../common/scoring'
@@ -138,8 +137,6 @@ export default function FoldPage(props: {
 
   const fold = useFold(props.fold?.id) ?? props.fold
 
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams()
-
   const user = useUser()
   const isCurator = user && fold && user.id === fold.curatorId
 
@@ -259,13 +256,7 @@ export default function FoldPage(props: {
                 <LoadingIndicator className="mt-4" />
               )
             ) : (
-              <SearchableGrid
+              <SearchableGrid contracts={contracts} />
-                contracts={contracts}
-                query={query}
-                setQuery={setQuery}
-                sort={sort}
-                setSort={setSort}
-              />
             )}
           </Col>
           <Col className="hidden w-full max-w-xs gap-12 md:flex">

web/pages/markets.tsx

@@ -3,7 +3,6 @@ import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
 import { useContracts } from '../hooks/use-contracts'
-import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
 import { Contract, listAllContracts } from '../lib/firebase/contracts'
 
 export async function getStaticProps() {
@@ -21,8 +20,6 @@ export async function getStaticProps() {
 export default function Markets(props: { contracts: Contract[] }) {
   const contracts = useContracts() ?? props.contracts ?? []
 
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams()
-
   return (
     <Page>
       <SEO
@@ -35,13 +32,7 @@ export default function Markets(props: { contracts: Contract[] }) {
       <ClosingSoonMarkets contracts={closingSoonContracts} />
       <Spacer h={10} /> */}
 
-      <SearchableGrid
+      <SearchableGrid contracts={contracts} />
-        contracts={contracts}
-        query={query}
-        setQuery={setQuery}
-        sort={sort}
-        setSort={setSort}
-      />
     </Page>
   )
 }

web/pages/tag/[tag].tsx

@@ -3,7 +3,6 @@ import { SearchableGrid } from '../../components/contracts-list'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 import { useContracts } from '../../hooks/use-contracts'
-import { useQueryAndSortParams } from '../../hooks/use-sort-and-query-params'
 import { Contract, listAllContracts } from '../../lib/firebase/contracts'
 
 export async function getStaticProps() {
@@ -31,18 +30,10 @@ export default function TagPage(props: { contracts: Contract[] }) {
     contract.lowercaseTags.includes(tag.toLowerCase())
   )
 
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams()
-
   return (
     <Page>
       <Title text={`#${tag}`} />
-      <SearchableGrid
+      <SearchableGrid contracts={taggedContracts} />
-        contracts={taggedContracts}
-        query={query}
-        setQuery={setQuery}
-        sort={sort}
-        setSort={setSort}
-      />
     </Page>
   )
 }