From 1d501ff88dc282d700a7c3d2a38443e7addf67ad Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 14 Sep 2022 15:39:13 -0500
Subject: [PATCH] Daily movers page

---
 web/components/contract/prob-change-table.tsx |  8 +++++--
 web/pages/experimental/daily-movers.tsx       | 21 +++++++++++++++++++
 web/pages/experimental/home/index.tsx         |  4 ++--
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 web/pages/experimental/daily-movers.tsx

diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx
index 47fcf7d2..16de0d44 100644
--- a/web/components/contract/prob-change-table.tsx
+++ b/web/components/contract/prob-change-table.tsx
@@ -11,8 +11,9 @@ export function ProbChangeTable(props: {
   changes:
     | { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] }
     | undefined
+  full?: boolean
 }) {
-  const { changes } = props
+  const { changes, full } = props
 
   if (!changes) return <LoadingIndicator />
 
@@ -24,7 +25,10 @@ export function ProbChangeTable(props: {
     negativeChanges.findIndex((c) => c.probChanges.day > -threshold) + 1
   )
   const maxRows = Math.min(positiveChanges.length, negativeChanges.length)
-  const rows = Math.min(3, Math.min(maxRows, countOverThreshold))
+  const rows = Math.min(
+    full ? Infinity : 3,
+    Math.min(maxRows, countOverThreshold)
+  )
 
   const filteredPositiveChanges = positiveChanges.slice(0, rows)
   const filteredNegativeChanges = negativeChanges.slice(0, rows)
diff --git a/web/pages/experimental/daily-movers.tsx b/web/pages/experimental/daily-movers.tsx
new file mode 100644
index 00000000..1e5b4c48
--- /dev/null
+++ b/web/pages/experimental/daily-movers.tsx
@@ -0,0 +1,21 @@
+import { ProbChangeTable } from 'web/components/contract/prob-change-table'
+import { Col } from 'web/components/layout/col'
+import { Page } from 'web/components/page'
+import { Title } from 'web/components/title'
+import { useProbChanges } from 'web/hooks/use-prob-changes'
+import { useUser } from 'web/hooks/use-user'
+
+export default function DailyMovers() {
+  const user = useUser()
+
+  const changes = useProbChanges(user?.id ?? '')
+
+  return (
+    <Page>
+      <Col className="pm:mx-10 gap-4 sm:px-4 sm:pb-4">
+        <Title className="mx-4 !mb-0 sm:mx-0" text="Daily movers" />
+        <ProbChangeTable changes={changes} full />
+      </Col>
+    </Page>
+  )
+}
diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index d1391dc1..b425bf03 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -61,7 +61,7 @@ export default function Home() {
           </Row>
         </Row>
 
-        <Row className={'w-full items-center gap-8'}>
+        <Row className={'mb-2 w-full items-center gap-8'}>
           <SearchRow />
           <DailyProfitAndBalance className="" user={user} />
         </Row>
@@ -197,7 +197,7 @@ function DailyMoversSection(props: { userId: string | null | undefined }) {
 
   return (
     <Col className="gap-2">
-      <SectionHeader label="Daily movers" href="daily-movers" />
+      <SectionHeader label="Daily movers" href="/experimental/daily-movers" />
       <ProbChangeTable changes={changes} />
     </Col>
   )