manifold/web/components/feed/category-selector.tsx
mantikoros 9a4e5763f5
Categories (#132)
* basic market categories

* use tags to store market category

* display category in market

* display full category

* category selector component on feed

* Move feed data fetching to new file

* Decrease batch size for updating feed to prevent out-of-memory error

* Compute and update category feeds!

* Show feeds based on category tabs

* Add react-query package!

* Use react query to cache contracts

* Remove 'other' category

* Add back personal / friends to feed categories

* Show scrollbar temporarily for categories

* Remove 5 categories, change geopolitics to world

* finance => economics

* Show categories on two lines on larger screens

Co-authored-by: James Grugett <jahooma@gmail.com>
2022-05-12 10:07:10 -05:00

76 lines
1.8 KiB
TypeScript

import clsx from 'clsx'
import _ from 'lodash'
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
className?: string
}) {
const { className, user } = props
const followedCategories = user?.followedCategories ?? []
return (
<Row
className={clsx(
'mr-2 items-center space-x-2 space-y-2 overflow-x-scroll scroll-smooth pt-4 pb-4 sm:flex-wrap',
className
)}
>
<div />
<CategoryButton
key={'all' + followedCategories.length}
category="All"
isFollowed={followedCategories.length === 0}
toggle={async () => {
if (!user?.id) return
await updateUser(user.id, {
followedCategories: [],
})
}}
/>
{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: [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>
)
}