import React, { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { debounce, sortBy, take } from 'lodash'
import { SearchIcon } from '@heroicons/react/outline'
import { toast } from 'react-hot-toast'
import { Group, GROUP_CHAT_SLUG } from 'common/group'
import { Page } from 'web/components/page'
import { listAllBets } from 'web/lib/firebase/bets'
import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
import {
addContractToGroup,
getGroupBySlug,
groupPath,
joinGroup,
listMembers,
updateGroup,
} from 'web/lib/firebase/groups'
import { Row } from 'web/components/layout/row'
import { firebaseLogin, getUser, User } from 'web/lib/firebase/users'
import { Col } from 'web/components/layout/col'
import { useUser } from 'web/hooks/use-user'
import { useGroup, useGroupContractIds, useMembers } from 'web/hooks/use-group'
import { scoreCreators, scoreTraders } from 'common/scoring'
import { Leaderboard } from 'web/components/leaderboard'
import { formatMoney } from 'common/util/format'
import { EditGroupButton } from 'web/components/groups/edit-group-button'
import Custom404 from '../../404'
import { SEO } from 'web/components/SEO'
import { Linkify } from 'web/components/linkify'
import { fromPropz, usePropz } from 'web/hooks/use-propz'
import { Tabs } from 'web/components/layout/tabs'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { Modal } from 'web/components/layout/modal'
import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
import { ContractSearch } from 'web/components/contract-search'
import { FollowList } from 'web/components/follow-list'
import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
import { searchInAny } from 'common/util/parse'
import { CopyLinkButton } from 'web/components/copy-link-button'
import { ENV_CONFIG } from 'common/envs/constants'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { Button } from 'web/components/button'
import { listAllCommentsOnGroup } from 'web/lib/firebase/comments'
import { GroupComment } from 'common/comment'
import { REFERRAL_AMOUNT } from 'common/economy'
import { UserLink } from 'web/components/user-link'
import { GroupAboutPost } from 'web/components/groups/group-about-post'
import { getPost } from 'web/lib/firebase/posts'
import { Post } from 'common/post'
import { Spacer } from 'web/components/layout/spacer'
import { usePost } from 'web/hooks/use-post'
import { useAdmin } from 'web/hooks/use-admin'
export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: { params: { slugs: string[] } }) {
const { slugs } = props.params
const group = await getGroupBySlug(slugs[0])
const members = group && (await listMembers(group))
const creatorPromise = group ? getUser(group.creatorId) : null
const contracts =
(group && (await listContractsByGroupSlug(group.slug))) ?? []
const now = Date.now()
const suggestedFilter =
contracts.filter((c) => (c.closeTime ?? 0) > now).length < 5
? 'all'
: 'open'
const aboutPost =
group && group.aboutPostId != null && (await getPost(group.aboutPostId))
const bets = await Promise.all(
contracts.map((contract: Contract) => listAllBets(contract.id))
)
const messages = group && (await listAllCommentsOnGroup(group.id))
const creatorScores = scoreCreators(contracts)
const traderScores = scoreTraders(contracts, bets)
const [topCreators, topTraders] =
(members && [
toTopUsers(creatorScores, members),
toTopUsers(traderScores, members),
]) ??
[]
const creator = await creatorPromise
// Only count unresolved markets
const contractsCount = contracts.filter((c) => !c.isResolved).length
return {
props: {
contractsCount,
group,
members,
creator,
traderScores,
topTraders,
creatorScores,
topCreators,
messages,
aboutPost,
suggestedFilter,
},
revalidate: 60, // regenerate after a minute
}
}
function toTopUsers(userScores: { [userId: string]: number }, users: User[]) {
const topUserPairs = take(
sortBy(Object.entries(userScores), ([_, score]) => -1 * score),
10
).filter(([_, score]) => score >= 0.5)
const topUsers = topUserPairs.map(
([userId]) => users.filter((user) => user.id === userId)[0]
)
return topUsers.filter((user) => user)
}
export async function getStaticPaths() {
return { paths: [], fallback: 'blocking' }
}
const groupSubpages = [
undefined,
GROUP_CHAT_SLUG,
'markets',
'leaderboards',
'about',
] as const
export default function GroupPage(props: {
contractsCount: number
group: Group | null
members: User[]
creator: User
traderScores: { [userId: string]: number }
topTraders: User[]
creatorScores: { [userId: string]: number }
topCreators: User[]
messages: GroupComment[]
aboutPost: Post
suggestedFilter: 'open' | 'all'
}) {
props = usePropz(props, getStaticPropz) ?? {
contractsCount: 0,
group: null,
members: [],
creator: null,
traderScores: {},
topTraders: [],
creatorScores: {},
topCreators: [],
messages: [],
suggestedFilter: 'open',
}
const {
contractsCount,
creator,
traderScores,
topTraders,
creatorScores,
topCreators,
suggestedFilter,
} = props
const router = useRouter()
const { slugs } = router.query as { slugs: string[] }
const page = slugs?.[1] as typeof groupSubpages[number]
const group = useGroup(props.group?.id) ?? props.group
const aboutPost = usePost(props.aboutPost?.id) ?? props.aboutPost
const user = useUser()
const isAdmin = useAdmin()
const members = useMembers(group?.id) ?? props.members
useSaveReferral(user, {
defaultReferrerUsername: creator.username,
groupId: group?.id,
})
if (group === null || !groupSubpages.includes(page) || slugs[2]) {
return