Change API for get OrdersTable

src/api/operator/index.ts

@@ -12,6 +12,7 @@ export const {
   // functions that have a mock
   getOrder,
   getOrders,
+  getAccountOrders,
   getTrades,
   // functions that do not have a mock
   getOrderLink = realApi.getOrderLink,

src/api/operator/operatorApi.ts

@@ -7,6 +7,7 @@ import { OrderCreation } from './signatures'
 import {
   FeeInformation,
   GetOrderParams,
+  GetAccountOrdersParams,
   GetOrdersParams,
   GetTradesParams,
   OrderID,
@@ -217,6 +218,28 @@ export async function getOrders(params: GetOrdersParams): Promise<RawOrder[]> {
   return _fetchQuery(networkId, queryString)
 }
 
+/**
+ * Gets a list of orders of one user paginated
+ *
+ * Optional filters:
+ *  - owner: address
+ *  - offset: int
+ *  - limit: int
+ */
+export async function getAccountOrders(params: GetAccountOrdersParams): Promise<RawOrder[]> {
+  const { networkId, owner, offset, limit } = params
+
+  console.log(
+    `[getAccountOrders] Fetching orders on network ${networkId} with filters: owner=${owner} offset=${offset} limit=${limit}`,
+  )
+
+  const searchString = buildSearchString({ offset: String(offset), limit: String(limit) })
+
+  const queryString = `/account/${owner}/orders/` + searchString
+
+  return _fetchQuery(networkId, queryString)
+}
+
 /**
  * Gets a list of trades
  *

src/api/operator/operatorMock.ts

@@ -1,4 +1,4 @@
-import { GetOrderParams, GetOrdersParams, GetTradesParams, RawOrder, RawTrade } from './types'
+import { GetOrderParams, GetOrdersParams, GetAccountOrdersParams, GetTradesParams, RawOrder, RawTrade } from './types'
 
 import { RAW_ORDER, RAW_TRADE } from '../../../test/data'
 
@@ -21,6 +21,16 @@ export async function getOrders(params: GetOrdersParams): Promise<RawOrder[]> {
   return [order]
 }
 
+export async function getAccountOrders(params: GetAccountOrdersParams): Promise<RawOrder[]> {
+  const { owner, networkId } = params
+
+  const order = await getOrder({ networkId, orderId: 'whatever' })
+
+  order.owner = owner || order.owner
+
+  return [order]
+}
+
 export async function getTrades(params: GetTradesParams): Promise<RawTrade[]> {
   const { owner, orderId } = params
 

src/api/operator/types.ts

@@ -118,6 +118,12 @@ export type GetOrderParams = WithNetworkId & {
   orderId: string
 }
 
+export type GetAccountOrdersParams = WithNetworkId & {
+  owner: string
+  offset?: number
+  limit?: number
+}
+
 export type GetOrdersParams = WithNetworkId & {
   owner: string
   minValidTo: number

src/apps/explorer/components/OrdersTableWidget/useGetOrders.tsx

@@ -1,33 +1,11 @@
 import { useState, useCallback, useEffect } from 'react'
-import { subMinutes, getTime } from 'date-fns'
 
 import { Network } from 'types'
 import { useMultipleErc20 } from 'hooks/useErc20'
-import { getOrders, Order, RawOrder } from 'api/operator'
+import { getAccountOrders, Order } from 'api/operator'
 import { useNetworkId } from 'state/network'
 import { transformOrder } from 'utils'
-import { ORDERS_HISTORY_MINUTES_AGO, ORDERS_QUERY_INTERVAL } from 'apps/explorer/const'
-
-/**
- *
- * Merge new RawOrders consulted, that may have changed status
- *
- * @param previousOrders List of orders
- * @param newOrdersFetched List of fetched block order that could have changed
- */
-export function mergeNewOrders(previousOrders: Order[], newOrdersFetched: RawOrder[]): Order[] {
-  if (newOrdersFetched.length === 0) return previousOrders
-
-  // find the order up to which it is to be replaced
-  const lastOrder = newOrdersFetched[newOrdersFetched.length - 1]
-  const positionLastOrder = previousOrders.findIndex((o) => o.uid === lastOrder.uid)
-  if (positionLastOrder === -1) {
-    return newOrdersFetched.map((order) => transformOrder(order)).concat(previousOrders)
-  }
-
-  const slicedOrders: Order[] = previousOrders.slice(positionLastOrder + 1)
-  return newOrdersFetched.map((order) => transformOrder(order)).concat(slicedOrders)
-}
+import { ORDERS_QUERY_INTERVAL } from 'apps/explorer/const'
 
 function isObjectEmpty(object: Record<string, unknown>): boolean {
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
@@ -44,7 +22,7 @@ type Result = {
   isLoading: boolean
 }
 
-export function useGetOrders(ownerAddress: string): Result {
+export function useGetOrders(ownerAddress: string, offset = 0, limit = 1000): Result {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState('')
   const [orders, setOrders] = useState<Order[]>([])
@@ -54,12 +32,12 @@ export function useGetOrders(ownerAddress: string): Result {
   const [mountNewOrders, setMountNewOrders] = useState(false)
 
   const fetchOrders = useCallback(
-    async (network: Network, owner: string, minTimeHistoryTimeStamp = 0): Promise<void> => {
+    async (network: Network, owner: string): Promise<void> => {
       setIsLoading(true)
       setError('')
 
       try {
-        const ordersFetched = await getOrders({ networkId: network, owner, minValidTo: minTimeHistoryTimeStamp })
+        const ordersFetched = await getAccountOrders({ networkId: network, owner, offset, limit })
         const newErc20Addresses = ordersFetched.reduce((accumulator: string[], element) => {
           const updateAccumulator = (tokenAddress: string): void => {
             if (accumulator.indexOf(tokenAddress) === -1) {
@@ -73,10 +51,8 @@ export function useGetOrders(ownerAddress: string): Result {
         }, [])
 
         setErc20Addresses(newErc20Addresses)
-        // TODO -> For the moment it is neccesary to sort by date
-        ordersFetched.sort((a, b) => +new Date(b.creationDate) - +new Date(a.creationDate))
 
-        setOrders((previousOrders) => mergeNewOrders(previousOrders, ordersFetched))
+        setOrders(ordersFetched.map((order) => transformOrder(order)))
         setMountNewOrders(true)
       } catch (e) {
         const msg = `Failed to fetch orders`
@@ -86,21 +62,18 @@ export function useGetOrders(ownerAddress: string): Result {
         setIsLoading(false)
       }
     },
-    [],
+    [limit, offset],
   )
 
   useEffect(() => {
     if (!networkId) {
       return
     }
-    const getOrUpdateOrders = (minHistoryTime?: number): Promise<void> =>
-      fetchOrders(networkId, ownerAddress, minHistoryTime)
 
-    getOrUpdateOrders()
+    fetchOrders(networkId, ownerAddress)
 
     const intervalId: NodeJS.Timeout = setInterval(() => {
-      const minutesAgoTimestamp = getTime(subMinutes(new Date(), ORDERS_HISTORY_MINUTES_AGO))
-      getOrUpdateOrders(Math.floor(minutesAgoTimestamp / 1000))
+      fetchOrders(networkId, ownerAddress)
     }, ORDERS_QUERY_INTERVAL)
 
     return (): void => {