diff --git a/web/components/feed/category-selector.tsx b/web/components/feed/category-selector.tsx index 27abcbdb..4b3215d9 100644 --- a/web/components/feed/category-selector.tsx +++ b/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 followedCategories = user?.followedCategories ?? [] + const { className, user, category, setCategory } = props return (
{ if (!user?.id) return - - await updateUser(user.id, { - followedCategories: [], - }) + setCategory('all') }} /> {CATEGORY_LIST.map((cat) => ( { if (!user?.id) return - - await updateUser(user.id, { - followedCategories: [cat], - }) + setCategory(cat) }} /> ))} diff --git a/web/hooks/use-algo-feed.ts b/web/hooks/use-algo-feed.ts index 3e19e83b..5f712fae 100644 --- a/web/hooks/use-algo-feed.ts +++ b/web/hooks/use-algo-feed.ts @@ -10,8 +10,11 @@ import { getTopWeeklyContracts, } from 'web/lib/firebase/contracts' -export const useAlgoFeed = (user: User | null | undefined) => { - const [feed, setFeed] = useState() +export const useAlgoFeed = ( + user: User | null | undefined, + category: string +) => { + const [allFeed, setAllFeed] = useState() const [categoryFeeds, setCategoryFeeds] = useState>() 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)) - } else setFeed(feed) + getDefaultFeed().then((feed) => setAllFeed(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 = - followedCategory === 'all' ? feed : categoryFeeds?.[followedCategory] - - return followedFeed + return feed } const getDefaultFeed = async () => { diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 0ee456d0..8cb02da8 100644 --- a/web/pages/home.tsx +++ b/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('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 = () => { - + {feed ? (