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

@@ -83,15 +83,6 @@ export const ContractOverview = (props: {
       {children}
 
       <Spacer h={4} />
-
-      <ContractActivity
-        contract={contract}
-        bets={bets}
-        comments={comments}
-        user={user}
-        mode="all"
-        betRowClassName="!mt-0 xl:hidden"
-      />
     </Col>
   )
 }

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 = (
+    <ContractActivity
+      contract={contract}
+      bets={bets}
+      comments={comments}
+      user={user}
+      mode="all"
+      betRowClassName="!mt-0 xl:hidden"
+    />
+  )
+
+  if (!user || !userBets?.length) return activity
+
+  const yourTrades = (
+    <div>
+      <MyBetsSummary className="px-2" contract={contract} bets={userBets} />
+      <Spacer h={6} />
+      <ContractBetsTable contract={contract} bets={userBets} />
+      <Spacer h={12} />
+    </div>
+  )
+
+  return (
+    <Tabs
+      tabs={[
+        { title: 'Timeline', content: activity },
+        { title: 'Your trades', content: yourTrades },
+      ]}
+    />
+  )
+}

web/components/layout/tabs.tsx

@@ -17,31 +17,35 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) {
 
   return (
     <div>
-      <nav className="flex space-x-4" aria-label="Tabs">
+      <div className="border-b border-gray-200">
+        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
           {tabs.map((tab, i) => (
             <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>
               <a
                 key={tab.title}
-              className={clsx(
-                tab.title === activeTab.title
-                  ? 'bg-gray-200 text-gray-700'
-                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700',
-                'rounded-md px-3 py-2 text-sm font-medium'
-              )}
-              aria-current={tab.title === activeTab.title ? 'page' : undefined}
                 onClick={(e) => {
                   if (!tab.href) {
                     e.preventDefault()
                   }
                   setActiveIndex(i)
                 }}
+                className={clsx(
+                  activeIndex === i
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                  'cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
+                )}
+                aria-current={activeIndex === i ? 'page' : undefined}
               >
-              {tab.tabIcon ? <span className="mr-2">{tab.tabIcon}</span> : null}
+                {tab.tabIcon ? (
+                  <span className="mr-2">{tab.tabIcon}</span>
+                ) : null}
                 {tab.title}
               </a>
             </Link>
           ))}
         </nav>
+      </div>
 
       <div className="mt-4">{activeTab.content}</div>
     </div>

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: {
             <Spacer h={12} />
           </>
         )}
-        <BetsSection contract={contract} user={user ?? null} bets={bets} />
+
+        <ContractTabs
+          contract={contract}
+          user={user}
+          bets={bets}
+          comments={comments}
+        />
       </Col>
     </Page>
   )
 }
 
-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 (
-    <div>
-      <Title className="px-2" text="Your trades" />
-      <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[]>()