Merge pull request #8 from QuantGeekDev/feature/property-pagination

Feature/property pagination

propertiesSampleData.json

@@ -3,7 +3,7 @@
 	"name": "Villa 6",
 	"price": 670000,
 	"availability": true,
-	"videoFileId": "https://www.dropbox.com/sh/t6330gcog0lz7dh/AADqYOkfEnvIQ0RF6Lr0eRBja?dl=0&preview=Video+1+SaliSol+Hills+Showhouse+2023.mp4",
+	"videoFileId": "BAACAgQAAxkBAAMSZZfGuavHENo8Q6I0958piOATHC0AAlsPAAJrdMFQniWsDNpoNOs0BA",
 	"thumbnailUrl": "https://uc470239d7d0c1c41f915323d5c8.previews.dropboxusercontent.com/p/thumb/ACLJ7D6O6bqDe2gRpcdVMDPaxNwZYWAenzJD8IQuZKGoaWdojbcZHMHHw0X-6CUmisfriGocNXvxH1tLSty6kEh3PftuhgeMPVUlQuhD7KmGYWfmqnWQKPY9bwnKjU-qxJJv7c2StyA_xn6H4l4MCTF0dWVHalbKeTT5aW5ucsm5f6raAcqCXx7mRQto9AkM3lHzDi8dw7imp65me_EFKUmEziFK108IecRwKQ1KZdNWrjVIuAcaIyGzq51l--Kphv6rh9tHaSXx0DMv_MX0vtYbL751cve0h9YGrvGPnFUMKhP6oPqXAFzLnSJCc3qnbzfaGuaWeI7sjBLh5-MXtt8JTZfsU8-om8Kv1k0gtPF4dg/p.png",
 	"builtMetersSquared": 168,
 	"plotMetersSquared": 532,

src/controllers/properties.ts

@@ -1,28 +1,28 @@
 import { Composer } from "grammy";
 import type { CustomContext } from "../types/context.js";
 import type { Property } from "../types/database.js";
-import {
-	generatePropertyDescription,
-	generatePropertyPhotoAlbum
-} from "../services/Property/property.service.js";
+import { displayProperty } from "../services/Property/property.service.js";
 
 export const propertiesController = new Composer<CustomContext>();
+let currentPropertyIndex = 0;
 
 propertiesController.command("properties", async ctx => {
 	const properties = (await ctx.db.property.find({}).toArray()) as Property[];
-	const currentPropertyIndex = 0;
+	await displayProperty(ctx, properties, currentPropertyIndex);
 
-	const currentProperty = properties[currentPropertyIndex];
-	const totalProperties = properties.length;
-
-	const { videoFileId: videoUrl, albumUrls } = currentProperty;
+	propertiesController.callbackQuery("next-property", async ctx => {
+		ctx.answerCallbackQuery("");
+		if (currentPropertyIndex + 1 < properties.length) {
+			currentPropertyIndex++;
+			await displayProperty(ctx, properties, currentPropertyIndex);
+		}
+	});
 
-	const propertyDescription = generatePropertyDescription(currentProperty);
-	const propertyPhotoAlbum = generatePropertyPhotoAlbum(albumUrls);
-	await ctx.reply(`Property ${currentPropertyIndex + 1}/${totalProperties}`);
-	await ctx.reply(propertyDescription, {
-		parse_mode: "MarkdownV2"
+	propertiesController.callbackQuery("previous-property", async ctx => {
+		ctx.answerCallbackQuery("");
+		if (currentPropertyIndex + 1 > 0) {
+			currentPropertyIndex--;
+			await displayProperty(ctx, properties, currentPropertyIndex);
+		}
 	});
-	await ctx.replyWithVideo(videoUrl);
-	await ctx.replyWithMediaGroup(propertyPhotoAlbum);
 });

src/menus/propertyMenu.ts

@@ -0,0 +1,15 @@
+import { InlineKeyboard } from "grammy";
+
+export const fullPropertyControlKeyboard = new InlineKeyboard()
+	.text("« Previous Property", "previous-property")
+	.text("Next Property » ", "next-property");
+
+export const nextPropertyControlKeyboard = new InlineKeyboard().text(
+	"Next Property » ",
+	"next-property"
+);
+
+export const previousPropertyControlKeyboard = new InlineKeyboard().text(
+	"« Previous Property",
+	"previous-property"
+);

src/services/Property/property.service.ts

@@ -1,19 +1,24 @@
 import { type InputMediaPhoto } from "grammy/types";
 import { InputMediaBuilder } from "grammy";
 import type { Property } from "../../types/database.js";
+import {
+	fullPropertyControlKeyboard,
+	nextPropertyControlKeyboard,
+	previousPropertyControlKeyboard
+} from "../../menus/propertyMenu.js";
 
 export const generatePropertyDescription = (property: Property): string => {
 	const {
 		name,
-		collectionName,
+		collection,
 		availability,
 		price,
 		plotMetersSquared,
 		builtMetersSquared
 	} = property;
 
 	// Property description uses Telegram's Markdown V2
-	const propertyDescription = `*🏠 ${collectionName}: ${name}*\n\nPlot Size: ${plotMetersSquared}m2 \nBuilt Meters: ${builtMetersSquared}m2\nPrice: ${price
+	const propertyDescription = `*🏠 ${collection}: ${name}*\n\nPlot Size: ${plotMetersSquared}m2 \nBuilt Meters: ${builtMetersSquared}m2\nPrice: ${price
 		.toString()
 		.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}€${
 		availability ? "" : "Reserved"
@@ -34,3 +39,29 @@ export const generatePropertyPhotoAlbum = (
 
 	return photoAlbum;
 };
+
+export const displayProperty = async (
+	ctx: CustomContext,
+	properties: Property[],
+	currentPropertyIndex: number
+) => {
+	const totalProperties = properties.length;
+	const currentProperty = properties[currentPropertyIndex];
+	const { videoFileId, albumUrls } = currentProperty;
+
+	const propertyDescription = generatePropertyDescription(currentProperty);
+	const propertyPhotoAlbum = generatePropertyPhotoAlbum(albumUrls);
+
+	await ctx.reply(`Property ${currentPropertyIndex + 1}/${totalProperties}`);
+	await ctx.reply(propertyDescription, { parse_mode: "MarkdownV2" });
+	await ctx.replyWithVideo(videoFileId);
+	await ctx.replyWithMediaGroup(propertyPhotoAlbum);
+	await ctx.reply(`Property ${currentPropertyIndex + 1}/${totalProperties}`, {
+		reply_markup:
+			currentPropertyIndex == 0
+				? nextPropertyControlKeyboard
+				: currentPropertyIndex + 1 < totalProperties
+				? fullPropertyControlKeyboard
+				: previousPropertyControlKeyboard
+	});
+};

src/types/database.ts

@@ -7,7 +7,7 @@ export interface User {
 
 export interface Property {
 	_id: string;
-	collectionName: "SaliSol Hills" | "SaliSol Resort" | "SaliSol Golf";
+	collection: "SaliSol Hills" | "SaliSol Resort" | "SaliSol Golf";
 	name: string;
 	price: number;
 	availability: boolean;