category selector component on feed
This commit is contained in:
parent
ea1cc717c3
commit
e7bf2ea191
|
@ -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)
|
||||||
|
)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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} {
|
||||||
|
|
78
web/components/feed/category-selector.tsx
Normal file
78
web/components/feed/category-selector.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user