Default to 'all' feed category when loading page.

web/components/feed/category-selector.tsx

@@ -3,15 +3,14 @@ import clsx from 'clsx'
 import { User } from '../../../common/user'
 import { Row } from '../layout/row'
 import { CATEGORIES, CATEGORY_LIST } from '../../../common/categories'
-import { updateUser } from '../../lib/firebase/users'
 
 export function CategorySelector(props: {
   user: User | null | undefined
+  category: string
+  setCategory: (category: string) => void
   className?: string
 }) {
-  const { className, user } = props
+  const { className, user, category, setCategory } = props
-
-  const followedCategories = user?.followedCategories ?? []
 
   return (
     <Row
@@ -22,29 +21,23 @@ export function CategorySelector(props: {
     >
       <div />
       <CategoryButton
-        key={'all' + followedCategories.length}
+        key="all"
         category="All"
-        isFollowed={followedCategories.length === 0}
+        isFollowed={category === 'all'}
         toggle={async () => {
           if (!user?.id) return
-
+          setCategory('all')
-          await updateUser(user.id, {
-            followedCategories: [],
-          })
         }}
       />
 
       {CATEGORY_LIST.map((cat) => (
         <CategoryButton
-          key={cat + followedCategories.length}
+          key={cat}
           category={CATEGORIES[cat].split(' ')[0]}
-          isFollowed={followedCategories.includes(cat)}
+          isFollowed={cat === category}
           toggle={async () => {
             if (!user?.id) return
-
+            setCategory(cat)
-            await updateUser(user.id, {
-              followedCategories: [cat],
-            })
           }}
         />
       ))}

web/hooks/use-algo-feed.ts

@@ -10,8 +10,11 @@ import {
   getTopWeeklyContracts,
 } from 'web/lib/firebase/contracts'
 
-export const useAlgoFeed = (user: User | null | undefined) => {
+export const useAlgoFeed = (
-  const [feed, setFeed] = useState<feed>()
+  user: User | null | undefined,
+  category: string
+) => {
+  const [allFeed, setAllFeed] = useState<feed>()
   const [categoryFeeds, setCategoryFeeds] = useState<Dictionary<feed>>()
 
   const getTime = useTimeSinceFirstRender()
@@ -20,11 +23,11 @@ export const useAlgoFeed = (user: User | null | undefined) => {
     if (user) {
       getUserFeed(user.id).then((feed) => {
         if (feed.length === 0) {
-          getDefaultFeed().then((feed) => setFeed(feed))
+          getDefaultFeed().then((feed) => setAllFeed(feed))
-        } else setFeed(feed)
+        } else setAllFeed(feed)
 
         trackLatency('feed', getTime())
-        console.log('feed load time', getTime())
+        console.log('"all" feed load time', getTime())
       })
 
       getCategoryFeeds(user.id).then((feeds) => {
@@ -35,12 +38,9 @@ export const useAlgoFeed = (user: User | null | undefined) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user?.id])
 
-  const followedCategory = user?.followedCategories?.[0] ?? 'all'
+  const feed = category === 'all' ? allFeed : categoryFeeds?.[category]
 
-  const followedFeed =
+  return feed
-    followedCategory === 'all' ? feed : categoryFeeds?.[followedCategory]
-
-  return followedFeed
 }
 
 const getDefaultFeed = async () => {

web/pages/home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Router, { useRouter } from 'next/router'
 import { Page } from 'web/components/page'
 import { ActivityFeed } from 'web/components/feed/activity-feed'
@@ -13,8 +13,9 @@ import { CategorySelector } from '../components/feed/category-selector'
 
 const Home = () => {
   const user = useUser()
+  const [category, setCategory] = useState<string>('all')
 
-  const feed = useAlgoFeed(user)
+  const feed = useAlgoFeed(user, category)
 
   const router = useRouter()
   const { u: username, s: slug } = router.query
@@ -41,7 +42,11 @@ const Home = () => {
         <Col className="mx-auto w-full max-w-[700px]">
           <FeedCreate user={user ?? undefined} />
           <Spacer h={2} />
-          <CategorySelector user={user} />
+          <CategorySelector
+            user={user}
+            category={category}
+            setCategory={setCategory}
+          />
           <Spacer h={1} />
           {feed ? (
             <ActivityFeed