9a4e5763f5
* 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>
76 lines
1.8 KiB
TypeScript
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>
|
|
)
|
|
}
|