Use firebase query instead of algolia search for groups

web/hooks/use-contracts.ts

@@ -8,10 +8,12 @@ import {
   getUserBetContracts,
   getUserBetContractsQuery,
   trendingContractsQuery,
+  getContractsQuery,
 } from 'web/lib/firebase/contracts'
 import { useQueryClient } from 'react-query'
 import { MINUTE_MS } from 'common/util/time'
 import { query, limit } from 'firebase/firestore'
+import { Sort } from 'web/components/contract-search'
 
 export const useContracts = () => {
   const [contracts, setContracts] = useState<Contract[] | undefined>()
@@ -31,6 +33,18 @@ export const useTrendingContracts = (maxContracts: number) => {
   return result.data
 }
 
+export const useContractsQuery = (
+  sort: Sort,
+  maxContracts: number,
+  filters: { groupSlug?: string } = {}
+) => {
+  const result = useFirestoreQueryData(
+    ['contracts-query', sort, maxContracts, filters],
+    getContractsQuery(sort, maxContracts, filters)
+  )
+  return result.data
+}
+
 export const useInactiveContracts = () => {
   const [contracts, setContracts] = useState<Contract[] | undefined>()
 

web/lib/firebase/contracts.ts

@@ -24,6 +24,7 @@ import { Bet } from 'common/bet'
 import { Comment } from 'common/comment'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { getBinaryProb } from 'common/contract-details'
+import { Sort } from 'web/components/contract-search'
 
 export const contracts = coll<Contract>('contracts')
 
@@ -320,6 +321,50 @@ export const getTopGroupContracts = async (
   return await getValues<Contract>(creatorContractsQuery)
 }
 
+const sortToField = {
+  newest: 'createdTime',
+  score: 'popularityScore',
+  'most-traded': 'volume',
+  '24-hour-vol': 'volume24Hours',
+  'prob-change-day': 'probChanges.day',
+  'last-updated': 'lastUpdated',
+  liquidity: 'totalLiquidity',
+  'close-date': 'closeTime',
+  'resolve-date': 'resolutionTime',
+  'prob-descending': 'prob',
+  'prob-ascending': 'prob',
+} as const
+
+const sortToDirection = {
+  newest: 'desc',
+  score: 'desc',
+  'most-traded': 'desc',
+  '24-hour-vol': 'desc',
+  'prob-change-day': 'desc',
+  'last-updated': 'desc',
+  liquidity: 'desc',
+  'close-date': 'asc',
+  'resolve-date': 'desc',
+  'prob-ascending': 'asc',
+  'prob-descending': 'desc',
+} as const
+
+export const getContractsQuery = (
+  sort: Sort,
+  maxItems: number,
+  filters: { groupSlug?: string } = {}
+) => {
+  const { groupSlug } = filters
+  return query(
+    contracts,
+    where('isResolved', '==', false),
+    where('visibility', '==', 'public'),
+    ...(groupSlug ? [where('groupSlugs', 'array-contains', groupSlug)] : []),
+    orderBy(sortToField[sort], sortToDirection[sort]),
+    limit(maxItems)
+  )
+}
+
 export const getRecommendedContracts = async (
   contract: Contract,
   excludeBettorId: string,

web/pages/experimental/home/index.tsx

@@ -40,6 +40,8 @@ import { GroupCard } from 'web/pages/groups'
 import { chooseRandomSubset } from 'common/util/random'
 import { MenuButton } from 'web/components/nav/menu'
 import { hasCompletedStreakToday } from 'web/components/profile/betting-streak-modal'
+import { useContractsQuery } from 'web/hooks/use-contracts'
+import { ContractsGrid } from 'web/components/contract/contracts-grid'
 
 export default function Home() {
   const user = useUser()
@@ -158,6 +160,8 @@ function GroupSection(props: {
 }) {
   const { group, user } = props
 
+  const contracts = useContractsQuery('score', 4, { groupSlug: group.slug })
+
   return (
     <Col>
       <SectionHeader label={group.name} href={groupPath(group.slug)}>
@@ -180,14 +184,7 @@ function GroupSection(props: {
           ]}
         />
       </SectionHeader>
-      <ContractSearch
+      <ContractsGrid contracts={contracts} />
-        user={user}
-        defaultSort={'score'}
-        additionalFilter={{ groupSlug: group.slug }}
-        noControls
-        maxResults={4}
-        persistPrefix={`experimental-home-${group.slug}`}
-      />
     </Col>
   )
 }