fix: offer table

Zafei-Erin · Mar 5, 2024 · 2aeb0dc · 2aeb0dc
1 parent 5aa8529
commit 2aeb0dc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/backend/src/router/offers/getOffersByNFT.ts b/backend/src/router/offers/getOffersByNFT.ts
@@ -2,7 +2,6 @@ import { NextFunction, Request, Response } from "express";
 import { GetOffersRequest } from "@zafei/nft_mkp_types";
 import { prisma } from "../../prisma";
 
-
 const DEFAULT_PARAMS = {
   skip: 0,
   take: 6,
@@ -33,7 +32,9 @@ export const getOffersByNFT = async (
       },
     });
 
-    res.status(200).json(offers);
+    const total = await prisma.offer.count();
+
+    res.status(200).json({ offers, total });
   } catch (error) {
     next(error);
   }

diff --git a/frontend/src/pages/Item/OfferTable.tsx b/frontend/src/pages/Item/OfferTable.tsx
@@ -32,28 +32,37 @@ type OfferTableProps = {
   nftId: number;
 };
 type OfferWithUSD = Offer & { priceUSD: number };
+type SortByParams = Pick<GetOffersRequest, "sortBy" | "sortDir">;
 
 const apiURL = import.meta.env.VITE_API_URL;
 const ES_API_KEY = import.meta.env.VITE_ETHERSCAN_API_KEY;
+const PAGE_SIZE = 4;
 
 const ethFetcher: Fetcher<EthPriceType, string> = (url: string) =>
   fetch(url)
     .then((data) => data.json())
     .then((res) => {
       return res.result;
     });
-const offerFetcher: Fetcher<Offer[], FetchWithParams> = ({ url, params }) => {
+const offerFetcher: Fetcher<
+  { offers: Offer[] } & { total: string },
+  FetchWithParams
+> = ({ url, params }) => {
   const newUrl = new URL(url);
   newUrl.search = new URLSearchParams(params).toString();
   return fetch(newUrl).then((data) => data.json());
 };
 
 export const OfferTable: React.FC<OfferTableProps> = ({ nftId }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [sortByParams, setSortByParams] = useState<SortByParams>({
+    sortBy: "createAt",
+    sortDir: "desc",
+  });
   const { accountAddr } = useWallet();
   const [{ pageIndex, pageSize }, setPagination] = useState({
     pageIndex: 0,
-    pageSize: 1,
+    pageSize: PAGE_SIZE,
   });
   const pagination = useMemo(
     () => ({
@@ -69,33 +78,39 @@ export const OfferTable: React.FC<OfferTableProps> = ({ nftId }) => {
   );
 
   const params: GetOffersRequest = {
-    take: 6,
-    skip: 0,
-    sortBy: "createAt",
-    sortDir: "desc",
+    take: PAGE_SIZE,
+    skip: pageIndex * pageSize,
+    sortBy: sortByParams.sortBy,
+    sortDir: sortByParams.sortDir,
   };
-  const { data: offers } = useSWR(
+  const { data: resp } = useSWR(
     { url: `${apiURL}/offers/${nftId}`, params: params },
     offerFetcher,
     {
       suspense: true,
     },
   );
 
+  const offers = resp.offers;
   const OfferWithUSD: OfferWithUSD[] = offers.map((origin) => {
     return { ...origin, priceUSD: origin.price * parseFloat(ethPrice.ethusd) };
   });
 
   const columnHelper = createColumnHelper<OfferWithUSD>();
-
   const columns = [
     columnHelper.accessor("price", {
       header: ({ column }) => {
         return (
           <Button
             className="px-0"
             variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === "asc");
+              setSortByParams({
+                sortBy: "price",
+                sortDir: column.getIsSorted() === "asc" ? "desc" : "asc",
+              });
+            }}
           >
             Price
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -119,7 +134,13 @@ export const OfferTable: React.FC<OfferTableProps> = ({ nftId }) => {
           <Button
             className="px-0"
             variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === "asc");
+              setSortByParams({
+                sortBy: "price",
+                sortDir: column.getIsSorted() === "asc" ? "desc" : "asc",
+              });
+            }}
           >
             USD Price
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -142,7 +163,13 @@ export const OfferTable: React.FC<OfferTableProps> = ({ nftId }) => {
           <Button
             className="px-0"
             variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === "asc");
+              setSortByParams({
+                sortBy: "expireAt",
+                sortDir: column.getIsSorted() === "asc" ? "desc" : "asc",
+              });
+            }}
           >
             Expiration
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -231,6 +258,7 @@ export const OfferTable: React.FC<OfferTableProps> = ({ nftId }) => {
       sorting,
       pagination,
     },
+    pageCount: parseInt(resp.total) || 0,
   });
 
   return (