Change list view (manifoldmarkets#1702)

* adding table and list and things
YSaxon · Apr 25, 2023 · 300aead · 300aead
1 parent 3f10660
commit 300aead
Show file tree

Hide file tree

Showing 27 changed files with 816 additions and 403 deletions.
diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx
@@ -20,6 +20,7 @@ export function AnswerItem(props: {
   totalChosenProb?: number
   onChoose: (answerId: string, prob: number) => void
   onDeselect: (answerId: string) => void
+  isInModal?: boolean
 }) {
   const {
     answer,
@@ -29,6 +30,7 @@ export function AnswerItem(props: {
     totalChosenProb,
     onChoose,
     onDeselect,
+    isInModal,
   } = props
   const { resolution, resolutions } = contract
   const { username, avatarUrl, name, number, text } = answer
@@ -43,7 +45,8 @@ export function AnswerItem(props: {
   return (
     <div
       className={clsx(
-        'flex flex-col gap-4 rounded p-4 sm:flex-row',
+        'flex flex-col gap-4 rounded p-4',
+        isInModal ? '' : 'sm:flex-row',
         wasResolvedTo
           ? resolution === 'MKT'
             ? 'mb-2 bg-blue-500/20'
@@ -72,7 +75,12 @@ export function AnswerItem(props: {
         </Row>
       </Col>
 
-      <Row className="items-center justify-end gap-4 self-end sm:self-start">
+      <Row
+        className={clsx(
+          'items-center justify-end gap-4 self-end',
+          isInModal ? '' : 'sm:self-start'
+        )}
+      >
         {!wasResolvedTo &&
           (showChoice === 'checkbox' ? (
             <Input

diff --git a/web/components/answers/answer-resolve-panel.tsx b/web/components/answers/answer-resolve-panel.tsx
@@ -11,6 +11,47 @@ import { removeUndefinedProps } from 'common/util/object'
 import { BETTORS } from 'common/user'
 import { Button } from '../buttons/button'
 
+function getAnswerResolveButtonColor(
+  resolveOption: string | undefined,
+  answers: string[],
+  chosenAnswers: { [answerId: string]: number }
+) {
+  return resolveOption === 'CANCEL'
+    ? 'yellow'
+    : resolveOption === 'CHOOSE' && answers.length
+    ? 'green'
+    : resolveOption === 'CHOOSE_MULTIPLE' &&
+      answers.length > 1 &&
+      answers.every((answer) => chosenAnswers[answer] > 0)
+    ? 'blue'
+    : 'indigo'
+}
+
+function getAnswerResolveButtonDisabled(
+  resolveOption: string | undefined,
+  answers: string[],
+  chosenAnswers: { [answerId: string]: number }
+) {
+  return (
+    (resolveOption === 'CHOOSE' && !answers.length) ||
+    (resolveOption === 'CHOOSE_MULTIPLE' &&
+      (!(answers.length > 1) ||
+        !answers.every((answer) => chosenAnswers[answer] > 0)))
+  )
+}
+
+function getAnswerResolveButtonLabel(
+  resolveOption: string | undefined,
+  chosenText: string,
+  answers: string[]
+) {
+  return resolveOption === 'CANCEL'
+    ? 'N/A'
+    : resolveOption === 'CHOOSE'
+    ? chosenText
+    : `${answers.length} answers`
+}
+
 export function AnswerResolvePanel(props: {
   isAdmin: boolean
   isCreator: boolean
@@ -20,6 +61,7 @@ export function AnswerResolvePanel(props: {
     option: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
   ) => void
   chosenAnswers: { [answerId: string]: number }
+  isInModal?: boolean
 }) {
   const {
     contract,
@@ -28,6 +70,7 @@ export function AnswerResolvePanel(props: {
     chosenAnswers,
     isAdmin,
     isCreator,
+    isInModal,
   } = props
   const answers = Object.keys(chosenAnswers)
 
@@ -90,7 +133,8 @@ export function AnswerResolvePanel(props: {
   return (
     <Col className="gap-4 rounded">
       <Row className="justify-between">
-        <div>Resolve your market</div>
+        {!isInModal && <div>Resolve your market</div>}
+        {isInModal && <div>Resolve "{contract.question}"</div>}
         {isAdmin && !isCreator && (
           <span className="bg-scarlet-500/20 text-scarlet-500 rounded p-1 text-xs">
             ADMIN
@@ -117,36 +161,57 @@ export function AnswerResolvePanel(props: {
             </Button>
           )}
 
-          <ResolveConfirmationButton
-            color={
-              resolveOption === 'CANCEL'
-                ? 'yellow'
-                : resolveOption === 'CHOOSE' && answers.length
-                ? 'green'
-                : resolveOption === 'CHOOSE_MULTIPLE' &&
-                  answers.length > 1 &&
-                  answers.every((answer) => chosenAnswers[answer] > 0)
-                ? 'blue'
-                : 'indigo'
-            }
-            label={
-              resolveOption === 'CANCEL'
-                ? 'N/A'
-                : resolveOption === 'CHOOSE'
-                ? chosenText
-                : `${answers.length} answers`
-            }
-            marketTitle={contract.question}
-            disabled={
-              !resolveOption ||
-              (resolveOption === 'CHOOSE' && !answers.length) ||
-              (resolveOption === 'CHOOSE_MULTIPLE' &&
-                (!(answers.length > 1) ||
-                  !answers.every((answer) => chosenAnswers[answer] > 0)))
-            }
-            onResolve={onResolve}
-            isSubmitting={isSubmitting}
-          />
+          {!isInModal && (
+            <ResolveConfirmationButton
+              color={getAnswerResolveButtonColor(
+                resolveOption,
+                answers,
+                chosenAnswers
+              )}
+              label={getAnswerResolveButtonLabel(
+                resolveOption,
+                chosenText,
+                answers
+              )}
+              marketTitle={contract.question}
+              disabled={getAnswerResolveButtonDisabled(
+                resolveOption,
+                answers,
+                chosenAnswers
+              )}
+              onResolve={onResolve}
+              isSubmitting={isSubmitting}
+            />
+          )}
+          {isInModal && (
+            <Button
+              color={getAnswerResolveButtonColor(
+                resolveOption,
+                answers,
+                chosenAnswers
+              )}
+              disabled={
+                isSubmitting ||
+                getAnswerResolveButtonDisabled(
+                  resolveOption,
+                  answers,
+                  chosenAnswers
+                )
+              }
+              onClick={onResolve}
+            >
+              <>
+                Resolve{' '}
+                <>
+                  {getAnswerResolveButtonLabel(
+                    resolveOption,
+                    chosenText,
+                    answers
+                  )}
+                </>
+              </>
+            </Button>
+          )}
         </Row>
       </div>
 

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
@@ -35,9 +35,10 @@ export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   onAnswerCommentClick: (answer: Answer) => void
   showResolver?: boolean
+  isInModal?: boolean
 }) {
   const isAdmin = useAdmin()
-  const { contract, onAnswerCommentClick, showResolver } = props
+  const { contract, onAnswerCommentClick, showResolver, isInModal } = props
   const { creatorId, resolution, resolutions, outcomeType } = contract
   const [showAllAnswers, setShowAllAnswers] = useState(false)
 
@@ -135,66 +136,87 @@ export function AnswersPanel(props: {
       totalChosenProb={chosenTotal}
       onChoose={onChoose}
       onDeselect={onDeselect}
+      isInModal={isInModal}
     />
   ))
 
-  return (
-    <Col className="gap-3">
-      {showResolver && (
-        <GradientContainer className="mb-4">
-          <AnswerResolvePanel
-            isAdmin={isAdmin}
-            isCreator={user?.id === creatorId}
-            contract={contract}
-            resolveOption={resolveOption}
-            setResolveOption={setResolveOption}
-            chosenAnswers={chosenAnswers}
-          />
-
-          {!!resolveOption && (
-            <Col className="mt-4 gap-3">{answerItemComponents}</Col>
-          )}
-        </GradientContainer>
-      )}
-
-      {resolution && answerItemComponents}
-
-      {!resolveOption && (
-        <Col className="gap-3">
-          {answerItems.map((item) => (
-            <OpenAnswer
-              key={item.id}
-              answer={item}
+  // if this is in a modal
+  if (isInModal) {
+    return (
+      <Col className="w-full">
+        <AnswerResolvePanel
+          isAdmin={isAdmin}
+          isCreator={user?.id === creatorId}
+          contract={contract}
+          resolveOption={resolveOption}
+          setResolveOption={setResolveOption}
+          chosenAnswers={chosenAnswers}
+          isInModal={isInModal}
+        />
+        {!!resolveOption && (
+          <Col className="mt-4 w-full gap-3">{answerItemComponents}</Col>
+        )}
+      </Col>
+    )
+  } else {
+    return (
+      <Col className="gap-3">
+        {showResolver && (
+          <GradientContainer className="mb-4">
+            <AnswerResolvePanel
+              isAdmin={isAdmin}
+              isCreator={user?.id === creatorId}
               contract={contract}
-              onAnswerCommentClick={onAnswerCommentClick}
-              color={getAnswerColor(item, answersArray)}
+              resolveOption={resolveOption}
+              setResolveOption={setResolveOption}
+              chosenAnswers={chosenAnswers}
             />
-          ))}
-          {answersToHide.length > 0 && !showAllAnswers && (
-            <Button
-              className="self-end"
-              color="gray-white"
-              onClick={() => setShowAllAnswers(true)}
-              size="md"
-            >
-              Show More
-            </Button>
-          )}
-        </Col>
-      )}
 
-      {answers.length === 0 && (
-        <div className="text-ink-500 pb-4">No answers yet...</div>
-      )}
+            {!!resolveOption && (
+              <Col className="mt-4 gap-3">{answerItemComponents}</Col>
+            )}
+          </GradientContainer>
+        )}
+
+        {resolution && answerItemComponents}
 
-      {outcomeType === 'FREE_RESPONSE' &&
-        tradingAllowed(contract) &&
-        !resolveOption &&
-        !privateUser?.blockedByUserIds.includes(contract.creatorId) && (
-          <CreateAnswerPanel contract={contract} />
+        {!resolveOption && (
+          <Col className="gap-3">
+            {answerItems.map((item) => (
+              <OpenAnswer
+                key={item.id}
+                answer={item}
+                contract={contract}
+                onAnswerCommentClick={onAnswerCommentClick}
+                color={getAnswerColor(item, answersArray)}
+              />
+            ))}
+            {answersToHide.length > 0 && !showAllAnswers && (
+              <Button
+                className="self-end"
+                color="gray-white"
+                onClick={() => setShowAllAnswers(true)}
+                size="md"
+              >
+                Show More
+              </Button>
+            )}
+          </Col>
         )}
-    </Col>
-  )
+
+        {answers.length === 0 && (
+          <div className="text-ink-500 pb-4">No answers yet...</div>
+        )}
+
+        {outcomeType === 'FREE_RESPONSE' &&
+          tradingAllowed(contract) &&
+          !resolveOption &&
+          !privateUser?.blockedByUserIds.includes(contract.creatorId) && (
+            <CreateAnswerPanel contract={contract} />
+          )}
+      </Col>
+    )
+  }
 }
 
 function OpenAnswer(props: {

diff --git a/web/components/bet/quick-bet.tsx b/web/components/bet/quick-bet.tsx
@@ -661,7 +661,6 @@ export function getTextColor(contract: Contract) {
   if (resolution) {
     return OUTCOME_TO_COLOR_TEXT[resolution as resolution] ?? 'text-primary-200'
   }
-
   if ((contract.closeTime ?? Infinity) < Date.now()) {
     return 'text-ink-600'
   }

diff --git a/web/components/bet/yes-no-selector.tsx b/web/components/bet/yes-no-selector.tsx
@@ -118,7 +118,7 @@ export function ChooseCancelSelector(props: {
         onClick={() => onSelect('CHOOSE')}
         className={btnClassName}
       >
-        Choose an answer
+        Choose answer
       </Button>
 
       <Button

diff --git a/web/components/cards/MarketCard.tsx b/web/components/cards/MarketCard.tsx
@@ -5,7 +5,7 @@ import { buildArray } from 'common/util/array'
 import { Dictionary, sortBy, uniqBy } from 'lodash'
 import Image from 'next/image'
 import { useEffect } from 'react'
-import { ContractStatusLabel } from 'web/components/contract/contracts-list-entry'
+import { ContractStatusLabel } from 'web/components/contract/contracts-table'
 import {
   usePersistentState,
   inMemoryStore,

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
@@ -30,7 +30,7 @@ import { Avatar } from '../widgets/avatar'
 import { UserLink } from '../widgets/user-link'
 import { getLinkTarget } from 'web/components/widgets/site-link'
 import { richTextToString } from 'common/util/parse'
-import { ContractStatusLabel } from './contracts-list-entry'
+import { ContractStatusLabel } from './contracts-table'
 import { LikeButton } from './like-button'
 import { CommentsButton } from '../swipe/swipe-comments'
 import { BetRow } from '../bet/bet-row'
@@ -561,7 +561,7 @@ function ReasonChosen(props: { contract: Contract }) {
             className={'z-10'}
           >
             <Row className={'shrink-0 items-center gap-1'}>
-              <UserIcon className="h-4 w-4" />
+              <UserIcon className={'h-4 w-4'} />
               <div>{uniqueBettorCount ?? 0}</div>
             </Row>
           </Tooltip>