From 5219a63667b4192cb086cad6ed8ddb6285ca1810 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 13 Sep 2022 22:53:19 -0500
Subject: [PATCH] Extract component for ProbChangeRow

---
 web/components/contract/prob-change-table.tsx | 41 ++++++++-----------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx
index 49216b88..47fcf7d2 100644
--- a/web/components/contract/prob-change-table.tsx
+++ b/web/components/contract/prob-change-table.tsx
@@ -35,40 +35,33 @@ export function ProbChangeTable(props: {
     <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
       <Col className="flex-1 divide-y">
         {filteredPositiveChanges.map((contract) => (
-          <Row className="items-center hover:bg-gray-100">
-            <ProbChange
-              className="p-4 text-right text-xl"
-              contract={contract}
-            />
-            <SiteLink
-              className="p-4 pl-2 font-semibold text-indigo-700"
-              href={contractPath(contract)}
-            >
-              <span className="line-clamp-2">{contract.question}</span>
-            </SiteLink>
-          </Row>
+          <ProbChangeRow key={contract.id} contract={contract} />
         ))}
       </Col>
       <Col className="flex-1 divide-y">
         {filteredNegativeChanges.map((contract) => (
-          <Row className="items-center hover:bg-gray-100">
-            <ProbChange
-              className="p-4 text-right text-xl"
-              contract={contract}
-            />
-            <SiteLink
-              className="p-4 pl-2 font-semibold text-indigo-700"
-              href={contractPath(contract)}
-            >
-              <span className="line-clamp-2">{contract.question}</span>
-            </SiteLink>
-          </Row>
+          <ProbChangeRow key={contract.id} contract={contract} />
         ))}
       </Col>
     </Col>
   )
 }
 
+function ProbChangeRow(props: { contract: CPMMContract }) {
+  const { contract } = props
+  return (
+    <Row className="items-center hover:bg-gray-100">
+      <ProbChange className="p-4 text-right text-xl" contract={contract} />
+      <SiteLink
+        className="p-4 pl-2 font-semibold text-indigo-700"
+        href={contractPath(contract)}
+      >
+        <span className="line-clamp-2">{contract.question}</span>
+      </SiteLink>
+    </Row>
+  )
+}
+
 export function ProbChange(props: {
   contract: CPMMContract
   className?: string