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 && (
{user.twitterHandle}
)}
{user.discordHandle && (
{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 (
{/* */}
{/* */}
)
}