From a6e6e2f52f009a2b9dadf3bdbf9edb7c9c77d4c5 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 18 Apr 2022 21:44:31 -0500
Subject: [PATCH] Include top answer in answer card.

---
 web/components/contract/contract-card.tsx     | 59 +++++++++++++++----
 web/components/contract/contract-overview.tsx |  5 +-
 web/pages/embed/[username]/[contractSlug].tsx |  5 +-
 3 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index e7447a6d..c88464bb 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -1,9 +1,10 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import _ from 'lodash'
 import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
 import { TrendingUpIcon } from '@heroicons/react/solid'
 import { Row } from '../layout/row'
-import { formatMoney } from '../../../common/util/format'
+import { formatMoney, formatPercent } from '../../../common/util/format'
 import { UserLink } from '../user-page'
 import {
   Contract,
@@ -30,9 +31,11 @@ import {
   FullContract,
 } from '../../../common/contract'
 import {
+  AnswerLabel,
   BinaryContractOutcomeLabel,
   FreeResponseOutcomeLabel,
 } from '../outcome-label'
+import { getOutcomeProbability } from '../../../common/calculate'
 
 export function ContractCard(props: {
   contract: Contract
@@ -80,10 +83,9 @@ export function ContractCard(props: {
               contract={contract}
             />
           )}
-          {outcomeType === 'FREE_RESPONSE' && resolution && (
-            <FreeResponseResolution
+          {outcomeType === 'FREE_RESPONSE' && (
+            <FreeResponseResolutionOrChance
               contract={contract as FullContract<DPM, FreeResponse>}
-              resolution={resolution}
               truncate="long"
             />
           )}
@@ -130,20 +132,51 @@ export function BinaryResolutionOrChance(props: {
   )
 }
 
-export function FreeResponseResolution(props: {
+function getTopAnswer(contract: FreeResponseContract) {
+  const { answers } = contract
+  const top = _.maxBy(
+    answers.map((answer) => ({
+      answer,
+      prob: getOutcomeProbability(contract, answer.id),
+    })),
+    ({ prob }) => prob
+  )
+  return top?.answer
+}
+
+export function FreeResponseResolutionOrChance(props: {
   contract: FreeResponseContract
-  resolution: string
   truncate: 'short' | 'long' | 'none'
 }) {
-  const { contract, resolution, truncate } = props
+  const { contract, truncate } = props
+  const { resolution } = contract
+
+  const topAnswer = getTopAnswer(contract)
+
   return (
     <Col className="text-xl">
-      <div className={clsx('text-base text-gray-500')}>Resolved</div>
-      <FreeResponseOutcomeLabel
-        contract={contract}
-        resolution={resolution}
-        truncate={truncate}
-      />
+      {resolution ? (
+        <>
+          <div className={clsx('text-base text-gray-500')}>Resolved</div>
+          <FreeResponseOutcomeLabel
+            contract={contract}
+            resolution={resolution}
+            truncate={truncate}
+          />
+        </>
+      ) : (
+        topAnswer && (
+          <Row className="flex-1 items-center justify-between gap-6">
+            <AnswerLabel answer={topAnswer} truncate={truncate} />
+            <Col className="text-primary">
+              <div>
+                {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
+              </div>
+              <div className="text-base">chance</div>
+            </Col>
+          </Row>
+        )
+      )}
     </Col>
   )
 }
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 9d795fcb..c928c1d7 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -7,7 +7,7 @@ import { Row } from '../layout/row'
 import { Linkify } from '../linkify'
 import clsx from 'clsx'
 import {
-  FreeResponseResolution,
+  FreeResponseResolutionOrChance,
   ContractDetails,
   BinaryResolutionOrChance,
 } from './contract-card'
@@ -59,9 +59,8 @@ export const ContractOverview = (props: {
         ) : (
           outcomeType === 'FREE_RESPONSE' &&
           resolution && (
-            <FreeResponseResolution
+            <FreeResponseResolutionOrChance
               contract={contract}
-              resolution={resolution}
               truncate="none"
             />
           )
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 3a7142ba..fe363146 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -10,7 +10,7 @@ import { AnswersGraph } from '../../../components/answers/answers-graph'
 import {
   BinaryResolutionOrChance,
   ContractDetails,
-  FreeResponseResolution,
+  FreeResponseResolutionOrChance,
 } from '../../../components/contract/contract-card'
 import { ContractProbGraph } from '../../../components/contract/contract-prob-graph'
 import { Col } from '../../../components/layout/col'
@@ -122,9 +122,8 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
           {isBinary && <BinaryResolutionOrChance contract={contract} />}
 
           {outcomeType === 'FREE_RESPONSE' && resolution && (
-            <FreeResponseResolution
+            <FreeResponseResolutionOrChance
               contract={contract}
-              resolution={resolution}
               truncate="long"
             />
           )}