import clsx from 'clsx' import { PencilIcon } from '@heroicons/react/outline' import { union, difference } from 'lodash' import { Row } from '../layout/row' import { CATEGORIES, CATEGORY_LIST } from '../../../common/categories' import { Modal } from '../layout/modal' import { Col } from '../layout/col' import { useState } from 'react' import { updateUser, User } from 'web/lib/firebase/users' import { Checkbox } from '../checkbox' import { track } from 'web/lib/service/analytics' export function CategorySelector(props: { category: string setCategory: (category: string) => void className?: string }) { const { className, category, setCategory } = props return (
{ setCategory('all') }} /> { setCategory('following') }} /> {CATEGORY_LIST.map((cat) => ( { setCategory(cat) }} /> ))} ) } function CategoryButton(props: { category: string isFollowed: boolean toggle: () => void className?: string }) { const { toggle, category, isFollowed, className } = props return (
{category}
) } export function EditCategoriesButton(props: { user: User className?: string }) { const { user, className } = props const [isOpen, setIsOpen] = useState(false) return (
{ setIsOpen(true) track('edit categories button') }} > Categories
) } function CategorySelectorModal(props: { user: User isOpen: boolean setIsOpen: (isOpen: boolean) => void }) { const { user, isOpen, setIsOpen } = props const followedCategories = user?.followedCategories === undefined ? CATEGORY_LIST : user.followedCategories const selectAll = user.followedCategories === undefined || followedCategories.length < CATEGORY_LIST.length return ( {CATEGORY_LIST.map((cat) => ( { updateUser(user.id, { followedCategories: checked ? difference(followedCategories, [cat]) : union([cat], followedCategories), }) }} /> ))} ) }