Listen for folds in contract page

web/hooks/use-fold.ts

@@ -5,6 +5,7 @@ import {
   getFollowedFolds,
   listenForFold,
   listenForFolds,
+  listenForFoldsWithTags,
   listenForFollow,
 } from '../lib/firebase/folds'
 
@@ -28,6 +29,16 @@ export const useFolds = () => {
   return folds
 }
 
+export const useFoldsWithTags = (tags: string[] | undefined) => {
+  const [folds, setFolds] = useState<Fold[] | undefined>()
+
+  useEffect(() => {
+    if (tags && tags.length > 0) return listenForFoldsWithTags(tags, setFolds)
+  }, [tags])
+
+  return folds
+}
+
 export const useFollowingFold = (fold: Fold, user: User | null | undefined) => {
   const [following, setFollowing] = useState<boolean | undefined>()
 

web/lib/firebase/folds.ts

@@ -154,6 +154,24 @@ export async function getFoldsByTags(tags: string[]) {
   return _.sortBy(folds, (fold) => -1 * fold.followCount)
 }
 
+export function listenForFoldsWithTags(
+  tags: string[],
+  setFolds: (folds: Fold[]) => void
+) {
+  const lowercaseTags = tags.map((tag) => tag.toLowerCase())
+  const q =
+    // TODO: split into multiple queries if tags.length > 10.
+    query(
+      foldCollection,
+      where('lowercaseTags', 'array-contains-any', lowercaseTags)
+    )
+
+  return listenForValues<Fold>(q, (folds) => {
+    const sorted = _.sortBy(folds, (fold) => -1 * fold.followCount)
+    setFolds(sorted)
+  })
+}
+
 export async function getFollowedFolds(userId: string) {
   const snapshot = await getDocs(
     query(collectionGroup(db, 'followers'), where('userId', '==', userId))

web/pages/[username]/[contractSlug].tsx

@@ -25,6 +25,7 @@ import { Comment, listAllComments } from '../../lib/firebase/comments'
 import Custom404 from '../404'
 import { getFoldsByTags } from '../../lib/firebase/folds'
 import { Fold } from '../../../common/fold'
+import { useFoldsWithTags } from '../../hooks/use-fold'
 
 export async function getStaticProps(props: {
   params: { username: string; contractSlug: string }
@@ -71,7 +72,9 @@ export default function ContractPage(props: {
   const user = useUser()
 
   const contract = useContractWithPreload(props.slug, props.contract)
-  const { bets, comments, folds } = props
+  const { bets, comments } = props
+
+  const folds = useFoldsWithTags(contract?.tags) ?? props.folds
 
   if (!contract) {
     return <Custom404 />