Don't limit trade history (#839)

* Don't limit trade history

* revert: end after incrementing

Author: greg19

frontend/src/pages/trade/TradeOffers.tsx

@@ -2,14 +2,14 @@ import { useTranslation } from 'react-i18next'
 import { Spinner } from '@/components/Spinner'
 import TradePartner from '@/pages/trade/components/TradePartner.tsx'
 import { useAccount } from '@/services/account/useAccount'
-import { useTrades } from '@/services/trade/useTrade.ts'
+import { useActiveTrades } from '@/services/trade/useTrade.ts'
 import type { TradeRow } from '@/types'
 
 function TradeOffers() {
   const { t } = useTranslation(['trade-matches', 'common'])
 
   const { data: account, isLoading: isLoadingAccount } = useAccount()
-  const { data: trades, isLoading: isLoadingTrades } = useTrades()
+  const { data: trades, isLoading: isLoadingTrades } = useActiveTrades()
 
   if (isLoadingAccount || isLoadingTrades) {
     return <Spinner size="lg" overlay />
@@ -25,38 +25,22 @@ function TradeOffers() {
 
   //split into two groups for finished and ongoing trades
   const friends = groupTrades(trades, account.friend_id)
-  const friendsHasTrades = Object.fromEntries(
-    Object.entries(friends).map(([key, value]) => [key, Number(activeTrades(value as TradeRow[], account.friend_id).length === 0)]),
-  )
   const friendsLastActivity = Object.fromEntries(
     Object.entries(friends).map(([key, value]) => [key, Math.max(...(value as TradeRow[]).map((row) => new Date(row.updated_at).getTime()))]),
   )
   const friendIds = Object.keys(friends).toSorted((a, b) => {
-    if (friendsHasTrades[a] !== friendsHasTrades[b]) {
-      return friendsHasTrades[a] - friendsHasTrades[b]
-    }
     return friendsLastActivity[b] - friendsLastActivity[a]
   })
 
   return (
     <div className="flex flex-col items-center mx-auto gap-6 sm:px-4 mb-12 w-full">
       {friendIds.map((friend_id) => (
-        <TradePartner key={friend_id} friendId={friend_id} />
+        <TradePartner key={friend_id} friendId={friend_id} activeTrades={friends[friend_id] as TradeRow[]} />
       ))}
     </div>
   )
 }
 
-function activeTrades(arr: TradeRow[], id: string) {
-  return arr.filter((row) => {
-    if (row.offering_friend_id === id) {
-      return !row.offerer_ended
-    } else {
-      return !row.receiver_ended
-    }
-  })
-}
-
 function groupTrades(arr: TradeRow[], id: string) {
   return Object.groupBy(arr, (row) => {
     if (row.offering_friend_id === id) {

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

@@ -12,21 +12,16 @@ import type { CardAmountUpdate, CollectionRow, TradeRow, TradeStatus } from '@/t
 
 interface Props {
   trades: TradeRow[]
-  viewHistory: boolean
 }
 
-function TradeList({ trades, viewHistory }: Props) {
+function TradeList({ trades }: Props) {
   const { t } = useTranslation('trade-matches')
   const { toast } = useToast()
 
   const { data: account } = useAccount()
   const { data: ownedCards = new Map<number, CollectionRow>() } = useCollection()
   const updateCardsMutation = useUpdateCards()
 
-  function interesting(row: TradeRow) {
-    return (row.offering_friend_id === account?.friend_id && !row.offerer_ended) || (row.receiving_friend_id === account?.friend_id && !row.receiver_ended)
-  }
-  const filteredTrades = viewHistory ? trades.filter((x) => !interesting(x)) : trades.filter(interesting)
   const [selectedTradeId, setSelectedTradeId] = useState<number | undefined>(undefined)
   const updateTradeMutation = useUpdateTrade()
 
@@ -138,9 +133,9 @@ function TradeList({ trades, viewHistory }: Props) {
     }
   }
 
-  const selectedTrade = filteredTrades.find((r) => r.id === selectedTradeId)
+  const selectedTrade = trades.find((r) => r.id === selectedTradeId)
 
-  if (filteredTrades.length === 0) {
+  if (trades.length === 0) {
     return null
   }
 
@@ -151,7 +146,7 @@ function TradeList({ trades, viewHistory }: Props) {
         <h4 className="text-lg font-medium w-1/2 ml-8">{t('youReceive')}</h4>
       </div>
       <ul className="flex flex-col gap-2 md:gap-0">
-        {filteredTrades
+        {trades
           .toSorted((a, b) => (a.created_at > b.created_at ? -1 : 1))
           .map((x) => (
             <TradeListRow key={x.id} row={x} selectedTradeId={selectedTradeId} setSelectedTradeId={setSelectedTradeId} />

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

@@ -1,36 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
 import { ChevronRight } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router'
+import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button.tsx'
 import { FriendIdDisplay } from '@/components/ui/friend-id-display.tsx'
 import { Switch } from '@/components/ui/switch.tsx'
 import TradeList from '@/pages/trade/components/TradeList.tsx'
 import { usePublicAccount } from '@/services/account/useAccount.ts'
-import { useTrades } from '@/services/trade/useTrade.ts'
+import { getAllTrades } from '@/services/trade/tradeService'
+import type { TradeRow } from '@/types'
 
 interface TradePartnerProps {
   friendId: string
+  activeTrades: TradeRow[]
 }
 
-function TradePartner({ friendId }: TradePartnerProps) {
+function TradePartner({ friendId, activeTrades }: TradePartnerProps) {
   const { t } = useTranslation(['trade-matches', 'common'])
 
-  const { data: trades, isLoading: isLoadingTrades } = useTrades()
   const { data: friendAccount, isLoading: isLoadingAccount } = usePublicAccount(friendId)
 
   const [viewHistory, setViewHistory] = useState<boolean>(false)
+  const allTrades = useQuery({
+    queryKey: ['trades', friendId],
+    queryFn: () => getAllTrades(friendId),
+    enabled: viewHistory,
+  })
 
-  if (isLoadingTrades || isLoadingAccount) {
+  if (isLoadingAccount) {
     return null
   }
 
-  if (!trades) {
-    return <p className="text-xl text-center py-8">{t('common:error')}</p>
-  }
-
-  const partnerTrades = trades.filter((t) => t.offering_friend_id === friendId || t.receiving_friend_id === friendId)
-
   return (
     <div className="w-full">
       <div className="flex justify-between items-center mb-1 mx-1">
@@ -52,7 +54,15 @@ function TradePartner({ friendId }: TradePartnerProps) {
           </Link>
         </span>
       </div>
-      {friendAccount !== null && <TradeList trades={partnerTrades} viewHistory={viewHistory} />}
+      {viewHistory ? (
+        allTrades.isLoading ? (
+          <Spinner size="md" />
+        ) : (
+          allTrades.data && <TradeList trades={allTrades.data} />
+        )
+      ) : (
+        <TradeList trades={activeTrades} />
+      )}
     </div>
   )
 }

frontend/src/services/auth/useAuth.ts

@@ -26,7 +26,7 @@ export function useLogout() {
       await queryClient.invalidateQueries({ queryKey: ['user'] })
       await queryClient.invalidateQueries({ queryKey: ['account'] })
       await queryClient.invalidateQueries({ queryKey: ['collection'] })
-      await queryClient.invalidateQueries({ queryKey: ['trade'] })
+      await queryClient.invalidateQueries({ queryKey: ['trades'] })
       if (email) {
         removeLocalCacheItems(email)
       }
@@ -64,7 +64,7 @@ export function useVerifyOTP() {
       await queryClient.invalidateQueries({ queryKey: ['user'] })
       await queryClient.invalidateQueries({ queryKey: ['account'] })
       await queryClient.invalidateQueries({ queryKey: ['collection'] })
-      await queryClient.invalidateQueries({ queryKey: ['trade'] })
+      await queryClient.invalidateQueries({ queryKey: ['trades'] })
     },
   })
 }

frontend/src/services/trade/tradeService.ts

@@ -1,15 +1,31 @@
 import { supabase } from '@/lib/supabase.ts'
 import type { TradePartners, TradeRow } from '@/types'
 
-export const getTrades = async () => {
-  const { data, error } = await supabase.from('trades').select().limit(35).order('updated_at', { ascending: false })
+export async function getActiveTrades(userFriendId: string) {
+  if (!userFriendId.match(/^\d{16}$/)) {
+    throw new Error('Error fetching active trades: Invalid friendId')
+  }
+  const { data, error } = await supabase
+    .from('trades')
+    .select()
+    .or(`and(offering_friend_id.eq.${userFriendId},offerer_ended.eq.false),and(receiving_friend_id.eq.${userFriendId},receiver_ended.eq.false)`)
 
   if (error) {
-    console.log('supa error', error)
-    throw new Error('Error fetching trades')
+    throw new Error(`Error fetching active trades: ${error.message}`)
+  }
+
+  return data.map((x) => ({ ...x, created_at: new Date(x.created_at), updated_at: new Date(x.updated_at) })) as TradeRow[]
+}
+
+export async function getAllTrades(friendId: string) {
+  if (!friendId.match(/^\d{16}$/)) {
+    throw new Error('Error fetching active trades: Invalid friendId')
   }
+  const { data, error } = await supabase.from('trades').select().or(`offering_friend_id.eq.${friendId},receiving_friend_id.eq.${friendId}`)
 
-  console.log('fetched trades', data)
+  if (error) {
+    throw new Error(`Error fetching active trades with ${friendId}: ${error.message}`)
+  }
 
   return data.map((x) => ({ ...x, created_at: new Date(x.created_at), updated_at: new Date(x.updated_at) })) as TradeRow[]
 }

frontend/src/services/trade/useTrade.ts

@@ -1,18 +1,22 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { supabase } from '@/lib/supabase'
 import { useAccount } from '@/services/account/useAccount.ts'
-import { getTrades, getTradingPartners, insertTrade, updateTrade } from '@/services/trade/tradeService.ts'
+import { getActiveTrades, getTradingPartners, insertTrade, updateTrade } from '@/services/trade/tradeService.ts'
 import type { TradeRow } from '@/types'
 
-export function useTrades() {
+export function useActiveTrades() {
+  const { data: account } = useAccount()
+  const friendId = account?.friend_id
   return useQuery({
-    queryKey: ['trade'],
-    queryFn: getTrades,
+    queryKey: ['trades'],
+    queryFn: () => getActiveTrades(friendId as string),
+    enabled: Boolean(friendId),
+    throwOnError: true,
   })
 }
 
 export function useTradingPartners(enabled: boolean, cardId: number | undefined) {
   const { data: account } = useAccount()
-
   return useQuery({
     queryKey: ['trading-partners', cardId],
     queryFn: () => getTradingPartners(account?.email as string, cardId),
@@ -27,9 +31,7 @@ export function useInsertTrade() {
 
   return useMutation({
     mutationFn: (trade: TradeRow) => insertTrade(trade),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ['trade'] })
-    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['trades'] }),
   })
 }
 
@@ -38,52 +40,30 @@ export function useUpdateTrade() {
 
   return useMutation({
     mutationFn: ({ id, trade }: { id: number; trade: Partial<TradeRow> }) => updateTrade(id, trade),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ['trade'] })
-      await queryClient.invalidateQueries({ queryKey: ['actionableTradeCount'] })
-    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['trades'] }),
   })
 }
 
 export function useActionableTradeCount() {
-  const { data: trades } = useTrades()
   const { data: account } = useAccount()
 
   return useQuery({
-    queryKey: ['actionableTradeCount', trades, account?.friend_id],
-    queryFn: () => {
-      console.log('openTrades', trades, account)
-      if (!account || !trades) {
-        console.log('no account or trades')
-        return 0
+    queryKey: ['trades', 'new'],
+    queryFn: async () => {
+      if (!account) {
+        throw new Error('Account is needed to fetch new trades')
       }
-
-      // trades where i'm the receiver but didn't accept/decline yet
-      const sentTrades = trades?.filter((t) => t.receiving_friend_id === account?.friend_id && t.status === 'offered')
-      console.log('sentTrades', sentTrades)
-
-      const nonCompletedTrades = trades?.filter((t) => {
-        if (t.status !== 'finished') {
-          return false //trade marked as completed
-        }
-
-        if (t.offering_friend_id === account?.friend_id && t.offerer_ended) {
-          return false //I initiated and also ended
-        }
-        if (t.receiving_friend_id === account?.friend_id && t.receiver_ended) {
-          return false //I received and also ended
-        }
-
-        if (!sentTrades?.includes(t)) {
-          return false //already counted in the sentTrades array, so don't count twice
-        }
-
-        return true
-      })
-
-      console.log('nonCompletedTrades', nonCompletedTrades)
-
-      return sentTrades?.length + nonCompletedTrades?.length
+      const { count, error } = await supabase
+        .from('trades')
+        .select('*', { count: 'exact', head: true })
+        .eq('status', 'offered')
+        .eq('receiving_friend_id', account?.friend_id)
+      if (error) {
+        console.log('supabase error', error)
+        throw new Error('Failed fetching new trades')
+      }
+      return count as number
     },
+    enabled: Boolean(account?.friend_id),
   })
 }