Trade with history (#844)

* wip

* wip

* Show active trades on TradeWith by default

Author: greg19

frontend/src/components/Card.tsx

@@ -26,9 +26,7 @@ export function Card({ card, onImageClick, className, editable = true }: CardPro
     startTransition(async () => {
       setAmountOwned(x)
       try {
-        await updateCardsMutation.mutateAsync({
-          updates: [{ card_id: card.card_id, internal_id: card.internal_id, amount_owned: x }],
-        })
+        await updateCardsMutation.mutateAsync([{ card_id: card.card_id, internal_id: card.internal_id, amount_owned: x }])
       } catch (error) {
         console.log('Failed updating card count:', error)
       }

frontend/src/components/InstallPrompt.tsx

@@ -78,7 +78,7 @@ const InstallPrompt = () => {
     >
       <p className="pb-2">{t('install')}</p>
       <div className="justify-between flex">
-        <Button onClick={handleInstallClick} type="button" variant="default">
+        <Button onClick={handleInstallClick} variant="default">
           {t('accept')}
         </Button>
         <Button

frontend/src/components/ui/button.tsx

@@ -33,9 +33,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   isPending?: boolean
 }
 
-export function Button({ className, variant, size, isPending, children, ...props }: ButtonProps) {
+export function Button({ className, variant, size, isPending, children, type, ...props }: ButtonProps) {
   return (
-    <button className={cn(buttonVariants({ variant, size }), className)} {...props}>
+    <button type={type ?? 'button'} className={cn(buttonVariants({ variant, size }), className)} {...props}>
       {children}
       {isPending && <Spinner size="inline" className="inline-block ml-2" />}
     </button>

frontend/src/pages/import/components/ImportReader.tsx

@@ -39,7 +39,7 @@ export const ImportReader = () => {
       setNumberProcessed((n) => n + 1)
     }
 
-    updateCardsMutation.mutate({ updates: cardArray })
+    updateCardsMutation.mutate(cardArray)
   }
 
   const onDrop = (acceptedFiles: File[]) => {

frontend/src/pages/scan/Scan.tsx

@@ -168,18 +168,13 @@ const Scan = () => {
       updates.push({ card_id, previous_amount, increment })
     }
 
-    try {
-      updateCardsMutation.mutate({
-        updates: updates.map((x) => ({
-          card_id: x.card_id,
-          internal_id: getInteralIdByCardId(x.card_id),
-          amount_owned: Math.max(0, x.previous_amount + x.increment),
-        })),
-      })
-    } catch (error) {
-      setError(`Error incrementing card quantities: ${error}`)
-      return
-    }
+    updateCardsMutation.mutate(
+      updates.map((x) => ({
+        card_id: x.card_id,
+        internal_id: getInteralIdByCardId(x.card_id),
+        amount_owned: Math.max(0, x.previous_amount + x.increment),
+      })),
+    )
 
     setIncrementedCards(updates)
     setState(State.ProcessUpdates + 1)

frontend/src/pages/trade/TradeWith.tsx

@@ -1,17 +1,20 @@
-import { ChevronRight } from 'lucide-react'
+import { ChevronFirst, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useParams, useSearchParams } from 'react-router'
 import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button'
 import { FriendIdDisplay } from '@/components/ui/friend-id-display'
+import { Switch } from '@/components/ui/switch'
 import { getCardByInternalId, tradeableExpansions } from '@/lib/CardsDB.ts'
 import { getExtraCards, getNeededCards } from '@/lib/utils'
 import { CardList } from '@/pages/trade/components/CardList.tsx'
 import { TradeOffer } from '@/pages/trade/components/TradeOffer.tsx'
 import { useAccount, usePublicAccount } from '@/services/account/useAccount'
 import { useCollection, usePublicCollection } from '@/services/collection/useCollection'
+import { useAllTrades } from '@/services/trade/useTrade'
 import { type Card, type CollectionRow, type Rarity, type TradableRarity, tradableRarities } from '@/types'
+import TradeList from './components/TradeList'
 
 function getTradeCards(extraCards: number[], neededCards: number[]) {
   const neededCardsSet = new Set(neededCards)
@@ -33,6 +36,10 @@ function TradeWith() {
   const { data: account } = useAccount()
   const { data: ownedCards = new Map<number, CollectionRow>() } = useCollection()
 
+  const [viewHistory, setViewHistory] = useState(false)
+  const [pageHistory, setPageHistory] = useState(0)
+  const allTrades = useAllTrades(friendAccount?.friend_id, viewHistory, pageHistory, true)
+
   const [yourCard, setYourCard] = useState<Card | null>(null)
   const [friendCard, setFriendCard] = useState<Card | null>(() => {
     const id = searchParams.get('friend_card')
@@ -91,23 +98,60 @@ function TradeWith() {
   const hasPossibleTrades = tradableRarities.some((r) => (userTrades[r] ?? []).length > 0 && (friendTrades[r] ?? []).length > 0)
 
   return (
-    <div className="kap-4 justify-center w-full m-auto px-1 sm:px-2">
+    <div className="flex flex-col gap-4 w-full px-1 sm:px-2">
       <title>{`Trade with ${friendAccount.username} – TCG Pocket Collection Tracker`}</title>
-      <div className="mb-4 mx-1 flex justify-between">
+      <div className="mx-1 flex justify-between">
         <h1>
           <span className="text-2xl font-light">{t('tradingWith')}</span>
           <span className="text-2xl font-bold"> {friendAccount.username} </span>
           <span className="block sm:inline text-sm">
             <FriendIdDisplay friendId={friendAccount.friend_id} />
           </span>
         </h1>
-        <Link to={`/collection/${friendId}`}>
-          <Button>
-            Collection
-            <ChevronRight />
-          </Button>
-        </Link>
+        <div className="flex flex-col-reverse sm:flex-row gap-2">
+          <label htmlFor={`history-${friendId}`} className="my-auto flex items-center">
+            {t('viewHistory')}
+            <Switch
+              id={`history-${friendId}`}
+              className="ml-2 my-auto"
+              checked={viewHistory}
+              onCheckedChange={(x) => {
+                setViewHistory(x)
+                setPageHistory(0)
+              }}
+            />
+          </label>
+          <Link to={`/collection/${friendId}`}>
+            <Button>
+              Collection
+              <ChevronRight />
+            </Button>
+          </Link>
+        </div>
       </div>
+      {allTrades.isLoading ? (
+        <Spinner size="md" />
+      ) : (
+        allTrades.data && (
+          <TradeList trades={allTrades.data.trades}>
+            <div className="flex justify-between mt-2">
+              <span className="text-neutral-400">{allTrades.data.count} total offers</span>
+              <div className="flex items-center gap-2">
+                <span>Page {pageHistory + 1}</span>
+                <Button variant="outline" onClick={() => setPageHistory(() => 0)} disabled={pageHistory <= 0}>
+                  <ChevronFirst />
+                </Button>
+                <Button variant="outline" onClick={() => setPageHistory((prev) => prev - 1)} disabled={pageHistory <= 0}>
+                  <ChevronLeft />
+                </Button>
+                <Button variant="outline" onClick={() => setPageHistory((prev) => prev + 1)} disabled={!allTrades.data.hasNext}>
+                  <ChevronRight />
+                </Button>
+              </div>
+            </div>
+          </TradeList>
+        )
+      )}
 
       <TradeOffer
         yourId={account.friend_id}
@@ -126,21 +170,21 @@ function TradeWith() {
       )}
 
       {tradableRarities.map((rarity) => (
-        <div key={rarity} className="mt-4">
+        <div key={rarity}>
           <h3 id={rarity} className="text-xl font-semibold mb-2 text-center">
             [ {rarity} ]
           </h3>
-          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-4">
             <div className="w-full sm:w-1/2">
-              <h4 className="text-md font-medium mb-1 ml-2">{t('youHave')}</h4>
+              <h4 className="text-md font-medium mb-1 ml-2 text-neutral-400">{t('youHave')}</h4>
               {userTrades[rarity] ? (
                 <CardList cards={userTrades[rarity]} selected={yourCard} setSelected={setYourCard} />
               ) : (
                 <div className="text-center text-neutral-500 rounded-lg border-1 border-neutral-700 border-solid p-2">No cards to trade</div>
               )}
             </div>
             <div className="w-full sm:w-1/2">
-              <h4 className="text-md font-medium mb-1 ml-2">{t('friendHas')}</h4>
+              <h4 className="text-md font-medium mb-1 ml-2 text-neutral-400">{t('friendHas')}</h4>
               {friendTrades[rarity] ? (
                 <CardList cards={friendTrades[rarity]} selected={friendCard} setSelected={setFriendCard} />
               ) : (

frontend/src/pages/trade/components/Actions.tsx

@@ -0,0 +1,118 @@
+import type { Dispatch, SetStateAction } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import { useToast } from '@/hooks/use-toast'
+import { getInteralIdByCardId } from '@/lib/CardsDB'
+import { umami } from '@/lib/utils'
+import { useAccount } from '@/services/account/useAccount'
+import { useCollection, useUpdateCards } from '@/services/collection/useCollection'
+import { useUpdateTrade } from '@/services/trade/useTrade'
+import type { CardAmountUpdate, TradeRow, TradeStatus } from '@/types'
+
+interface Props {
+  trade: TradeRow
+  setSelected: Dispatch<SetStateAction<number | undefined>>
+}
+
+export default function Actions({ trade, setSelected }: Props) {
+  const { t } = useTranslation('trade-matches')
+  const { toast } = useToast()
+
+  const { data: account, isLoading: isLoadingAccount } = useAccount()
+  const { data: ownedCards, isLoading: isLoadingCollection } = useCollection()
+  const updateCardsMutation = useUpdateCards()
+  const updateTradeMutation = useUpdateTrade()
+
+  if (isLoadingAccount || isLoadingCollection) {
+    return null
+  }
+
+  if (!account || !ownedCards) {
+    throw new Error('Cannot deduce trade actions: not logged in')
+  }
+
+  const getAndIncrement = (card_id: string, increment: number): CardAmountUpdate => {
+    const internal_id = getInteralIdByCardId(card_id)
+    return { card_id, internal_id, amount_owned: (ownedCards.get(internal_id)?.amount_owned ?? 0) + increment }
+  }
+
+  const end = async () => {
+    const update =
+      trade.offering_friend_id === account.friend_id
+        ? { offerer_ended: true }
+        : trade.receiving_friend_id === account.friend_id
+          ? { receiver_ended: true }
+          : null
+    if (update === null) {
+      throw new Error(`Error hiding trade: cannot match your friend id`)
+    }
+    await updateTradeMutation.mutateAsync({ id: trade.id, trade: update })
+
+    setSelected(undefined)
+    umami('Updated trade: ended')
+  }
+
+  const increment = async () => {
+    if (trade.offer_card_id === trade.receiver_card_id) {
+      return
+    }
+
+    const updates =
+      trade.offering_friend_id === account.friend_id
+        ? [getAndIncrement(trade.offer_card_id, -1), getAndIncrement(trade.receiver_card_id, 1)]
+        : trade.receiving_friend_id === account.friend_id
+          ? [getAndIncrement(trade.offer_card_id, 1), getAndIncrement(trade.receiver_card_id, -1)]
+          : null
+    if (updates === null) {
+      throw new Error(`Error updating collection: cannot match your friend id`)
+    }
+
+    await updateCardsMutation.mutateAsync(updates)
+    await end()
+    toast({ title: t('collectionUpdated'), variant: 'default' })
+  }
+
+  const updateStatus = async (status: TradeStatus) => {
+    updateTradeMutation.mutate({ id: trade.id, trade: { status: status } })
+    setSelected(trade.id)
+    umami(`Updated trade: ${status}`)
+  }
+
+  const i_ended =
+    (trade.offering_friend_id === account.friend_id && trade.offerer_ended) || (trade.receiving_friend_id === account.friend_id && trade.receiver_ended)
+
+  switch (trade.status) {
+    case 'offered':
+      return (
+        <>
+          {trade.receiving_friend_id === account.friend_id && <Button onClick={() => updateStatus('accepted')}>{t('actionAccept')}</Button>}
+          <Button onClick={() => updateStatus('declined')}>{trade.receiving_friend_id === account.friend_id ? t('actionDecline') : t('actionCancel')}</Button>
+        </>
+      )
+    case 'accepted':
+      return (
+        <>
+          <Button onClick={() => updateStatus('finished')}>{t('actionComplete')}</Button>
+          <Button onClick={() => updateStatus('declined')}>{t('actionCancel')}</Button>
+        </>
+      )
+    case 'declined':
+      if (i_ended) {
+        return null
+      }
+      return <Button onClick={end}>{t('actionHide')}</Button>
+    case 'finished':
+      if (i_ended) {
+        return null
+      }
+      return (
+        <>
+          <Button onClick={() => increment()}>{t('actionUpdate')}</Button>
+          <Button onClick={end}>{t('actionHide')}</Button>
+        </>
+      )
+    default:
+      console.log(`Unknown trade status ${trade.status}`)
+      return null
+  }
+}