From ab41404d077815889525c79584c8ff89012b1244 Mon Sep 17 00:00:00 2001 From: mantikoros <95266179+mantikoros@users.noreply.github.com> Date: Fri, 8 Apr 2022 16:13:10 -0500 Subject: [PATCH] contract tabs: separate market timeline from your trades (#76) * contract tabs: separate market timeline from your trades * contract tabs: use pre-existing tab component * tab styling --- web/components/contract/contract-overview.tsx | 9 --- web/components/contract/contract-tabs.tsx | 57 +++++++++++++++++++ web/components/layout/tabs.tsx | 54 ++++++++++-------- web/pages/[username]/[contractSlug].tsx | 40 +++---------- 4 files changed, 95 insertions(+), 65 deletions(-) create mode 100644 web/components/contract/contract-tabs.tsx diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx index d0b768ec..5537e240 100644 --- a/web/components/contract/contract-overview.tsx +++ b/web/components/contract/contract-overview.tsx @@ -83,15 +83,6 @@ export const ContractOverview = (props: { {children} - - ) } diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx new file mode 100644 index 00000000..0168bc8d --- /dev/null +++ b/web/components/contract/contract-tabs.tsx @@ -0,0 +1,57 @@ +import { useState } from 'react' +import clsx from 'clsx' + +import { Bet } from '../../../common/bet' +import { Contract } from '../../../common/contract' +import { Comment } from '../../lib/firebase/comments' +import { User } from '../../../common/user' +import { useBets } from '../../hooks/use-bets' +import { ContractActivity } from '../feed/contract-activity' +import { ContractBetsTable, MyBetsSummary } from '../bets-list' +import { Spacer } from '../layout/spacer' +import { Tabs } from '../layout/tabs' + +export function ContractTabs(props: { + contract: Contract + user: User | null | undefined + bets: Bet[] + comments: Comment[] +}) { + const { contract, user, comments } = props + + const bets = useBets(contract.id) ?? props.bets + // Decending creation time. + bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) + const userBets = user && bets.filter((bet) => bet.userId === user.id) + + const activity = ( + + ) + + if (!user || !userBets?.length) return activity + + const yourTrades = ( +
+ + + + +
+ ) + + return ( + + ) +} diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx index 575a9f0b..45b6a7d7 100644 --- a/web/components/layout/tabs.tsx +++ b/web/components/layout/tabs.tsx @@ -17,31 +17,35 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) { return (
- +
{activeTab.content}
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 743de707..2fcf0430 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -6,8 +6,6 @@ import { BetPanel } from '../../components/bet-panel' import { Col } from '../../components/layout/col' import { useUser } from '../../hooks/use-user' import { ResolutionPanel } from '../../components/resolution-panel' -import { ContractBetsTable, MyBetsSummary } from '../../components/bets-list' -import { useBets } from '../../hooks/use-bets' import { Title } from '../../components/title' import { Spacer } from '../../components/layout/spacer' import { listUsers, User } from '../../lib/firebase/users' @@ -25,17 +23,17 @@ import { Comment, listAllComments } from '../../lib/firebase/comments' import Custom404 from '../404' import { getFoldsByTags } from '../../lib/firebase/folds' import { Fold } from '../../../common/fold' -import { useFoldsWithTags } from '../../hooks/use-fold' import { listAllAnswers } from '../../lib/firebase/answers' import { Answer } from '../../../common/answer' import { AnswersPanel } from '../../components/answers/answers-panel' import { fromPropz, usePropz } from '../../hooks/use-propz' import { Leaderboard } from '../../components/leaderboard' import _ from 'lodash' -import { calculatePayout, resolvedPayout } from '../../../common/calculate' +import { resolvedPayout } from '../../../common/calculate' import { formatMoney } from '../../../common/util/format' import { FeedBet, FeedComment } from '../../components/feed/feed-items' import { useUserById } from '../../hooks/use-users' +import { ContractTabs } from '../../components/contract/contract-tabs' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { @@ -168,38 +166,18 @@ export default function ContractPage(props: { )} - + + ) } -function BetsSection(props: { - contract: Contract - user: User | null - bets: Bet[] -}) { - const { contract, user } = props - const bets = useBets(contract.id) ?? props.bets - - // Decending creation time. - bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime) - - const userBets = user && bets.filter((bet) => bet.userId === user.id) - - if (!userBets || userBets.length === 0) return <> - - return ( -
- - <MyBetsSummary className="px-2" contract={contract} bets={userBets} /> - <Spacer h={6} /> - <ContractBetsTable contract={contract} bets={userBets} /> - <Spacer h={12} /> - </div> - ) -} - function ContractLeaderboard(props: { contract: Contract; bets: Bet[] }) { const { contract, bets } = props const [users, setUsers] = useState<User[]>()