diff --git a/web/components/fast-fold-following.tsx b/web/components/fast-fold-following.tsx new file mode 100644 index 00000000..d4d350ee --- /dev/null +++ b/web/components/fast-fold-following.tsx @@ -0,0 +1,107 @@ +import clsx from 'clsx' +import { useState } from 'react' +import { SearchIcon } from '@heroicons/react/outline' + +import { User } from '../../common/user' +import { followFoldFromSlug, unfollowFoldFromSlug } from '../lib/firebase/folds' +import { Row } from './layout/row' +import { Spacer } from './layout/spacer' + +function FollowFoldButton(props: { + fold: { slug: string; name: string } + user: User | null | undefined + isFollowed?: boolean +}) { + const { fold, user, isFollowed } = props + const { slug, name } = fold + + const [followed, setFollowed] = useState(isFollowed) + + const onClick = async () => { + if (followed) { + if (user) await unfollowFoldFromSlug(slug, user.id) + setFollowed(false) + } else { + if (user) await followFoldFromSlug(slug, user.id) + setFollowed(true) + } + } + + return ( +
+ {name} +
+ ) +} + +function FollowFolds(props: { + folds: { slug: string; name: string }[] + followedFoldSlugs: string[] + noLabel?: boolean + className?: string + user: User | null | undefined +}) { + const { folds, noLabel, className, user, followedFoldSlugs } = props + + return ( + + {folds.length > 0 && ( + <> + {!noLabel &&
Communities
} + {folds.map((fold) => ( + + ))} + + )} +
+ ) +} + +export const FastFoldFollowing = (props: { + followedFoldSlugs: string[] + user: User | null | undefined +}) => { + const { followedFoldSlugs, user } = props + + return ( + <> + + + + + + + + ) +} diff --git a/web/components/follow-fold-button.tsx b/web/components/follow-fold-button.tsx index 106b2489..f394aae9 100644 --- a/web/components/follow-fold-button.tsx +++ b/web/components/follow-fold-button.tsx @@ -11,7 +11,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) { const following = useFollowingFold(fold, user) const onFollow = () => { - if (user) followFold(fold, user) + if (user) followFold(fold.id, user.id) } const onUnfollow = () => { diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx index e307c577..7e02d5f9 100644 --- a/web/components/tags-list.tsx +++ b/web/components/tags-list.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx' + import { Row } from './layout/row' import { SiteLink } from './site-link' @@ -47,6 +48,7 @@ export function TagsList(props: { export function FoldTag(props: { fold: { slug: string; name: string } }) { const { fold } = props const { slug, name } = fold + return (
Communities on Manifold are centered around a collection of - markets. + markets. Follow a community to personalize your feed and receive + relevant updates.
diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 6ddba66c..f834e18f 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -17,12 +17,10 @@ import { Fold } from '../../common/fold' import { filterDefined } from '../../common/util/array' import { useUserBetContracts } from '../hooks/use-user-bets' import { LoadingIndicator } from '../components/loading-indicator' -import { FoldTagList } from '../components/tags-list' -import { SearchIcon } from '@heroicons/react/outline' import { Row } from '../components/layout/row' import { SparklesIcon } from '@heroicons/react/solid' import { useFollowedFolds } from '../hooks/use-fold' -import { SiteLink } from '../components/site-link' +import { FastFoldFollowing } from '../components/fast-fold-following' export async function getStaticProps() { let [contracts, folds] = await Promise.all([ @@ -116,39 +114,19 @@ const Home = (props: { - - - - + + {followedFolds.length === 0 && ( + f.slug)} + /> + )} + -
- - Follow a community - {' '} - to personalize -
{activeContracts ? (