From b903183fff9f8c00a0f372ccb2ca05141250a184 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 15 Sep 2022 13:47:07 -0700
Subject: [PATCH] Paginate contract bets tab (#881)

* Apply pagination to bets list on contract

* Make contract trades tab number actually match number of entries
---
 web/components/contract/contract-tabs.tsx | 16 ++++++++--
 web/components/feed/contract-activity.tsx | 39 ++++++++++++++++-------
 web/components/feed/feed-liquidity.tsx    | 13 +-------
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 0796dcb2..e4b95d97 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -19,6 +19,10 @@ import { BetSignUpPrompt } from '../sign-up-prompt'
 import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
 import BetButton from '../bet-button'
 import { capitalize } from 'lodash'
+import {
+  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
+  HOUSE_LIQUIDITY_PROVIDER_ID,
+} from 'common/antes'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -37,13 +41,19 @@ export function ContractTabs(props: {
   const visibleBets = bets.filter(
     (bet) => !bet.isAnte && !bet.isRedemption && bet.amount !== 0
   )
-  const visibleLps = lps?.filter((l) => !l.isAnte && l.amount > 0)
+  const visibleLps = (lps ?? []).filter(
+    (l) =>
+      !l.isAnte &&
+      l.userId !== HOUSE_LIQUIDITY_PROVIDER_ID &&
+      l.userId !== DEV_HOUSE_LIQUIDITY_PROVIDER_ID &&
+      l.amount > 0
+  )
 
   // Load comments here, so the badge count will be correct
   const updatedComments = useComments(contract.id)
   const comments = updatedComments ?? props.comments
 
-  const betActivity = visibleLps && (
+  const betActivity = lps != null && (
     <ContractBetsActivity
       contract={contract}
       bets={visibleBets}
@@ -117,7 +127,7 @@ export function ContractTabs(props: {
           {
             title: capitalize(PAST_BETS),
             content: betActivity,
-            badge: `${visibleBets.length}`,
+            badge: `${visibleBets.length + visibleLps.length}`,
           },
           ...(!user || !userBets?.length
             ? []
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
index 55b8a958..b8a003fa 100644
--- a/web/components/feed/contract-activity.tsx
+++ b/web/components/feed/contract-activity.tsx
@@ -1,8 +1,10 @@
+import { useState } from 'react'
 import { Contract, FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import { Answer } from 'common/answer'
 import { Bet } from 'common/bet'
 import { getOutcomeProbability } from 'common/calculate'
+import { Pagination } from 'web/components/pagination'
 import { FeedBet } from './feed-bets'
 import { FeedLiquidity } from './feed-liquidity'
 import { FeedAnswerCommentGroup } from './feed-answer-comment-group'
@@ -19,6 +21,10 @@ export function ContractBetsActivity(props: {
   lps: LiquidityProvision[]
 }) {
   const { contract, bets, lps } = props
+  const [page, setPage] = useState(0)
+  const ITEMS_PER_PAGE = 50
+  const start = page * ITEMS_PER_PAGE
+  const end = start + ITEMS_PER_PAGE
 
   const items = [
     ...bets.map((bet) => ({
@@ -33,24 +39,35 @@ export function ContractBetsActivity(props: {
     })),
   ]
 
-  const sortedItems = sortBy(items, (item) =>
+  const pageItems = sortBy(items, (item) =>
     item.type === 'bet'
       ? -item.bet.createdTime
       : item.type === 'liquidity'
       ? -item.lp.createdTime
       : undefined
-  )
+  ).slice(start, end)
 
   return (
-    <Col className="gap-4">
-      {sortedItems.map((item) =>
-        item.type === 'bet' ? (
-          <FeedBet key={item.id} contract={contract} bet={item.bet} />
-        ) : (
-          <FeedLiquidity key={item.id} liquidity={item.lp} />
-        )
-      )}
-    </Col>
+    <>
+      <Col className="mb-4 gap-4">
+        {pageItems.map((item) =>
+          item.type === 'bet' ? (
+            <FeedBet key={item.id} contract={contract} bet={item.bet} />
+          ) : (
+            <FeedLiquidity key={item.id} liquidity={item.lp} />
+          )
+        )}
+      </Col>
+      <Pagination
+        page={page}
+        itemsPerPage={50}
+        totalItems={items.length}
+        setPage={setPage}
+        scrollToTop
+        nextTitle={'Older'}
+        prevTitle={'Newer'}
+      />
+    </>
   )
 }
 
diff --git a/web/components/feed/feed-liquidity.tsx b/web/components/feed/feed-liquidity.tsx
index 181eb4b7..f4870a4e 100644
--- a/web/components/feed/feed-liquidity.tsx
+++ b/web/components/feed/feed-liquidity.tsx
@@ -9,17 +9,13 @@ import { RelativeTimestamp } from 'web/components/relative-timestamp'
 import React from 'react'
 import { LiquidityProvision } from 'common/liquidity-provision'
 import { UserLink } from 'web/components/user-link'
-import {
-  DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
-  HOUSE_LIQUIDITY_PROVIDER_ID,
-} from 'common/antes'
 
 export function FeedLiquidity(props: {
   className?: string
   liquidity: LiquidityProvision
 }) {
   const { liquidity } = props
-  const { userId, createdTime, isAnte } = liquidity
+  const { userId, createdTime } = liquidity
 
   const isBeforeJune2022 = dayjs(createdTime).isBefore('2022-06-01')
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -28,13 +24,6 @@ export function FeedLiquidity(props: {
   const user = useUser()
   const isSelf = user?.id === userId
 
-  if (
-    isAnte ||
-    userId === HOUSE_LIQUIDITY_PROVIDER_ID ||
-    userId === DEV_HOUSE_LIQUIDITY_PROVIDER_ID
-  )
-    return <></>
-
   return (
     <Row className="items-center gap-2 pt-3">
       {isSelf ? (