From 3679c82b1065c2f7e4da055a1d1a0daf175f51e5 Mon Sep 17 00:00:00 2001
From: Deepak Paul <rudra.ad7@gmail.com>
Date: Wed, 19 Jul 2023 22:38:08 +0530
Subject: [PATCH] fix: load more button visibility issue resolved and now loads
 data upon clicking

---
 src/components/ListRepositories.tsx   |  8 ++++----
 src/components/RecentRepoListWrap.tsx | 15 +++++++--------
 src/components/RepoListWrap.tsx       |  8 +++++---
 src/components/VotedRepoListWrap.tsx  |  8 +++++---
 src/hooks/useRepositoriesList.ts      |  6 +++---
 src/hooks/useVotedRepositoriesList.ts |  6 +++---
 6 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/ListRepositories.tsx b/src/components/ListRepositories.tsx
index b0703da6..7885af01 100644
--- a/src/components/ListRepositories.tsx
+++ b/src/components/ListRepositories.tsx
@@ -4,24 +4,24 @@ import Skeleton from "react-loading-skeleton";
 
 export declare interface ListRepositoriesProps {
   activeLink: string | null;
-  limit: number;
   handleLoadingMore: () => void;
   fetchedData: DbRepo[];
   title: string;
+  hasNextPage: boolean;
 }
 
 const ListRepositories = ({
   activeLink,
-  limit,
   handleLoadingMore,
   fetchedData,
   title,
+  hasNextPage,
 }: ListRepositoriesProps): JSX.Element => {
   if (!fetchedData.length) {
     return (
       <div className="mx-auto max-w-7xl px-4 mt-10">
         <div className="flex flex-col gap-y-5 overflow-hidden mb-12">
-          {Array.from(Array(10).keys()).map(item => (
+          {Array.from(Array(25).keys()).map(item => (
             <div
               key={item}
               className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
@@ -58,7 +58,7 @@ const ListRepositories = ({
         ))}
       </div>
 
-      {fetchedData.length > 0 && activeLink !== "myVotes" && limit <= 100 && (
+      {fetchedData.length > 0 && activeLink !== "myVotes" && hasNextPage && (
         <div className="flex justify-center">
           <button
             className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
diff --git a/src/components/RecentRepoListWrap.tsx b/src/components/RecentRepoListWrap.tsx
index 5170a332..a0dfb8c8 100644
--- a/src/components/RecentRepoListWrap.tsx
+++ b/src/components/RecentRepoListWrap.tsx
@@ -34,8 +34,9 @@ const RecentRepoListWrap = (): JSX.Element => {
 
   const activeLink = (locationsHash[location.pathname] ?? "recent") as keyof typeof RepoOrderByEnum;
   const limit = parseLimitValue(searchParams.get("limit"));
+  const pageNumber = parseInt(searchParams.get("pageNumber")!) || 1;
 
-  const { data, isLoading } = useRepositoriesList(RepoOrderByEnum[activeLink], limit);
+  const { data, meta, isLoading } = useRepositoriesList(RepoOrderByEnum[activeLink], limit, pageNumber);
   const [thisWeek, setThisWeek] = useState<DbRepo[] | null>(null);
   const [lastWeek, setLastWeek] = useState<DbRepo[] | null>(null);
   const [older, setOlder] = useState<DbRepo[] | null>(null);
@@ -76,7 +77,7 @@ const RecentRepoListWrap = (): JSX.Element => {
   }, [data]);
 
   const handleLoadingMore = () => {
-    setSearchParams({ limit: String(limit + 10) });
+    setSearchParams({ pageNumber: String(pageNumber + 1), limit: String(limit) });
   };
 
   return (
@@ -85,7 +86,7 @@ const RecentRepoListWrap = (): JSX.Element => {
         ? (
           <div className="mx-auto max-w-7xl px-4 mt-10">
             <div className="flex flex-col gap-y-5 overflow-hidden mb-12">
-              {Array.from(Array(10).keys()).map(item => (
+              {Array.from(Array(25).keys()).map(item => (
                 <div
                   key={item}
                   className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
@@ -101,15 +102,13 @@ const RecentRepoListWrap = (): JSX.Element => {
         )
         : (
           <>
-            {/* limit set to 101, a temporary fix to hide "Load More" from "This Week" & "Last Week".
-              TODO: Make a real solution for this. */}
 
             {thisWeek && thisWeek.length > 0 && (
               <ListRepositories
                 activeLink={activeLink}
                 fetchedData={thisWeek}
                 handleLoadingMore={handleLoadingMore}
-                limit={101}
+                hasNextPage={meta.hasNextPage}
                 title="This Week"
               />
             )}
@@ -119,7 +118,7 @@ const RecentRepoListWrap = (): JSX.Element => {
                 activeLink={activeLink}
                 fetchedData={lastWeek}
                 handleLoadingMore={handleLoadingMore}
-                limit={101}
+                hasNextPage={meta.hasNextPage}
                 title="Last Week"
               />
             )}
@@ -129,7 +128,7 @@ const RecentRepoListWrap = (): JSX.Element => {
                 activeLink={activeLink}
                 fetchedData={older}
                 handleLoadingMore={handleLoadingMore}
-                limit={limit}
+                hasNextPage={meta.hasNextPage}
                 title="Older"
               />
             )}
diff --git a/src/components/RepoListWrap.tsx b/src/components/RepoListWrap.tsx
index d186635c..69756920 100644
--- a/src/components/RepoListWrap.tsx
+++ b/src/components/RepoListWrap.tsx
@@ -33,11 +33,13 @@ const RepoListWrap = (): JSX.Element => {
 
   const activeLink = (locationsHash[location.pathname] ?? "recent") as keyof typeof RepoOrderByEnum;
   const limit = parseLimitValue(searchParams.get("limit"));
+  const pageNumber = parseInt(searchParams.get("pageNumber")!) || 1;
 
-  const { data } = useRepositoriesList(RepoOrderByEnum[activeLink], limit);
+
+  const { data, meta } = useRepositoriesList(RepoOrderByEnum[activeLink], limit, pageNumber);
 
   const handleLoadingMore = () => {
-    setSearchParams({ limit: String(limit + 10) });
+    setSearchParams({ pageNumber: String(pageNumber + 1), limit: String(limit) });
   };
 
   return (
@@ -45,7 +47,7 @@ const RepoListWrap = (): JSX.Element => {
       activeLink={activeLink}
       fetchedData={data}
       handleLoadingMore={handleLoadingMore}
-      limit={limit}
+      hasNextPage={meta.hasNextPage}
       title={`${camelCaseToTitleCase(activeLink)} Repositories`}
     />
   );
diff --git a/src/components/VotedRepoListWrap.tsx b/src/components/VotedRepoListWrap.tsx
index 0934e02f..9bc71ba2 100644
--- a/src/components/VotedRepoListWrap.tsx
+++ b/src/components/VotedRepoListWrap.tsx
@@ -33,11 +33,13 @@ const VotedRepoListWrap = (): JSX.Element => {
 
   const activeLink = (locationsHash[location.pathname] ?? "recent") as keyof typeof RepoOrderByEnum;
   const limit = parseLimitValue(searchParams.get("limit"));
+  const pageNumber = parseInt(searchParams.get("pageNumber")!) || 1;
 
-  const { data, isLoading } = useVotedRepositoriesList(RepoOrderByEnum[activeLink], limit);
+
+  const { data, meta, isLoading } = useVotedRepositoriesList(RepoOrderByEnum[activeLink], limit, pageNumber);
 
   const handleLoadingMore = () => {
-    setSearchParams({ limit: String(limit + 10) });
+    setSearchParams({ pageNumber: String(pageNumber + 1), limit: String(limit) });
   };
 
   if (!isLoading && !data.length) {
@@ -67,7 +69,7 @@ const VotedRepoListWrap = (): JSX.Element => {
       activeLink={activeLink}
       fetchedData={data}
       handleLoadingMore={handleLoadingMore}
-      limit={limit}
+      hasNextPage={meta.hasNextPage}
       title="My Votes Repositories"
     />
   );
diff --git a/src/hooks/useRepositoriesList.ts b/src/hooks/useRepositoriesList.ts
index 43ae3686..b5f1b35d 100644
--- a/src/hooks/useRepositoriesList.ts
+++ b/src/hooks/useRepositoriesList.ts
@@ -5,12 +5,12 @@ interface PaginatedRepoResponse {
   readonly meta: PageMetaDto;
 }
 
-const useRepositoriesList = (orderBy = "stars", limit = 10) => {
-  const { data, error, mutate } = useSWR<PaginatedRepoResponse, Error>(`repos/list?orderDirection=DESC&orderBy=${orderBy}&limit=${limit}`);
+const useRepositoriesList = (orderBy = "stars", limit = 10, pageNumber = 1) => {
+  const { data, error, mutate } = useSWR<PaginatedRepoResponse, Error>(`repos/list?orderDirection=DESC&orderBy=${orderBy}&limit=${limit}&page=${pageNumber}`);
 
   return {
     data: data?.data ?? [],
-    meta: data?.meta ?? { itemCount: 0 },
+    meta: data?.meta ?? { itemCount: 0, hasNextPage: false },
     isLoading: !error && !data,
     isError: !!error,
     mutate,
diff --git a/src/hooks/useVotedRepositoriesList.ts b/src/hooks/useVotedRepositoriesList.ts
index 650f4ca2..db1b4734 100644
--- a/src/hooks/useVotedRepositoriesList.ts
+++ b/src/hooks/useVotedRepositoriesList.ts
@@ -24,17 +24,17 @@ const apiFetcherWithToken = async (apiUrl: string) => {
   return response.json();
 };
 
-const useVotedRepositoriesList = (orderBy = "stars", limit = 10) => {
+const useVotedRepositoriesList = (orderBy = "stars", limit = 10, pageNumber = 1) => {
   // setting this param as constant, to be avoid lint issue and to be handled in another ticket
   orderBy = "stars";
   const { data, error, mutate } = useSWR<PaginatedRepoResponse, Error>(
-    `repos/listUserVoted?orderDirection=DESC&orderBy=${orderBy}&limit=${limit}`,
+    `repos/listUserVoted?orderDirection=DESC&orderBy=${orderBy}&limit=${limit}&page=${pageNumber}`,
     apiFetcherWithToken,
   );
 
   return {
     data: data?.data ?? [],
-    meta: data?.meta ?? { itemCount: 0 },
+    meta: data?.meta ?? { itemCount: 0, hasNextPage: false },
     isLoading: !error && !data,
     isError: !!error,
     mutate,