feat: implement pagination for purchase status responses

Author: aeltorio

client/src/pages/index.tsx

@@ -293,7 +293,7 @@ export default function IndexPage() {
                     if (item.hasPublication) {
                       setScreenshot(item.publicationScreenshot);
                     }
-                  }
+                  },
                 },
                 {
                   field: "refunded",
@@ -309,6 +309,7 @@ export default function IndexPage() {
                 },
               ]}
               dataUrl={`${import.meta.env.API_BASE_URL}/purchase-status?limitToNotRefunded=${toggleAllPurchases ? "false" : "true"}`}
+              defaultPageSize={10}
               defaultSortField="date"
               defaultSortOrder="desc"
               permission={import.meta.env.READ_PERMISSION}

cloudflare-worker/src/db/d1-db.ts

@@ -41,6 +41,7 @@ import {
 	PublicationsRepository,
 	PurchasesRepository,
 	PurchaseStatus,
+	PurchaseStatusResponse,
 	RefundsRepository,
 	TestersRepository,
 } from "./db";
@@ -550,7 +551,7 @@ export class CloudflareD1DB implements FeedbackFlowDB {
 			limit?: number,
 			sort?: string,
 			order?: string,
-		): Promise<PurchaseStatus[]> => {
+		): Promise<PurchaseStatusResponse> => {
 			if (!limitToNotRefunded) {
 				limitToNotRefunded = false; // Default to false
 			}
@@ -590,15 +591,19 @@ export class CloudflareD1DB implements FeedbackFlowDB {
 			// Pagination logic
 			const offset = page && limit ? (page - 1) * limit : 0;
 
+			const countQuery = `SELECT COUNT(*) as count FROM purchase_status WHERE tester_uuid = ? ${limitToNotRefundedQuery}`;
+			const countStatement = this.db.prepare(countQuery).bind(testerUuid);
+			const { results: countResults } = await countStatement.all();
+			const totalCount = countResults[0]?.count as number;
 			const preparedStatement = this.db
 				.prepare(
 					`SELECT * FROM purchase_status WHERE tester_uuid = ? ${limitToNotRefundedQuery} ORDER BY ${sort} ${order.toUpperCase()} LIMIT ? OFFSET ?`,
 				)
 				.bind(testerUuid, limit, offset);
 
 			const { results } = await preparedStatement.all();
-
-			return results.map(
+			
+			const mappedResults = results.map(
 				(row) =>
 					({
 						purchase: row.id as string,
@@ -615,6 +620,27 @@ export class CloudflareD1DB implements FeedbackFlowDB {
 						purchaseScreenshot: row.purchase_screenshot as string,
 					}) as PurchaseStatus,
 			);
+			// Add pagination info to the result
+			const totalPages = Math.ceil(totalCount / limit);
+			const currentPage = page;
+			const hasNextPage = currentPage < totalPages;
+			const hasPreviousPage = currentPage > 1;
+			const nextPage = hasNextPage ? currentPage + 1 : null;
+			const previousPage = hasPreviousPage ? currentPage - 1 : null;
+			const pageInfo = {
+				totalCount,
+				totalPages,
+				currentPage,
+				hasNextPage,
+				hasPreviousPage,
+				nextPage,
+				previousPage,
+			};
+			// Return the results and pagination info
+			return {
+				results: mappedResults,
+				pageInfo,
+			} as PurchaseStatusResponse;
 		},
 	};
 

cloudflare-worker/src/db/db.ts

@@ -48,6 +48,7 @@ export interface DATABASESCHEMA {
 	refunds: Refund[];
 }
 
+export interface PurchaseStatusResponse { results: PurchaseStatus[]; pageInfo: { totalCount: number; totalPages: number; currentPage: number; hasNextPage: boolean; hasPreviousPage: boolean; nextPage: number | null; previousPage: number | null; }; }
 export interface PurchaseStatus {
 	purchase: string;
 	testerUuid: string;
@@ -182,7 +183,7 @@ export interface PurchasesRepository {
 		limit?: number,
 		sort?: string,
 		order?: string,
-	): Promise<PurchaseStatus[]>;
+	): Promise<PurchaseStatusResponse>;
 }
 
 export interface FeedbacksRepository {

cloudflare-worker/src/db/in-memory-db.ts

@@ -28,7 +28,7 @@ import { v4 as uuidv4 } from "uuid";
 
 import { Feedback, Publication, Purchase, Refund, Tester } from "../types/data";
 
-import { DATABASESCHEMA, FeedbackFlowDB, PurchaseStatus } from "./db";
+import { DATABASESCHEMA, FeedbackFlowDB, PurchaseStatus, PurchaseStatusResponse } from "./db";
 
 /**
  * In-memory database class for testing purposes
@@ -380,7 +380,7 @@ export class InMemoryDB implements FeedbackFlowDB {
 			limit?: number,
 			sort?: string,
 			order?: string,
-		): Promise<PurchaseStatus[]> => {
+		): Promise<PurchaseStatusResponse> => {
 			if (!limitToNotRefunded) {
 				limitToNotRefunded = false; // Default to false
 			}
@@ -420,7 +420,7 @@ export class InMemoryDB implements FeedbackFlowDB {
 			);
 
 			// Build the status for each purchase
-			const result = testerPurchases
+			let globalResult = testerPurchases
 				.map((purchase) => {
 					// Check for related feedback, publication, and refund
 					const hasFeedback = this.data.feedbacks.find(
@@ -450,7 +450,13 @@ export class InMemoryDB implements FeedbackFlowDB {
 						publicationScreenshot: hasPublication?.screenshot,
 						purchaseSreenshot: purchase.screenshot,
 					} as PurchaseStatus;
-				})
+				});
+
+				// Filter out refunded purchases if requested
+			if (limitToNotRefunded) {
+				globalResult =  globalResult.filter((purchase) => !purchase.refunded);
+			}
+				const result = globalResult
 				.slice(offset, offset + limit)
 				.sort((a, b) => {
 					if (sort === "date") {
@@ -468,13 +474,22 @@ export class InMemoryDB implements FeedbackFlowDB {
 					}
 				});
 
-			// Filter out refunded purchases if requested
-			if (limitToNotRefunded) {
-				return result.filter((purchase) => !purchase.refunded);
-			}
-
-			return result;
-		},
+			// Construct the response object with pagination info
+			const pageInfo = {
+				totalCount: globalResult.length,
+				totalPages: Math.ceil(globalResult.length / limit),
+				currentPage: page,
+				hasNextPage: page < Math.ceil(globalResult.length / limit),
+				hasPreviousPage: page > 1,
+				nextPage: page < Math.ceil(globalResult.length / limit) ? page + 1 : null,
+				previousPage: page > 1 ? page - 1 : null,
+			};
+			const response: PurchaseStatusResponse = {
+				results: result,
+				pageInfo,
+			};
+			return response;
+	}
 	};
 
 	/**

cloudflare-worker/src/routes/index.ts

@@ -1115,9 +1115,9 @@ const purchaseRoutes = (router: Router, env: Env) => {
 				return new Response(
 					JSON.stringify({
 						success: true,
-						data: purchases,
-						total: purchases.length,
-						page,
+						data: purchases.results,
+						total: purchases.pageInfo.totalCount,
+						page: purchases.pageInfo.currentPage,
 						limit,
 					}),
 					{