Add navigateToPage function for pagination handling on profile page

frontend/src/components/pages/Profile.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { format } from "date-fns";
 import { paths } from "gen/api";
@@ -160,8 +160,20 @@ const Profile = () => {
   const [canEdit, setCanEdit] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [listingIds, setListingIds] = useState<string[] | null>(null);
+  const [moreListings, setMoreListings] = useState<boolean>(false);
 
-  const pageNumber = parseInt("1", 10);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const page = searchParams.get("page");
+  const pageNumber = parseInt(page || "1", 10);
+  if (isNaN(pageNumber) || pageNumber < 0) {
+    navigate("/404");
+  }
+
+  const prevButton = pageNumber > 1;
+  const nextButton = moreListings;
+  const hasButton = prevButton || nextButton;
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -202,7 +214,10 @@ const Profile = () => {
         }
       }
     };
+
     const fetchUserListing = async () => {
+      setListingIds(null);
+
       if (id === undefined) {
         const { data, error } = await auth.client.GET("/listings/me", {
           params: {
@@ -216,6 +231,7 @@ const Profile = () => {
           addErrorAlert(error);
         } else {
           setListingIds(data.listing_ids);
+          setMoreListings(data.has_next);
         }
       } else {
         try {
@@ -232,6 +248,7 @@ const Profile = () => {
             addErrorAlert(error);
           } else {
             setListingIds(data.listing_ids);
+            setMoreListings(data.has_next);
           }
         } catch (err) {
           console.error("Failed to fetch User Listings", err);
@@ -243,7 +260,14 @@ const Profile = () => {
       fetchUser();
       fetchUserListing();
     }
-  }, [id, auth.currentUser, auth.isLoading, auth.client, addErrorAlert]);
+  }, [
+    id,
+    auth.currentUser,
+    auth.isLoading,
+    auth.client,
+    addErrorAlert,
+    pageNumber,
+  ]);
 
   const handleUpdateProfile = async (updatedUser: Partial<UserResponse>) => {
     try {
@@ -261,6 +285,12 @@ const Profile = () => {
     }
   };
 
+  const navigateToPage = (pageNumber: number) => {
+    const profileURL = id ? `/profile/${id}` : "/profile";
+    const paginationURL = `${profileURL}?page=${pageNumber}`;
+    navigate(paginationURL);
+  };
+
   if (auth.isLoading || isLoading) {
     return (
       <div className="flex justify-center items-center pt-8">
@@ -276,11 +306,33 @@ const Profile = () => {
         onUpdateProfile={handleUpdateProfile}
         canEdit={canEdit}
       />
-      {listingIds && (
-        <div className="mt-4">
-          <ListingGrid listingIds={listingIds} />
-        </div>
-      )}
+      <div>
+        {hasButton && (
+          <div className="flex justify-center mt-4">
+            {prevButton && (
+              <button
+                className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-l mr-auto"
+                onClick={() => navigateToPage(pageNumber - 1)}
+              >
+                Previous
+              </button>
+            )}
+            {nextButton && (
+              <button
+                className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-r ml-auto"
+                onClick={() => navigateToPage(pageNumber + 1)}
+              >
+                Next
+              </button>
+            )}
+          </div>
+        )}
+        {listingIds && (
+          <div className="mt-4">
+            <ListingGrid listingIds={listingIds} />
+          </div>
+        )}
+      </div>
     </>
   ) : (
     <div className="flex justify-center items-center pt-8">