destination pagination api create

client/src/api/destination.ts

@@ -25,3 +25,14 @@ export async function getDestinations() {
     return data;
   }
 
+  export async function getDestinationPagination(skip: string, limit: string) {
+    const res = await fetch(`http://localhost:8080/api/destination/page/?skip=${skip}&limit=${limit}`, {
+      method: "GET",
+      cache: "no-store",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    const data = await res.json();
+    return data;
+  }

client/src/app/destinations/page.tsx

@@ -1,12 +1,43 @@
-import Gallery from '@/components/gallery/Gallery'
-import React from 'react'
+import { getDestinationPagination } from "@/api/destination";
+import GalleryComponent from "@/components/house/GalleryComponent";
+import Link from "next/link";
 
-const Destinations = () => {
+const Destinations = async ({ params }:{ params: { page: string }}) => {
+  let page = Number(params?.page || 1);
+  let itemsPerPage = 4;
+  let skip = (page - 1) * itemsPerPage;
+  const limit = (skip + itemsPerPage).toString();
+
+  const res = await getDestinationPagination(skip.toString(),limit);
+
+  const destination = res.destinations;
   return (
-    <div>
-        <Gallery />
+    <div className="pt-4">
+      <div className="grid grid-cols-4 gap-4">
+        {destination.map(
+          (destination: {
+            id: string;
+            title: string;
+            image: string;
+            price: number;
+          }) => (
+            <Link
+              key={destination.id}
+              href={`/listings/${destination.id}`}
+              passHref
+            >
+              <GalleryComponent
+                title={destination.title}
+                image={destination.image}
+                price={destination.price}
+                id={destination.id}
+              />
+            </Link>
+          )
+        )}
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Destinations
+export default Destinations;

server/controllers/destinationController.js

@@ -39,9 +39,23 @@ const deleteDestination = async (req, res) => {
     }
 }
 
+const getDestinationsSkipAndLimit = async (req, res) => {
+    const skip = parseInt(req.query.skip);
+    const limit = parseInt(req.query.limit);
+    console.log(req.query);
+    try {
+        const destinations = await Destination.getDestinationsForPagination(skip,limit);
+        res.json({ status: 'ok', destinations });
+    } catch (error) {
+        console.log(error.message);
+        res.json({ status: 'error', error: error.message });
+    }
+}
+
 module.exports = {
     getDestinations,
     getDestination,
     addDestination,
     deleteDestination,
+    getDestinationsSkipAndLimit
 }

server/models/destinationModel.js

@@ -15,7 +15,7 @@ const Destination = new mongoose.Schema(
 );
 
 Destination.statics.getDestinations = async function () {
-  const destinations = await this.find({},'id title price image');
+  const destinations = await this.find({}, "id title price image");
   return destinations;
 };
 
@@ -25,13 +25,23 @@ Destination.statics.getDestination = async function (id) {
 };
 
 Destination.statics.addDestination = async function (destination) {
-    const newDestination = await this.create(destination);
-    return newDestination;
-    }
+  const newDestination = await this.create(destination);
+  return newDestination;
+};
 
 Destination.statics.deleteDestination = async function (id) {
-    const destination = await this.findOneAndDelete({ id });
-    return destination;
-}
+  const destination = await this.findOneAndDelete({ id });
+  return destination;
+};
+
+Destination.statics.getDestinationsForPagination = async function (
+  skip,
+  limit
+) {
+  const destinations = await this.find({}, "id title price image")
+    .skip(skip)
+    .limit(limit);
+  return destinations;
+};
 
-module.exports = mongoose.model("Destination", Destination);
+module.exports = mongoose.model("Destination", Destination);

server/routes/destinationRoutes.js

@@ -6,6 +6,7 @@ const {
   getDestination,
   addDestination,
   deleteDestination,
+  getDestinationsSkipAndLimit,
 } = require("../controllers/destinationController");
 
 // Get all destinations
@@ -20,4 +21,6 @@ router.post("/", addDestination);
 // Delete a destination
 router.delete("/:id", deleteDestination);
 
+router.get("/page", getDestinationsSkipAndLimit);
+
 module.exports = router;