Add Recent Positions and Questions to User Profile

apps/api/app/api/users/[id]/positions/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from 'next/server'
+import type { SchemaResponse } from '@play-money/api-helpers'
+import { getPositions } from '@play-money/finance/lib/getPositions'
+import { getUserById } from '@play-money/users/lib/getUserById'
+import schema from './schema'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(
+  req: Request,
+  { params }: { params: unknown }
+): Promise<SchemaResponse<typeof schema.GET.responses>> {
+  try {
+    const url = new URL(req.url)
+    const searchParams = new URLSearchParams(url.search)
+    const urlParams = Object.fromEntries(searchParams)
+
+    const { id, pageSize } = schema.GET.parameters.parse({ ...(params || {}), ...urlParams })
+
+    const user = await getUserById({ id })
+
+    const { positions } = await getPositions(
+      {
+        accountId: user.primaryAccountId,
+      },
+      { field: 'updatedAt', direction: 'desc' },
+      { take: pageSize ?? 25, skip: 0 }
+    )
+
+    return NextResponse.json({
+      positions,
+    })
+  } catch (error) {
+    console.log(error) // eslint-disable-line no-console -- Log error for debugging
+
+    return NextResponse.json({ error: 'Error processing request' }, { status: 500 })
+  }
+}

apps/api/app/api/users/[id]/positions/schema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import { ServerErrorSchema, createSchema } from '@play-money/api-helpers'
+import { MarketOptionPositionSchema, UserSchema } from '@play-money/database'
+
+export default createSchema({
+  GET: {
+    parameters: UserSchema.pick({ id: true }).extend({ pageSize: z.coerce.number().optional() }),
+    responses: {
+      200: z.object({
+        positions: z.array(MarketOptionPositionSchema),
+      }),
+      404: ServerErrorSchema,
+      500: ServerErrorSchema,
+    },
+  },
+})

packages/api-helpers/client/index.ts

@@ -1,8 +1,8 @@
 import _ from 'lodash'
 import { CommentWithReactions } from '@play-money/comments/lib/getComment'
-import { Market, User } from '@play-money/database'
+import { Market, MarketOptionPosition, User } from '@play-money/database'
 import { NetBalanceAsNumbers } from '@play-money/finance/lib/getBalances'
-import { TransactionWithEntries, LeaderboardUser } from '@play-money/finance/types'
+import { TransactionWithEntries, LeaderboardUser, ExtendedMarketOptionPosition } from '@play-money/finance/types'
 import { ExtendedMarket } from '@play-money/markets/types'
 
 // TODO: @casesandberg Generate this from OpenAPI schema
@@ -340,6 +340,18 @@ export async function getUserTransactions({
   )
 }
 
+export async function getUserPositions({
+  userId,
+  pageSize,
+}: {
+  userId: string
+  pageSize?: number
+}): Promise<{ positions: Array<ExtendedMarketOptionPosition> }> {
+  return apiHandler<{ positions: Array<ExtendedMarketOptionPosition> }>(
+    `${process.env.NEXT_PUBLIC_API_URL}/v1/users/${userId}/positions${pageSize ? `?pageSize=${pageSize}` : ''}`
+  )
+}
+
 export async function getUserBalance({ userId }: { userId: string }): Promise<{ balance: NetBalanceAsNumbers }> {
   return apiHandler<{ balance: NetBalanceAsNumbers }>(`${process.env.NEXT_PUBLIC_API_URL}/v1/users/${userId}/balance`)
 }

packages/finance/lib/getPositions.ts

@@ -0,0 +1,48 @@
+import db from '@play-money/database'
+import { ExtendedMarketOptionPosition } from '../types'
+
+interface PositionsFilterOptions {
+  accountId?: string
+}
+
+interface SortOptions {
+  field: string
+  direction: 'asc' | 'desc'
+}
+
+interface PaginationOptions {
+  skip: number
+  take: number
+}
+
+export async function getPositions(
+  filters: PositionsFilterOptions = {},
+  sort: SortOptions = { field: 'createdAt', direction: 'desc' },
+  pagination: PaginationOptions = { skip: 0, take: 10 }
+): Promise<{ positions: Array<ExtendedMarketOptionPosition>; total: number }> {
+  const [positions, total] = await Promise.all([
+    db.marketOptionPosition.findMany({
+      where: {
+        accountId: filters.accountId,
+        value: { gt: 0 },
+      },
+      include: {
+        market: true,
+        option: true,
+      },
+      orderBy: {
+        [sort.field]: sort.direction,
+      },
+      skip: pagination.skip,
+      take: pagination.take,
+    }),
+    db.marketOptionPosition.count({
+      where: {
+        accountId: filters.accountId,
+        value: { gt: 0 },
+      },
+    }),
+  ])
+
+  return { positions, total }
+}

packages/finance/types.ts

@@ -1,4 +1,4 @@
-import { Market, MarketOption, Transaction, TransactionEntry, User } from '@play-money/database'
+import { Market, MarketOption, MarketOptionPosition, Transaction, TransactionEntry, User } from '@play-money/database'
 
 export type TransactionEntryInput = Pick<
   TransactionEntry,
@@ -20,3 +20,8 @@ export type LeaderboardUser = {
   total: number
   rank: number
 }
+
+export type ExtendedMarketOptionPosition = MarketOptionPosition & {
+  market: Market
+  option: MarketOption
+}

packages/markets/components/MarketBalanceBreakdown.tsx

@@ -57,16 +57,16 @@ export function MarketBalanceBreakdown({
           {positions.map((position) => {
             const option = options.find((option) => option.id === position.optionId)!
             const value = new Decimal(position.value).toDecimalPlaces(4)
-            const cost = new Decimal(position.value).toDecimalPlaces(4)
-            const change = value.sub(cost).div(cost).times(100).toNumber()
+            const cost = new Decimal(position.cost).toDecimalPlaces(4)
+            const change = value.sub(cost).div(cost).times(100).round().toNumber()
             const changeLabel = `(${change > 0 ? '+' : ''}${change}%)`
 
             return value.toNumber() ? (
               <Tooltip key={position.optionId}>
-                <TooltipTrigger className="flex w-full justify-between text-xs text-muted-foreground">
-                  <div className="flex items-center gap-1">
-                    <div className="size-2 rounded-md" style={{ backgroundColor: option.color }} />
-                    <span className="font-mono">{option.name}</span>
+                <TooltipTrigger className="flex w-full justify-between gap-2 text-xs text-muted-foreground">
+                  <div className="flex gap-1">
+                    <div className="mt-1 size-2 flex-shrink-0 rounded-md" style={{ backgroundColor: option.color }} />
+                    <span className="line-clamp-2 font-mono">{option.name}</span>
                   </div>
                   <div className="flex gap-2">
                     {change ? (
@@ -76,7 +76,7 @@ export function MarketBalanceBreakdown({
                   </div>
                 </TooltipTrigger>
                 <TooltipContent className="max-w-sm" align="start">
-                  <div className="line-clamp-2">{option.name}</div>
+                  <div>{option.name}</div>
                   <div className="text-xs text-muted-foreground">
                     Cost: {new Decimal(position.cost).toDecimalPlaces(4).toString()}
                   </div>