Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

fix: Load more button visibility issue and now loads data upon clicking #478

Merged
merged 1 commit into from
Aug 11, 2023
Merged

fix: Load more button visibility issue and now loads data upon clicking #478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/ListRepositories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => (
bdougie marked this conversation as resolved.
Show resolved Hide resolved
<div
key={item}
className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
Expand Down Expand Up @@ -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"
Expand Down
15 changes: 7 additions & 8 deletions src/components/RecentRepoListWrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 (
Expand All @@ -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"
Expand All @@ -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"
/>
)}
Expand All @@ -119,7 +118,7 @@ const RecentRepoListWrap = (): JSX.Element => {
activeLink={activeLink}
fetchedData={lastWeek}
handleLoadingMore={handleLoadingMore}
limit={101}
hasNextPage={meta.hasNextPage}
title="Last Week"
/>
)}
Expand All @@ -129,7 +128,7 @@ const RecentRepoListWrap = (): JSX.Element => {
activeLink={activeLink}
fetchedData={older}
handleLoadingMore={handleLoadingMore}
limit={limit}
hasNextPage={meta.hasNextPage}
title="Older"
/>
)}
Expand Down
8 changes: 5 additions & 3 deletions src/components/RepoListWrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,21 @@ 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 (
<ListRepositories
activeLink={activeLink}
fetchedData={data}
handleLoadingMore={handleLoadingMore}
limit={limit}
hasNextPage={meta.hasNextPage}
title={`${camelCaseToTitleCase(activeLink)} Repositories`}
/>
);
Expand Down
8 changes: 5 additions & 3 deletions src/components/VotedRepoListWrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -67,7 +69,7 @@ const VotedRepoListWrap = (): JSX.Element => {
activeLink={activeLink}
fetchedData={data}
handleLoadingMore={handleLoadingMore}
limit={limit}
hasNextPage={meta.hasNextPage}
title="My Votes Repositories"
/>
);
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useRepositoriesList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useVotedRepositoriesList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading