Compute fold follower count from cloud function.

common/fold.ts

@@ -15,4 +15,6 @@ export type Fold = {
   // Default: creatorIds: undefined, excludedCreatorIds: []
   creatorIds?: string[]
   excludedCreatorIds?: string[]
+
+  followCount: number
 }

functions/src/create-fold.ts

@@ -62,10 +62,13 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
       contractIds: [],
       excludedContractIds: [],
       excludedCreatorIds: [],
+      followCount: 0,
     }
 
     await foldRef.create(fold)
 
+    await foldRef.collection('followers').doc(userId).set({ userId })
+
     return { status: 'success', fold }
   }
 )

functions/src/index.ts

@@ -11,6 +11,7 @@ export * from './sell-bet'
 export * from './create-contract'
 export * from './create-user'
 export * from './create-fold'
+export * from './on-fold-follow'
 export * from './unsubscribe'
 export * from './update-contract-metrics'
 export * from './update-user-metrics'

functions/src/on-fold-follow.ts

@@ -0,0 +1,17 @@
+import * as functions from 'firebase-functions'
+import * as admin from 'firebase-admin'
+
+const firestore = admin.firestore()
+
+export const onFoldFollow = functions.firestore
+  .document('folds/{foldId}/followers/{userId}')
+  .onWrite(async (change, context) => {
+    const { foldId } = context.params
+
+    const snapshot = await firestore
+      .collection(`folds/${foldId}/followers`)
+      .get()
+    const followCount = snapshot.size
+
+    await firestore.doc(`folds/${foldId}`).update({ followCount })
+  })

web/pages/folds.tsx

@@ -41,7 +41,8 @@ export default function Folds(props: {
 }) {
   const [curatorsDict, setCuratorsDict] = useState(props.curatorsDict)
 
-  const folds = useFolds() ?? props.folds
+  let folds = useFolds() ?? props.folds
+  folds = _.sortBy(folds, (fold) => -1 * fold.followCount)
   const user = useUser()
 
   useEffect(() => {
@@ -74,9 +75,25 @@ export default function Folds(props: {
 
           <Col className="gap-2">
             {folds.map((fold) => (
+              <FoldCard
+                key={fold.id}
+                fold={fold}
+                curator={curatorsDict[fold.curatorId]}
+              />
+            ))}
+          </Col>
+        </Col>
+      </Col>
+    </Page>
+  )
+}
+
+function FoldCard(props: { fold: Fold; curator: User | undefined }) {
+  const { fold, curator } = props
+  return (
     <Col
       key={fold.id}
-                className="bg-white p-4 rounded-xl gap-1 relative"
+      className="bg-white p-4 rounded-xl gap-1 shadow-md relative"
     >
       <Link href={foldPath(fold)}>
         <a className="absolute left-0 right-0 top-0 bottom-0" />
@@ -86,23 +103,18 @@ export default function Folds(props: {
         <FollowFoldButton className="z-10 mb-1" fold={fold} />
       </Row>
       <Row className="items-center gap-2 text-gray-500 text-sm">
-                  <div>12 followers</div>
+        <div>{fold.followCount} followers</div>
         <div>•</div>
         <Row>
           <div className="mr-1">Curated by</div>
           <UserLink
             className="text-neutral"
-                      name={curatorsDict[fold.curatorId]?.name ?? ''}
+            name={curator?.name ?? ''}
-                      username={curatorsDict[fold.curatorId]?.username ?? ''}
+            username={curator?.username ?? ''}
           />
         </Row>
       </Row>
       <div className="text-gray-500 text-sm">{fold.about}</div>
     </Col>
-            ))}
-          </Col>
-        </Col>
-      </Col>
-    </Page>
   )
 }