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 (
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 (
-
-
-
-
-
-
-
- )
-}
-
function ContractLeaderboard(props: { contract: Contract; bets: Bet[] }) {
const { contract, bets } = props
const [users, setUsers] = useState()