import clsx from 'clsx' import { useEffect, useState } from 'react' import { NextRouter, useRouter } from 'next/router' import { LinkIcon } from '@heroicons/react/solid' import { ChatIcon, FolderIcon, PencilIcon, ScaleIcon, } from '@heroicons/react/outline' import { User } from 'web/lib/firebase/users' import { useUser } from 'web/hooks/use-user' import { CreatorContractsList } from './contract/contracts-grid' import { SEO } from './SEO' import { Page } from './page' import { SiteLink } from './site-link' import { Avatar } from './avatar' import { Col } from './layout/col' import { Linkify } from './linkify' import { Spacer } from './layout/spacer' import { Row } from './layout/row' import { genHash } from 'common/util/random' import { QueryUncontrolledTabs } from './layout/tabs' import { UserCommentsList } from './comments-list' import { FullscreenConfetti } from 'web/components/fullscreen-confetti' import { BetsList } from './bets-list' import { FollowersButton, FollowingButton } from './following-button' import { UserFollowButton } from './follow-button' import { GroupsButton } from 'web/components/groups/groups-button' import { PortfolioValueSection } from './portfolio/portfolio-value-section' import { formatMoney } from 'common/util/format' import { BettingStreakModal, hasCompletedStreakToday, } from 'web/components/profile/betting-streak-modal' import { LoansModal } from './profile/loans-modal' export function UserPage(props: { user: User }) { const { user } = props const router = useRouter() const currentUser = useUser() const isCurrentUser = user.id === currentUser?.id const [showConfetti, setShowConfetti] = useState(false) useEffect(() => { const claimedMana = router.query['claimed-mana'] === 'yes' setShowConfetti(claimedMana) const query = { ...router.query } if (query.claimedMana || query.show) { delete query['claimed-mana'] delete query['show'] router.replace( { pathname: router.pathname, query, }, undefined, { shallow: true } ) } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const profit = user.profitCached.allTime return ( {showConfetti && ( )} {isCurrentUser && (
{' '}
)}
{user.name} @{user.username} {isCurrentUser && ( )} {!isCurrentUser && }
{user.bio && ( <>
)} {(user.website || user.twitterHandle || user.discordHandle) && ( {user.website && ( {user.website} )} {user.twitterHandle && ( Twitter {user.twitterHandle} )} {user.discordHandle && ( Discord {user.discordHandle} )} )} , content: ( <> ), }, { title: 'Portfolio', tabIcon: , content: ( <> ), }, { title: 'Comments', tabIcon: , content: ( <> ), }, ]} />
) } // Assign each user to a random default banner based on the hash of userId // TODO: Consider handling banner uploads using our own storage bucket, like user avatars. export function defaultBannerUrl(userId: string) { const defaultBanner = [ 'https://images.unsplash.com/photo-1501523460185-2aa5d2a0f981?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2131&q=80', 'https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80', 'https://images.unsplash.com/photo-1558517259-165ae4b10f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2080&q=80', 'https://images.unsplash.com/photo-1563260797-cb5cd70254c8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80', 'https://images.unsplash.com/photo-1603399587513-136aa9398f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1467&q=80', ] return defaultBanner[genHash(userId)() % defaultBanner.length] } export function ProfilePrivateStats(props: { currentUser: User | null | undefined profit: number user: User router: NextRouter }) { const { currentUser, profit, user, router } = props const [showBettingStreakModal, setShowBettingStreakModal] = useState(false) const [showLoansModal, setShowLoansModal] = useState(false) useEffect(() => { const showBettingStreak = router.query['show'] === 'betting-streak' setShowBettingStreakModal(showBettingStreak) const showLoansModel = router.query['show'] === 'loans' setShowLoansModal(showLoansModel) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( <> = 0 ? 'text-green-600' : 'text-red-400')} > {formatMoney(profit)} profit setShowBettingStreakModal(true)} > 🔥 {user.currentBettingStreak ?? 0} streak setShowLoansModal(true)} > 🏦 {formatMoney(user.nextLoanCached ?? 0)} next loan {BettingStreakModal && ( )} {showLoansModal && ( )} ) } export function ProfilePublicStats(props: { user: User; className?: string }) { const { user, className } = props return ( {/* */} {/* */} ) }