Clean up unused parts of answer item

web/components/answers/answer-item.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import _ from 'lodash'
-import { useState } from 'react'
 
 import { Answer } from '../../../common/answer'
 import { DPM, FreeResponse, FullContract } from '../../../common/contract'
@@ -8,19 +7,14 @@ import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Avatar } from '../avatar'
 import { SiteLink } from '../site-link'
-import { BuyButton } from '../yes-no-selector'
 import { formatPercent } from '../../../common/util/format'
 import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
 import { tradingAllowed } from '../../lib/firebase/contracts'
-import { AnswerBetPanel } from './answer-bet-panel'
 import { Linkify } from '../linkify'
-import { User } from '../../../common/user'
-import { ContractActivity } from '../feed/contract-activity'
 
 export function AnswerItem(props: {
   answer: Answer
   contract: FullContract<DPM, FreeResponse>
-  user: User | null | undefined
   showChoice: 'radio' | 'checkbox' | undefined
   chosenProb: number | undefined
   totalChosenProb?: number
@@ -30,7 +24,6 @@ export function AnswerItem(props: {
   const {
     answer,
     contract,
-    user,
     showChoice,
     chosenProb,
     totalChosenProb,
@@ -47,10 +40,6 @@ export function AnswerItem(props: {
   const wasResolvedTo =
     resolution === answer.id || (resolutions && resolutions[answer.id])
 
-  const [isBetting, setIsBetting] = useState(false)
-
-  const canBet = !isBetting && !showChoice && tradingAllowed(contract)
-
   return (
     <div
       className={clsx(
@@ -63,10 +52,8 @@ export function AnswerItem(props: {
           ? 'bg-gray-50'
           : showChoice === 'radio'
           ? 'bg-green-50'
-          : 'bg-blue-50',
+          : 'bg-blue-50'
-        canBet && 'cursor-pointer hover:bg-gray-100'
       )}
-      onClick={() => canBet && setIsBetting(true)}
     >
       <Col className="flex-1 gap-3">
         <div className="whitespace-pre-line">
@@ -83,124 +70,91 @@ export function AnswerItem(props: {
           {/* TODO: Show total pool? */}
           <div className="text-base">#{number}</div>
         </Row>
-
-        {isBetting && (
-          <ContractActivity
-            className="hidden md:flex"
-            contract={contract}
-            bets={[]}
-            comments={[]}
-            user={user}
-            filterToOutcome={answer.id}
-            mode="all"
-          />
-        )}
       </Col>
 
-      {isBetting ? (
+      <Row className="items-center justify-end gap-4 self-end sm:self-start">
-        <AnswerBetPanel
+        {!wasResolvedTo &&
-          answer={answer}
+          (showChoice === 'checkbox' ? (
-          contract={contract}
+            <input
-          closePanel={() => setIsBetting(false)}
+              className="input input-bordered w-24 justify-self-end text-2xl"
-          className="sm:w-72"
+              type="number"
-        />
+              placeholder={`${roundedProb}`}
-      ) : (
+              maxLength={9}
-        <Row className="items-center justify-end gap-4 self-end sm:self-start">
+              value={chosenProb ? Math.round(chosenProb) : ''}
-          {!wasResolvedTo &&
+              onChange={(e) => {
-            (showChoice === 'checkbox' ? (
+                const { value } = e.target
-              <input
+                const numberValue = value
-                className="input input-bordered w-24 justify-self-end text-2xl"
+                  ? parseInt(value.replace(/[^\d]/, ''))
-                type="number"
+                  : 0
-                placeholder={`${roundedProb}`}
+                if (!isNaN(numberValue)) onChoose(answer.id, numberValue)
-                maxLength={9}
+              }}
-                value={chosenProb ? Math.round(chosenProb) : ''}
+            />
-                onChange={(e) => {
-                  const { value } = e.target
-                  const numberValue = value
-                    ? parseInt(value.replace(/[^\d]/, ''))
-                    : 0
-                  if (!isNaN(numberValue)) onChoose(answer.id, numberValue)
-                }}
-              />
-            ) : (
-              <div
-                className={clsx(
-                  'text-2xl',
-                  tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
-                )}
-              >
-                {probPercent}
-              </div>
-            ))}
-          {showChoice ? (
-            <div className="form-control py-1">
-              <label className="label cursor-pointer gap-3">
-                <span className="">Choose this answer</span>
-                {showChoice === 'radio' && (
-                  <input
-                    className={clsx('radio', chosenProb && '!bg-green-500')}
-                    type="radio"
-                    name="opt"
-                    checked={isChosen}
-                    onChange={() => onChoose(answer.id, 1)}
-                    value={answer.id}
-                  />
-                )}
-                {showChoice === 'checkbox' && (
-                  <input
-                    className={clsx('checkbox', chosenProb && '!bg-blue-500')}
-                    type="checkbox"
-                    name="opt"
-                    checked={isChosen}
-                    onChange={() => {
-                      if (isChosen) onDeselect(answer.id)
-                      else {
-                        onChoose(answer.id, 100 * prob)
-                      }
-                    }}
-                    value={answer.id}
-                  />
-                )}
-              </label>
-              {showChoice === 'checkbox' && (
-                <div className="ml-1">
-                  {chosenProb && totalChosenProb
-                    ? Math.round((100 * chosenProb) / totalChosenProb)
-                    : 0}
-                  % share
-                </div>
-              )}
-            </div>
           ) : (
-            <>
+            <div
-              {tradingAllowed(contract) && (
+              className={clsx(
-                <BuyButton
+                'text-2xl',
-                  className="btn-md flex-initial justify-end self-end !px-8"
+                tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
-                  onClick={() => {
+              )}
-                    setIsBetting(true)
+            >
-                  }}
+              {probPercent}
+            </div>
+          ))}
+        {showChoice ? (
+          <div className="form-control py-1">
+            <label className="label cursor-pointer gap-3">
+              <span className="">Choose this answer</span>
+              {showChoice === 'radio' && (
+                <input
+                  className={clsx('radio', chosenProb && '!bg-green-500')}
+                  type="radio"
+                  name="opt"
+                  checked={isChosen}
+                  onChange={() => onChoose(answer.id, 1)}
+                  value={answer.id}
                 />
               )}
-              {wasResolvedTo && (
+              {showChoice === 'checkbox' && (
-                <Col className="items-end">
+                <input
-                  <div
+                  className={clsx('checkbox', chosenProb && '!bg-blue-500')}
-                    className={clsx(
+                  type="checkbox"
-                      'text-xl',
+                  name="opt"
-                      resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
+                  checked={isChosen}
-                    )}
+                  onChange={() => {
-                  >
+                    if (isChosen) onDeselect(answer.id)
-                    Chosen{' '}
+                    else {
-                    {resolutions
+                      onChoose(answer.id, 100 * prob)
-                      ? `${Math.round(resolutions[answer.id])}%`
+                    }
-                      : ''}
+                  }}
-                  </div>
+                  value={answer.id}
-                  <div className="text-2xl text-gray-500">{probPercent}</div>
+                />
-                </Col>
               )}
-            </>
+            </label>
-          )}
+            {showChoice === 'checkbox' && (
-        </Row>
+              <div className="ml-1">
-      )}
+                {chosenProb && totalChosenProb
+                  ? Math.round((100 * chosenProb) / totalChosenProb)
+                  : 0}
+                % share
+              </div>
+            )}
+          </div>
+        ) : (
+          wasResolvedTo && (
+            <Col className="items-end">
+              <div
+                className={clsx(
+                  'text-xl',
+                  resolution === 'MKT' ? 'text-blue-700' : 'text-green-700'
+                )}
+              >
+                Chosen{' '}
+                {resolutions ? `${Math.round(resolutions[answer.id])}%` : ''}
+              </div>
+              <div className="text-2xl text-gray-500">{probPercent}</div>
+            </Col>
+          )
+        )}
+      </Row>
     </div>
   )
 }