From 1f797f491f37c8d9b892299dedba0ecd5e27ec1d Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 17 Apr 2022 21:44:37 -0500
Subject: [PATCH] Show answer text in resolution for market page, card instead
 of number.

---
 web/components/contract/contract-card.tsx     | 66 ++++++++++++++-----
 web/components/contract/contract-overview.tsx | 22 ++++---
 web/components/feed/feed-items.tsx            |  2 +-
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index f1da5956..1d287920 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -22,6 +22,7 @@ import { useState } from 'react'
 import { getProbability } from '../../../common/calculate'
 import { ContractInfoDialog } from './contract-info-dialog'
 import { Bet } from '../../../common/bet'
+import { DPM, FreeResponse, FullContract } from '../../../common/contract'
 
 export function ContractCard(props: {
   contract: Contract
@@ -30,7 +31,7 @@ export function ContractCard(props: {
   className?: string
 }) {
   const { contract, showHotVolume, showCloseTime, className } = props
-  const { question } = contract
+  const { question, outcomeType } = contract
 
   return (
     <div>
@@ -51,20 +52,42 @@ export function ContractCard(props: {
         />
         <Spacer h={3} />
 
-        <Row className="justify-between gap-4">
+        <Row
+          className={clsx(
+            'justify-between gap-4',
+            outcomeType === 'FREE_RESPONSE' && 'flex-col items-start'
+          )}
+        >
           <p
             className="break-words font-medium text-indigo-700"
             style={{ /* For iOS safari */ wordBreak: 'break-word' }}
           >
             {question}
           </p>
-          <ResolutionOrChance className="items-center" contract={contract} />
+          <ResolutionOrChance
+            className={clsx(
+              outcomeType === 'FREE_RESPONSE' ? 'items-start' : 'items-center'
+            )}
+            contract={contract}
+          />
         </Row>
       </div>
     </div>
   )
 }
 
+function getAnswerResolutionText(
+  contract: FullContract<DPM, FreeResponse>,
+  resolution: string
+) {
+  const { answers } = contract
+  const chosen = answers?.find((answer) => answer.id === resolution)
+  if (chosen) {
+    return chosen.text.slice(0, 50)
+  }
+  return undefined
+}
+
 export function ResolutionOrChance(props: {
   contract: Contract
   large?: boolean
@@ -86,18 +109,25 @@ export function ResolutionOrChance(props: {
 
   const probColor = marketClosed ? 'text-gray-400' : 'text-primary'
 
-  const resolutionText =
-    {
-      YES: 'YES',
-      NO: 'NO',
-      MKT: isBinary
-        ? formatPercent(
-            contract.resolutionProbability ?? getProbability(contract)
-          )
-        : 'MULTI',
-      CANCEL: 'N/A',
-      '': '',
-    }[resolution || ''] ?? `#${resolution}`
+  const resolutionText = {
+    YES: 'YES',
+    NO: 'NO',
+    MKT: isBinary
+      ? formatPercent(
+          contract.resolutionProbability ?? getProbability(contract)
+        )
+      : 'MULTI',
+    CANCEL: 'N/A',
+    '': '',
+  }[resolution || '']
+
+  const answerText =
+    resolution &&
+    outcomeType === 'FREE_RESPONSE' &&
+    getAnswerResolutionText(
+      contract as FullContract<DPM, FreeResponse>,
+      resolution
+    )
 
   return (
     <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
@@ -108,7 +138,11 @@ export function ResolutionOrChance(props: {
           >
             Resolved
           </div>
-          <div className={resolutionColor}>{resolutionText}</div>
+          {resolutionText ? (
+            <div className={resolutionColor}>{resolutionText}</div>
+          ) : (
+            <div className={clsx(resolutionColor, 'text-xl')}>{answerText}</div>
+          )}
         </>
       ) : (
         isBinary && (
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 59a0462b..77a234b3 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -20,8 +20,8 @@ export const ContractOverview = (props: {
   comments: Comment[]
   className?: string
 }) => {
-  const { contract, bets, comments, className } = props
-  const { question, resolution, creatorId, outcomeType } = contract
+  const { contract, bets, className } = props
+  const { question, creatorId, outcomeType } = contract
 
   const user = useUser()
   const isCreator = user?.id === creatorId
@@ -35,7 +35,7 @@ export const ContractOverview = (props: {
             <Linkify text={question} />
           </div>
 
-          {(isBinary || resolution) && (
+          {isBinary && (
             <ResolutionOrChance
               className="hidden items-end xl:flex"
               contract={contract}
@@ -44,15 +44,17 @@ export const ContractOverview = (props: {
           )}
         </Row>
 
-        <Row className="items-center justify-between gap-4 xl:hidden">
-          {(isBinary || resolution) && (
+        {isBinary ? (
+          <Row className="items-center justify-between gap-4 xl:hidden">
             <ResolutionOrChance contract={contract} />
-          )}
 
-          {isBinary && tradingAllowed(contract) && (
-            <BetRow contract={contract} labelClassName="hidden" />
-          )}
-        </Row>
+            {tradingAllowed(contract) && (
+              <BetRow contract={contract} labelClassName="hidden" />
+            )}
+          </Row>
+        ) : (
+          <ResolutionOrChance contract={contract} />
+        )}
 
         <ContractDetails
           contract={contract}
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index bb064671..6a7f6763 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -344,7 +344,7 @@ export function FeedQuestion(props: {
               {question}
             </SiteLink>
           </Col>
-          {(isBinary || resolution) && (
+          {isBinary && (
             <ResolutionOrChance className="items-center" contract={contract} />
           )}
         </Col>