- {Array.from(Array(10).keys()).map(item => (
+ {Array.from(Array(25).keys()).map(item => (
{
)
: (
<>
- {/* 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 && (
)}
@@ -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
(`repos/list?orderDirection=DESC&orderBy=${orderBy}&limit=${limit}`);
+const useRepositoriesList = (orderBy = "stars", limit = 10, pageNumber = 1) => {
+ const { data, error, mutate } = useSWR(`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(
- `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,