Skip to content

Commit

Permalink
feat: added pagination to order history
Browse files Browse the repository at this point in the history
  • Loading branch information
@crnbarr93
crnbarr93 committed Jul 2, 2024
1 parent eb1d73d commit 603eed6
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 50 deletions.
200 changes: 156 additions & 44 deletions packages/web/components/complex/orders-history/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import {
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useWindowVirtualizer } from "@tanstack/react-virtual";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import Link from "next/link";
import React, { useMemo } from "react";
import React, { useEffect, useMemo } from "react";

import { Icon } from "~/components/assets";
import { tableColumns } from "~/components/complex/orders-history/columns";
Expand All @@ -24,10 +25,11 @@ export const OrderHistory = observer(() => {
const { accountStore } = useStore();
const wallet = accountStore.getWallet(accountStore.osmosisChainId);

// In the future we need to merge in the past orders
const { orders, isLoading } = useOrderbookAllActiveOrders({
userAddress: wallet?.address ?? "",
});
const { orders, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage } =
useOrderbookAllActiveOrders({
userAddress: wallet?.address ?? "",
pageSize: 10,
});

const table = useReactTable<DisplayableLimitOrder>({
data: orders,
Expand Down Expand Up @@ -75,6 +77,54 @@ export const OrderHistory = observer(() => {
[table, orders]
);

const { rows } = table.getRowModel();

const rowVirtualizer = useWindowVirtualizer({
count:
rows.length +
(filledOrders.length > 0 ? 1 : 0) +
(pendingOrders.length > 0 ? 1 : 0) +
(pastOrders.length > 0 ? 1 : 0),
estimateSize: () => 84,
paddingStart: 272,
overscan: 3,
});

const virtualRows = rowVirtualizer.getVirtualItems();

const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
const paddingBottom =
virtualRows.length > 0
? rowVirtualizer.getTotalSize() -
(virtualRows?.[virtualRows.length - 1]?.end || 0)
: 0;

// pagination
const lastRow = rows[rows.length - 1];
const lastVirtualRow = virtualRows[virtualRows.length - 1];
const canLoadMore = !isLoading && !isFetchingNextPage && hasNextPage;
useEffect(() => {
if (
lastRow &&
lastVirtualRow &&
lastRow.index ===
lastVirtualRow.index -
(filledOrders.length > 0 ? 1 : 0) -
(pendingOrders.length > 0 ? 1 : 0) -
(pastOrders.length > 0 ? 1 : 0) &&
canLoadMore
)
fetchNextPage();
}, [
lastRow,
lastVirtualRow,
canLoadMore,
fetchNextPage,
filledOrders,
pendingOrders,
pastOrders,
]);

if (isLoading) {
return (
<div className="flex items-center justify-center py-10">
Expand Down Expand Up @@ -126,9 +176,14 @@ export const OrderHistory = observer(() => {
))}
</thead>
<tbody className="bg-transparent">
{paddingTop > 0 && paddingTop - 272 > 0 && (
<tr>
<td style={{ height: paddingTop - 272 }} />
</tr>
)}
{filledOrders.length > 0 && (
<>
<tr>
<tr className="h-[84px]">
<td colSpan={5} className="!p-0">
<div className="flex w-full items-end justify-between pr-4">
<div className="relative flex items-end gap-3 pt-5">
Expand Down Expand Up @@ -156,54 +211,111 @@ export const OrderHistory = observer(() => {
</div>
</td>
</tr>
{filledOrders.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))}
{virtualRows
.filter(
(row) => row.index <= filledOrders.length && row.index > 0
)
.map((virtualRow) => {
const row = rows[virtualRow.index - 1];
return (
<tr key={row.id} className="h-[84px]">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
);
})}
</>
)}
{pendingOrders.length > 0 && (
<>
<h6 className="pb-4 pt-8">Pending</h6>
{pendingOrders.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))}
<h6 className="h-[84px] pb-4 pt-8">Pending</h6>
{virtualRows
.filter(
(row) =>
row.index >=
filledOrders.length + (filledOrders.length > 0 ? 1 : 0) &&
row.index <
filledOrders.length +
(filledOrders.length > 0 ? 1 : 0) +
pendingOrders.length
)
.map((virtualRow) => {
const row =
rows[
virtualRow.index - (1 + filledOrders.length > 0 ? 1 : 0)
];
return (
<tr key={row.id} className="h-[84px]">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
);
})}
</>
)}
{pastOrders.length > 0 && (
<>
<h6 className="pb-4 pt-8">Past</h6>
{pastOrders.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))}
<h6 className="h-[84px] pb-4 pt-8">Past</h6>
{virtualRows
.filter(
(row) =>
row.index >
filledOrders.length +
pendingOrders.length +
(filledOrders.length > 0 ? 1 : 0) +
(pendingOrders.length > 0 ? 1 : 0) &&
row.index <=
orders.length +
(filledOrders.length > 0 ? 1 : 0) +
(pendingOrders.length > 0 ? 1 : 0)
)
.map((virtualRow) => {
const row =
rows[
virtualRow.index -
(1 +
(filledOrders.length > 0 ? 1 : 0) +
(pendingOrders.length > 0 ? 1 : 0))
];
return (
<tr key={row.id} className="h-[84px]">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="!px-0 !text-left">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
);
})}
</>
)}
{isFetchingNextPage && (
<tr>
<td className="!text-center" colSpan={5}>
<Spinner />
</td>
</tr>
)}
{paddingBottom > 0 && (
<tr>
<td style={{ height: paddingBottom - 272 }} />
</tr>
)}
</tbody>
</table>
</div>
Expand Down
13 changes: 8 additions & 5 deletions packages/web/hooks/limit-orders/use-orderbook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,10 @@ export type DisplayableLimitOrder = MappedLimitOrder;

export const useOrderbookAllActiveOrders = ({
userAddress,
pageSize = 10,
}: {
userAddress: string;
pageSize?: number;
}) => {
const { orderbooks } = useOrderbooks();
const addresses = orderbooks.map(({ contractAddress }) => contractAddress);
Expand All @@ -282,22 +284,21 @@ export const useOrderbookAllActiveOrders = ({
isLoading,
fetchNextPage,
isFetching,
isFetchingNextPage,
hasNextPage,
} = api.edge.orderbooks.getAllActiveOrders.useInfiniteQuery(
{
contractAddresses: addresses,
userOsmoAddress: userAddress,
limit: pageSize,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
initialCursor: 0,
keepPreviousData: true,
}
);

const { data: historicalOrders } =
api.edge.orderbooks.getHistoricalOrders.useQuery({
userOsmoAddress: userAddress,
});

const allOrders = useMemo(() => {
return orders?.pages.flatMap((page) => page.items) ?? [];
}, [orders]);
Expand All @@ -306,6 +307,8 @@ export const useOrderbookAllActiveOrders = ({
isLoading,
fetchNextPage,
isFetching,
isFetchingNextPage,
hasNextPage,
};
};

Expand Down
2 changes: 1 addition & 1 deletion packages/web/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export type PreviousTrade = {
const Home = () => {
const featureFlags = useFeatureFlags();
if (!featureFlags._isInitialized) return null;
return !featureFlags.limitOrders ? <HomeNew /> : <HomeV1 />;
return featureFlags.limitOrders ? <HomeNew /> : <HomeV1 />;
};

const HomeNew = () => {
Expand Down

0 comments on commit 603eed6

Please sign in to comment.