From e7bf2ea1911ac6c24a8bbb5f6aee4ff2f64316a5 Mon Sep 17 00:00:00 2001 From: mantikoros Date: Wed, 4 May 2022 10:45:21 -0400 Subject: [PATCH] category selector component on feed --- common/categories.ts | 14 ++-- common/user.ts | 2 + firestore.rules | 2 +- web/components/feed/category-selector.tsx | 78 +++++++++++++++++++++++ web/pages/home.tsx | 8 ++- 5 files changed, 97 insertions(+), 7 deletions(-) create mode 100644 web/components/feed/category-selector.tsx diff --git a/common/categories.ts b/common/categories.ts index 05fbf2b9..155da2ba 100644 --- a/common/categories.ts +++ b/common/categories.ts @@ -3,13 +3,13 @@ export const CATEGORIES = { personal: 'Personal', friends: 'Friends / Community', technology: 'Technology', - gaming: 'Gaming / Esports', - science: 'Science', - manifold: 'Manifold Markets', - society: 'Society', sports: 'Sports', + gaming: 'Gaming / Esports', + manifold: 'Manifold Markets', + science: 'Science', + society: 'Society', geopolitics: 'Geopolitics', - fun: 'Goofing around', + fun: 'Fun stuff', business: 'Business', finance: 'Finance', crypto: 'Crypto', @@ -24,3 +24,7 @@ export const TO_CATEGORY = Object.fromEntries( ) export const CATEGORY_LIST = Object.keys(CATEGORIES) + +export const FEED_CATEGORY_LIST = Object.keys(CATEGORIES).filter( + (cat) => !['personal', 'friends'].includes(cat) +) diff --git a/common/user.ts b/common/user.ts index 8f8e6d0d..22d452bb 100644 --- a/common/user.ts +++ b/common/user.ts @@ -17,6 +17,8 @@ export type User = { totalDeposits: number totalPnLCached: number creatorVolumeCached: number + + followedCategories?: string[] } export const STARTING_BALANCE = 1000 diff --git a/firestore.rules b/firestore.rules index 28e03e64..d1698fd7 100644 --- a/firestore.rules +++ b/firestore.rules @@ -16,7 +16,7 @@ service cloud.firestore { allow read; allow update: if resource.data.id == request.auth.uid && request.resource.data.diff(resource.data).affectedKeys() - .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']); + .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories']); } match /private-users/{userId} { diff --git a/web/components/feed/category-selector.tsx b/web/components/feed/category-selector.tsx new file mode 100644 index 00000000..ed21aa86 --- /dev/null +++ b/web/components/feed/category-selector.tsx @@ -0,0 +1,78 @@ +import clsx from 'clsx' +import _ from 'lodash' + +import { User } from '../../../common/user' +import { Row } from '../layout/row' +import { CATEGORIES, FEED_CATEGORY_LIST } from '../../../common/categories' +import { updateUser } from '../../lib/firebase/users' + +export function CategorySelector(props: { + user: User | null | undefined + className?: string +}) { + const { className, user } = props + + const followedCategories = user?.followedCategories ?? [] + + return ( + +
Categories
+ + { + if (!user?.id) return + + await updateUser(user.id, { + followedCategories: [], + }) + }} + /> + + {FEED_CATEGORY_LIST.map((cat) => ( + { + if (!user?.id) return + + await updateUser(user.id, { + followedCategories: !followedCategories.includes(cat) + ? _.union([cat], followedCategories) + : _.difference(followedCategories, [cat]), + }) + }} + /> + ))} +
+ ) +} + +function CategoryButton(props: { + category: string + isFollowed: boolean + toggle: () => void +}) { + const { toggle, category, isFollowed } = props + + return ( +
+ {category} +
+ ) +} diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 6f1ec93c..72aeeedf 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -11,6 +11,7 @@ import { useUser } from '../hooks/use-user' import { LoadingIndicator } from '../components/loading-indicator' import { useAlgoFeed } from '../hooks/use-algo-feed' import { ContractPageContent } from './[username]/[contractSlug]' +import { CategorySelector } from '../components/feed/category-selector' const Home = () => { const user = useUser() @@ -42,7 +43,12 @@ const Home = () => { - + + + + + + {feed ? (