fast follow folds

web/components/follow-fold-button.tsx

@@ -11,7 +11,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) {
   const following = useFollowingFold(fold, user)
 
   const onFollow = () => {
-    if (user) followFold(fold, user)
+    if (user) followFold(fold.id, user.id)
   }
 
   const onUnfollow = () => {

web/components/tags-list.tsx

@@ -1,4 +1,6 @@
 import clsx from 'clsx'
+import { useUser } from '../hooks/use-user'
+import { followFold } from '../lib/firebase/folds'
 import { Row } from './layout/row'
 import { SiteLink } from './site-link'
 
@@ -44,9 +46,19 @@ export function TagsList(props: {
   )
 }
 
-export function FoldTag(props: { fold: { slug: string; name: string } }) {
-  const { fold } = props
+export function FoldTag(props: {
+  fold: { slug: string; name: string }
+  isFollowButton?: boolean
+}) {
+  const { fold, isFollowButton } = props
   const { slug, name } = fold
+  const user = useUser()
+  const onClick = isFollowButton
+    ? async () => {
+        await followFold(fold.id, user.id)
+      }
+    : undefined
+
   return (
     <SiteLink href={`/fold/${slug}`} className="flex items-center">
       <div

web/lib/firebase/folds.ts

@@ -118,9 +118,9 @@ export function listenForFold(
   return listenForValue(doc(foldCollection, foldId), setFold)
 }
 
-export function followFold(fold: Fold, user: User) {
-  const followDoc = doc(foldCollection, fold.id, 'followers', user.id)
-  return setDoc(followDoc, { userId: user.id })
+export function followFold(foldId: string, userId: string) {
+  const followDoc = doc(foldCollection, foldId, 'followers', userId)
+  return setDoc(followDoc, { userId })
 }
 
 export function unfollowFold(fold: Fold, user: User) {

web/pages/home.tsx

@@ -123,26 +123,7 @@ const Home = (props: {
         <Col className="w-full max-w-3xl">
           <FeedCreate user={user ?? undefined} />
           <Spacer h={6} />
-          <Row className="mx-3 mb-3 items-center gap-2 text-sm text-gray-800">
-            <SearchIcon className="inline h-5 w-5" aria-hidden="true" />
-            Explore our communities
-          </Row>
-          <FoldTagList
-            className="mx-2"
-            noLabel
-            folds={[
-              { name: 'Politics', slug: 'politics' },
-              { name: 'Crypto', slug: 'crypto' },
-              { name: 'Sports', slug: 'sports' },
-              { name: 'Science', slug: 'science' },
-              { name: 'Covid', slug: 'covid' },
-              { name: 'AI', slug: 'ai' },
-              {
-                name: 'Manifold Markets',
-                slug: 'manifold-markets',
-              },
-            ]}
-          />
+          <FastFoldFollowing />
           <Spacer h={10} />
           <Col className="mx-3 mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
             <Row className="gap-2">
@@ -173,4 +154,31 @@ const Home = (props: {
   )
 }
 
+const FastFoldFollowing = () => {
+  return (
+    <>
+      <Row className="mx-3 mb-3 items-center gap-2 text-sm text-gray-800">
+        <SearchIcon className="inline h-5 w-5" aria-hidden="true" />
+        Personalize your feed — click on a community to follow
+      </Row>
+      <FoldTagList
+        className="mx-2"
+        noLabel
+        folds={[
+          { name: 'Politics', slug: 'politics' },
+          { name: 'Crypto', slug: 'crypto' },
+          { name: 'Sports', slug: 'sports' },
+          { name: 'Science', slug: 'science' },
+          { name: 'Covid', slug: 'covid' },
+          { name: 'AI', slug: 'ai' },
+          {
+            name: 'Manifold Markets',
+            slug: 'manifold-markets',
+          },
+        ]}
+      />
+    </>
+  )
+}
+
 export default Home