Batch useLiveContract and include answers in api call

backend/api/src/get-markets.ts

@@ -0,0 +1,25 @@
+import { createSupabaseDirectClient } from 'shared/supabase/init'
+import { convertAnswer, convertContract } from 'common/supabase/contracts'
+import { contractColumnsToSelect } from 'shared/utils'
+import { CPMMMultiContract } from 'common/contract'
+import { APIHandler } from './helpers/endpoint'
+
+export const getMarketsByIds: APIHandler<'markets-by-ids'> = async (props) => {
+  const pg = createSupabaseDirectClient()
+  const results = await pg.multi(
+    `select ${contractColumnsToSelect} from contracts
+            where id in ($1:list);
+            select * from answers where contract_id in ($1:list);
+            `,
+    [props.ids]
+  )
+  const contracts = results[0].map(convertContract)
+  const answers = results[1].map(convertAnswer)
+  const multiContracts = contracts.filter((c) => c.mechanism === 'cpmm-multi-1')
+  for (const contract of multiContracts) {
+    ;(contract as CPMMMultiContract).answers = answers.filter(
+      (a) => a.contractId === contract.id
+    )
+  }
+  return contracts
+}

backend/api/src/routes.ts

@@ -132,6 +132,7 @@ import { getLeaderboard } from './get-leaderboard'
 import { toggleSystemTradingStatus } from './toggle-system-status'
 import { completeCashoutRequest } from './gidx/complete-cashout-request'
 import { getDailyChangedMetricsAndContracts } from './get-daily-changed-metrics-and-contracts'
+import { getMarketsByIds } from './get-markets'
 
 // we define the handlers in this object in order to typecheck that every API has a handler
 export const handlers: { [k in APIPath]: APIHandler<k> } = {
@@ -167,6 +168,7 @@ export const handlers: { [k in APIPath]: APIHandler<k> } = {
   groups: getGroups,
   'market/:id': getMarket,
   'market/:id/lite': ({ id }) => getMarket({ id, lite: true }),
+  'markets-by-ids': getMarketsByIds,
   'slug/:slug': getMarket,
   'market/:contractId/update': updateMarket,
   'market/:contractId/close': closeMarket,

backend/api/url-map-config.yaml

@@ -57,3 +57,4 @@ pathMatchers:
           - pathTemplateMatch: /v0/leagues
           - pathTemplateMatch: /v0/get-mod-reports
           - pathTemplateMatch: /get-notifications
+          - pathTemplateMatch: /markets-by-ids

common/src/api/schema.ts

@@ -497,6 +497,17 @@ export const API = (_apiTypeCheck = {
     cache: DEFAULT_CACHE_STRATEGY,
     props: z.object({ id: z.string(), lite: coerceBoolean.optional() }),
   },
+  'markets-by-ids': {
+    method: 'GET',
+    visibility: 'undocumented',
+    authed: false,
+    returns: [] as Contract[],
+    props: z
+      .object({
+        ids: z.array(z.string()).max(100),
+      })
+      .strict(),
+  },
   // deprecated. use /market/:id?lite=true instead
   'market/:id/lite': {
     method: 'GET',

web/components/answers/answer-resolve-panel.tsx

@@ -35,7 +35,6 @@ import { useAdmin } from 'web/hooks/use-admin'
 import { GradientContainer } from '../widgets/gradient-container'
 import { AmountInput } from '../widgets/amount-input'
 import { getAnswerColor } from '../charts/contract/choice'
-import { useAnswersCpmm } from 'web/hooks/use-answers'
 
 function getAnswerResolveButtonColor(
   resolveOption: string | undefined,
@@ -217,7 +216,7 @@ export const AnswersResolvePanel = (props: {
   inModal?: boolean
 }) => {
   const { contract, onClose, inModal } = props
-  const answers = useAnswersCpmm(contract.id) ?? contract.answers
+  const answers = contract.answers
 
   const user = useUser()
 

web/components/answers/binary-multi-answers-panel.tsx

@@ -13,14 +13,13 @@ import { BuyPanelBody } from 'web/components/bet/bet-panel'
 import { getAnswerColor } from '../charts/contract/choice'
 import { useUser } from 'web/hooks/use-user'
 import { PencilIcon } from '@heroicons/react/solid'
-import { useAnswersCpmm } from 'web/hooks/use-answers'
 
 export function BinaryMultiAnswersPanel(props: {
   contract: CPMMMultiContract
   feedReason?: string
 }) {
   const { feedReason, contract } = props
-  const answers = useAnswersCpmm(contract.id) ?? contract.answers
+  const answers = contract.answers
 
   const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(undefined)
 

web/components/answers/numeric-bet-panel.tsx

@@ -36,7 +36,7 @@ import { SizedContainer } from 'web/components/sized-container'
 import { getFeeTotal, noFees } from 'common/fees'
 import { FeeDisplay } from '../bet/fees'
 import { XIcon } from '@heroicons/react/solid'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import { getTierFromLiquidity } from 'common/tier'
 import { MoneyDisplay } from '../bet/money-display'
 import { TRADE_TERM } from 'common/envs/constants'
@@ -55,7 +55,7 @@ export const NumericBetPanel = (props: {
       higher: 'Higher',
     },
   } = props
-  const contract = useLiveContractWithAnswers(props.contract)
+  const contract = useLiveContract(props.contract)
   const { answers, min: minimum, max: maximum } = contract
   const [expectedValue, setExpectedValue] = useState(getExpectedValue(contract))
   const [betAmount, setBetAmount] = useState<number | undefined>(10)

web/components/contract/contract-overview.tsx

@@ -45,7 +45,7 @@ import {
 import { SizedContainer } from 'web/components/sized-container'
 import { useAnnotateChartTools } from 'web/hooks/use-chart-annotations'
 import { useChartPositions } from 'web/hooks/use-chart-positions'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
 import { useUser } from 'web/hooks/use-user'
 import {
@@ -775,7 +775,7 @@ const BinaryChoiceOverview = (props: {
 }
 
 export const SimpleMultiOverview = (props: { contract: CPMMMultiContract }) => {
-  const contract = useLiveContractWithAnswers(props.contract)
+  const contract = useLiveContract(props.contract)
   const user = useUser()
   const defaultSort = getDefaultSort(contract)
 

web/components/contract/contract-page.tsx

@@ -56,7 +56,7 @@ import { GradientContainer } from 'web/components/widgets/gradient-container'
 import { Tooltip } from 'web/components/widgets/tooltip'
 import { useAdmin, useTrusted } from 'web/hooks/use-admin'
 import { useContractBets } from 'web/hooks/use-bets'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import { useHeaderIsStuck } from 'web/hooks/use-header-is-stuck'
 import { useRelatedMarkets } from 'web/hooks/use-related-contracts'
 import { useReview } from 'web/hooks/use-review'
@@ -92,12 +92,12 @@ export function ContractPageContent(props: ContractParams) {
   // sync query state with context
   const { prefersPlay } = useSweepstakes()
   const router = useRouter()
-  const livePlayContract = useLiveContractWithAnswers(props.contract)
+  const livePlayContract = useLiveContract(props.contract)
   const sweepsIsPossible = !!livePlayContract.siblingContractId
   const [isPlay, setIsPlay] = useState<boolean | undefined>(prefersPlay)
   const liveCashContract = props.cash
     ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useLiveContractWithAnswers(props.cash.contract)
+      useLiveContract(props.cash.contract)
     : null
 
   const liveContract =

web/components/contract/contracts-table.tsx

@@ -16,7 +16,7 @@ import { ContractMinibar } from '../charts/minibar'
 import { Row } from '../layout/row'
 import { BinaryContractOutcomeLabel } from '../outcome-label'
 import { Avatar } from '../widgets/avatar'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import { Col } from '../layout/col'
 import {
   actionColumn,
@@ -80,7 +80,7 @@ function ContractRow(props: {
   onClick?: () => void
   hideAvatar?: boolean
 }) {
-  const contract = useLiveContractWithAnswers(props.contract)
+  const contract = useLiveContract(props.contract)
 
   const { columns, hideAvatar, highlighted, faded, onClick } = props
   return (

web/components/contract/trades-button.tsx

@@ -16,7 +16,7 @@ import { Avatar } from '../widgets/avatar'
 import { UserLink } from '../widgets/user-link'
 import { track } from 'web/lib/service/analytics'
 import { Answer } from 'common/answer'
-import { useUniqueBettorCountOnAnswer } from 'web/hooks/use-answers'
+import { useUniqueBettorCountOnAnswer } from 'web/hooks/use-unique-bettor-count-on-answer'
 import { Button, ColorType } from 'web/components/buttons/button'
 import { UserHovercard } from '../user/user-hovercard'
 import { useBountyAwardCount } from 'web/hooks/use-bounties'

web/components/us-elections/contracts/politics-card.tsx

@@ -13,7 +13,7 @@ import { Row } from 'web/components/layout/row'
 import { Spacer } from 'web/components/layout/spacer'
 import { SweepsToggle } from 'web/components/sweeps/sweeps-toggle'
 import { ClickFrame } from 'web/components/widgets/click-frame'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import { track } from 'web/lib/service/analytics'
 import { CandidatePanel } from './candidates-panel/candidates-panel'
 import { SmallCandidatePanel } from './candidates-panel/small-candidate-panel'
@@ -49,7 +49,7 @@ export function PoliticsCard(props: {
     includeHead,
   } = props
 
-  const contract = useLiveContractWithAnswers(props.contract)
+  const contract = useLiveContract(props.contract)
 
   const path = contractPath(contract)
 

web/components/usa-map/homepage-map.tsx

@@ -8,7 +8,7 @@ import { ReactNode, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Spacer } from 'web/components/layout/spacer'
-import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
+import { useLiveContract } from 'web/hooks/use-contract'
 import {
   ElectoralCollegeVisual,
   sortByDemocraticDiff,
@@ -61,7 +61,7 @@ export function HomepageMap(props: {
         ? rawPresidencySwingCashContracts[key]
         : rawPresidencyStateContracts[key]
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    acc[key] = useLiveContractWithAnswers(currentContract!)
+    acc[key] = useLiveContract(currentContract!)
 
     return acc
   }, {} as MapContractsDictionary)
@@ -73,7 +73,7 @@ export function HomepageMap(props: {
   const senateContractsDictionary = Object.keys(rawSenateStateContracts).reduce(
     (acc, key) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      acc[key] = useLiveContractWithAnswers(rawSenateStateContracts[key]!)
+      acc[key] = useLiveContract(rawSenateStateContracts[key]!)
       return acc
     },
     {} as MapContractsDictionary
@@ -83,11 +83,11 @@ export function HomepageMap(props: {
     rawGovernorStateContracts
   ).reduce((acc, key) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    acc[key] = useLiveContractWithAnswers(rawGovernorStateContracts[key]!)
+    acc[key] = useLiveContract(rawGovernorStateContracts[key]!)
     return acc
   }, {} as MapContractsDictionary)
 
-  const liveHouseContract = useLiveContractWithAnswers(houseContract)
+  const liveHouseContract = useLiveContract(houseContract)
 
   const [mode, setMode] = useState<MapMode>('presidency')