From 9480f9f34c19d82d02e5c9003475e9a029c44847 Mon Sep 17 00:00:00 2001
From: Boa <iansphilips@gmail.com>
Date: Wed, 4 May 2022 16:03:06 -0600
Subject: [PATCH] Improve free response answer ux (#131)

* Remove number from chosen FR answer

* Distinguish wining and losing FR answers

* Show no answers text

* Simplify get answer items logic

* Show answer number

* Show answer # when resolving
---
 web/components/answers/answer-item.tsx   |  2 +-
 web/components/answers/answers-panel.tsx | 29 ++++++++++++------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx
index fdeafea0..96746b62 100644
--- a/web/components/answers/answer-item.tsx
+++ b/web/components/answers/answer-item.tsx
@@ -68,7 +68,7 @@ export function AnswerItem(props: {
             </Row>
           </SiteLink>
           {/* TODO: Show total pool? */}
-          <div className="text-base">#{number}</div>
+          <div className="text-base">{showChoice && '#' + number}</div>
         </Row>
       </Col>
 
diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index 3af2c286..f315b514 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -24,7 +24,7 @@ export function AnswersPanel(props: {
   const { creatorId, resolution, resolutions, totalBets } = contract
 
   const answers = useAnswers(contract.id) ?? contract.answers
-  const [winningAnswers, otherAnswers] = _.partition(
+  const [winningAnswers, losingAnswers] = _.partition(
     answers.filter(
       (answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001
     ),
@@ -36,7 +36,7 @@ export function AnswersPanel(props: {
       resolutions ? -1 * resolutions[answer.id] : 0
     ),
     ..._.sortBy(
-      resolution ? [] : otherAnswers,
+      resolution ? [] : losingAnswers,
       (answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id)
     ),
   ]
@@ -52,7 +52,11 @@ export function AnswersPanel(props: {
 
   const chosenTotal = _.sum(Object.values(chosenAnswers))
 
-  const answerItems = getAnswers(contract, user)
+  const answerItems = getAnswerItems(
+    contract,
+    losingAnswers.length > 0 ? losingAnswers : sortedAnswers,
+    user
+  )
 
   const onChoose = (answerId: string, prob: number) => {
     if (resolveOption === 'CHOOSE') {
@@ -89,9 +93,7 @@ export function AnswersPanel(props: {
 
   return (
     <Col className="gap-3">
-      {(resolveOption === 'CHOOSE' ||
-        resolveOption === 'CHOOSE_MULTIPLE' ||
-        resolution === 'MKT') &&
+      {(resolveOption || resolution) &&
         sortedAnswers.map((answer) => (
           <AnswerItem
             key={answer.id}
@@ -105,11 +107,7 @@ export function AnswersPanel(props: {
           />
         ))}
 
-      {sortedAnswers.length === 0 && (
-        <div className="pb-4 text-gray-500">No answers yet...</div>
-      )}
-
-      {!resolveOption && sortedAnswers.length > 0 && (
+      {!resolveOption && (
         <FeedItems
           contract={contract}
           items={answerItems}
@@ -118,6 +116,10 @@ export function AnswersPanel(props: {
         />
       )}
 
+      {answers.length <= 1 && (
+        <div className="pb-4 text-gray-500">No answers yet...</div>
+      )}
+
       {tradingAllowed(contract) &&
         (!resolveOption || resolveOption === 'CANCEL') && (
           <CreateAnswerPanel contract={contract} />
@@ -138,12 +140,11 @@ export function AnswersPanel(props: {
   )
 }
 
-function getAnswers(
+function getAnswerItems(
   contract: FullContract<DPM, FreeResponse>,
+  answers: Answer[],
   user: User | undefined | null
 ) {
-  const { answers } = contract
-
   let outcomes = _.uniq(
     answers.map((answer) => answer.number.toString())
   ).filter((outcome) => getOutcomeProbability(contract, outcome) > 0.0001)