diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx index 9495766f..6b34fcd3 100644 --- a/web/components/contract-search.tsx +++ b/web/components/contract-search.tsx @@ -24,6 +24,8 @@ import { useUser } from 'web/hooks/use-user' import { useFollows } from 'web/hooks/use-follows' import { ChoicesToggleGroup } from './choices-toggle-group' import { EditCategoriesButton } from './feed/category-selector' +import { Col } from './layout/col' +import { CATEGORIES } from 'common/categories' const searchClient = algoliasearch( 'GJQPAYENIF', @@ -115,11 +117,6 @@ export function ContractSearch(props: { follows?.join(','), ]) - const categoriesLabel = `Categories ${ - followedCategories?.length ? followedCategories.length : '(All)' - }` - const followingLabel = `Following ${follows?.length ?? 0}` - const indexName = `${indexPrefix}contracts-${sort}` return ( @@ -160,20 +157,12 @@ export function ContractSearch(props: { {showCategorySelector && ( - - setMode(c as 'categories' | 'following')} - /> - - {mode === 'categories' && user && ( - - )} - + )} @@ -250,3 +239,60 @@ export function ContractSearchInner(props: { /> ) } + +function CategoryFollowSelector(props: { + mode: 'categories' | 'following' + setMode: (mode: 'categories' | 'following') => void + followedCategories: string[] + follows: string[] +}) { + const { mode, setMode, followedCategories, follows } = props + + const user = useUser() + + const categoriesLabel = `Categories ${ + followedCategories.length ? followedCategories.length : '(All)' + }` + + let categoriesDescription = `Showing all categories` + + if (followedCategories.length) { + const categoriesLabel = followedCategories + .slice(0, 3) + .map((cat) => CATEGORIES[cat]) + .join(', ') + const andMoreLabel = + followedCategories.length > 3 + ? `, and ${followedCategories.length - 3} more` + : '' + categoriesDescription = `Showing ${categoriesLabel}${andMoreLabel}` + } + + const followingLabel = `Following ${follows.length}` + + return ( + + setMode(c as 'categories' | 'following')} + /> + + {mode === 'categories' && user && ( + +
{categoriesDescription}
+ +
+ )} + + {mode === 'following' && user && ( + +
Showing markets created by users you are following.
+
+ )} + + ) +} diff --git a/web/components/feed/category-selector.tsx b/web/components/feed/category-selector.tsx index 352746a8..a9e6244a 100644 --- a/web/components/feed/category-selector.tsx +++ b/web/components/feed/category-selector.tsx @@ -80,13 +80,17 @@ function CategoryButton(props: { ) } -export function EditCategoriesButton(props: { user: User }) { - const { user } = props +export function EditCategoriesButton(props: { + user: User + className?: string +}) { + const { user, className } = props const [isOpen, setIsOpen] = useState(false) return (
setIsOpen(true)}