category selector component on feed

This commit is contained in:
mantikoros 2022-05-04 10:45:21 -04:00
parent ea1cc717c3
commit e7bf2ea191
5 changed files with 97 additions and 7 deletions

View File

@ -3,13 +3,13 @@ export const CATEGORIES = {
personal: 'Personal', personal: 'Personal',
friends: 'Friends / Community', friends: 'Friends / Community',
technology: 'Technology', technology: 'Technology',
gaming: 'Gaming / Esports',
science: 'Science',
manifold: 'Manifold Markets',
society: 'Society',
sports: 'Sports', sports: 'Sports',
gaming: 'Gaming / Esports',
manifold: 'Manifold Markets',
science: 'Science',
society: 'Society',
geopolitics: 'Geopolitics', geopolitics: 'Geopolitics',
fun: 'Goofing around', fun: 'Fun stuff',
business: 'Business', business: 'Business',
finance: 'Finance', finance: 'Finance',
crypto: 'Crypto', crypto: 'Crypto',
@ -24,3 +24,7 @@ export const TO_CATEGORY = Object.fromEntries(
) )
export const CATEGORY_LIST = Object.keys(CATEGORIES) export const CATEGORY_LIST = Object.keys(CATEGORIES)
export const FEED_CATEGORY_LIST = Object.keys(CATEGORIES).filter(
(cat) => !['personal', 'friends'].includes(cat)
)

View File

@ -17,6 +17,8 @@ export type User = {
totalDeposits: number totalDeposits: number
totalPnLCached: number totalPnLCached: number
creatorVolumeCached: number creatorVolumeCached: number
followedCategories?: string[]
} }
export const STARTING_BALANCE = 1000 export const STARTING_BALANCE = 1000

View File

@ -16,7 +16,7 @@ service cloud.firestore {
allow read; allow read;
allow update: if resource.data.id == request.auth.uid allow update: if resource.data.id == request.auth.uid
&& request.resource.data.diff(resource.data).affectedKeys() && request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']); .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories']);
} }
match /private-users/{userId} { match /private-users/{userId} {

View File

@ -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 (
<Row
className={clsx(
'carousel carousel-center mx-2 items-center space-x-2 pt-4 pb-4',
className
)}
>
<div className="mr-1 hidden text-gray-500 sm:flex">Categories</div>
<CategoryButton
key={'all' + followedCategories.length}
category="All"
isFollowed={followedCategories.length === 0}
toggle={async () => {
if (!user?.id) return
await updateUser(user.id, {
followedCategories: [],
})
}}
/>
{FEED_CATEGORY_LIST.map((cat) => (
<CategoryButton
key={cat + followedCategories.length}
category={CATEGORIES[cat].split(' ')[0]}
isFollowed={followedCategories.includes(cat)}
toggle={async () => {
if (!user?.id) return
await updateUser(user.id, {
followedCategories: !followedCategories.includes(cat)
? _.union([cat], followedCategories)
: _.difference(followedCategories, [cat]),
})
}}
/>
))}
</Row>
)
}
function CategoryButton(props: {
category: string
isFollowed: boolean
toggle: () => void
}) {
const { toggle, category, isFollowed } = props
return (
<div
className={clsx(
'rounded-full border-2 px-4 py-1 shadow-md',
'cursor-pointer',
isFollowed ? 'border-gray-300 bg-gray-300' : 'bg-white'
)}
onClick={toggle}
>
<span className="text-sm text-gray-500">{category}</span>
</div>
)
}

View File

@ -11,6 +11,7 @@ import { useUser } from '../hooks/use-user'
import { LoadingIndicator } from '../components/loading-indicator' import { LoadingIndicator } from '../components/loading-indicator'
import { useAlgoFeed } from '../hooks/use-algo-feed' import { useAlgoFeed } from '../hooks/use-algo-feed'
import { ContractPageContent } from './[username]/[contractSlug]' import { ContractPageContent } from './[username]/[contractSlug]'
import { CategorySelector } from '../components/feed/category-selector'
const Home = () => { const Home = () => {
const user = useUser() const user = useUser()
@ -42,7 +43,12 @@ const Home = () => {
<Col className="items-center"> <Col className="items-center">
<Col className="w-full max-w-[700px]"> <Col className="w-full max-w-[700px]">
<FeedCreate user={user ?? undefined} /> <FeedCreate user={user ?? undefined} />
<Spacer h={10} /> <Spacer h={2} />
<CategorySelector user={user} />
<Spacer h={1} />
{feed ? ( {feed ? (
<ActivityFeed <ActivityFeed
feed={feed} feed={feed}