diff --git a/frontend/__tests__/utils/extract-next-page-from-link.test.ts b/frontend/__tests__/utils/extract-next-page-from-link.test.ts index 61fad65aec9f..a7541f95a0ad 100644 --- a/frontend/__tests__/utils/extract-next-page-from-link.test.ts +++ b/frontend/__tests__/utils/extract-next-page-from-link.test.ts @@ -7,4 +7,7 @@ test("extractNextPageFromLink", () => { const noNextLink = `; rel="prev", ; rel="first"`; expect(extractNextPageFromLink(noNextLink)).toBeNull(); + + const extra = `; rel="next", ; rel="last"`; + expect(extractNextPageFromLink(extra)).toBe(2); }); diff --git a/frontend/src/hooks/query/use-user-repositories.ts b/frontend/src/hooks/query/use-user-repositories.ts index dc2217cf3914..8b97d6bcd7d8 100644 --- a/frontend/src/hooks/query/use-user-repositories.ts +++ b/frontend/src/hooks/query/use-user-repositories.ts @@ -1,4 +1,5 @@ import { useInfiniteQuery } from "@tanstack/react-query"; +import React from "react"; import { isGitHubErrorReponse, retrieveGitHubUserRepositories, @@ -15,7 +16,11 @@ const userRepositoriesQueryFn = async ({ pageParam, ghToken, }: UserRepositoriesQueryFnProps) => { - const response = await retrieveGitHubUserRepositories(ghToken, pageParam); + const response = await retrieveGitHubUserRepositories( + ghToken, + pageParam, + 100, + ); if (!response.ok) { throw new Error("Failed to fetch repositories"); @@ -36,13 +41,23 @@ const userRepositoriesQueryFn = async ({ export const useUserRepositories = () => { const { gitHubToken } = useAuth(); - return useInfiniteQuery({ + const repos = useInfiniteQuery({ queryKey: ["repositories", gitHubToken], queryFn: async ({ pageParam }) => userRepositoriesQueryFn({ pageParam, ghToken: gitHubToken! }), initialPageParam: 1, getNextPageParam: (lastPage) => lastPage.nextPage, enabled: !!gitHubToken, - select: (data) => data.pages.flatMap((page) => page.data), }); + + // TODO: Once we create our custom dropdown component, we should fetch data onEndReached + // (nextui autocomplete doesn't support onEndReached nor is it compatible for extending) + const { isSuccess, isFetchingNextPage, hasNextPage, fetchNextPage } = repos; + React.useEffect(() => { + if (!isFetchingNextPage && isSuccess && hasNextPage) { + fetchNextPage(); + } + }, [isFetchingNextPage, isSuccess, hasNextPage, fetchNextPage]); + + return repos; }; diff --git a/frontend/src/routes/_oh._index/route.tsx b/frontend/src/routes/_oh._index/route.tsx index 9e2ab811dbe1..10e47ba0f57a 100644 --- a/frontend/src/routes/_oh._index/route.tsx +++ b/frontend/src/routes/_oh._index/route.tsx @@ -24,7 +24,7 @@ function Home() { const { data: config } = useConfig(); const { data: user } = useGitHubUser(); - const { data: repositories } = useUserRepositories(gitHubToken); + const { data: repositories } = useUserRepositories(); const gitHubAuthUrl = useGitHubAuthUrl({ gitHubToken, @@ -49,7 +49,9 @@ function Home() {
formRef.current?.requestSubmit()} - repositories={repositories || []} + repositories={ + repositories?.pages.flatMap((page) => page.data) || [] + } gitHubAuthUrl={gitHubAuthUrl} user={user || null} // onEndReached={} diff --git a/frontend/src/routes/_oh.tsx b/frontend/src/routes/_oh.tsx index 8df977585f7a..ab6a718cfdcd 100644 --- a/frontend/src/routes/_oh.tsx +++ b/frontend/src/routes/_oh.tsx @@ -70,6 +70,7 @@ export default function MainApp() { const dispatch = useDispatch(); const endSession = useEndSession(); + // FIXME: Bad practice to use localStorage directly const analyticsConsent = localStorage.getItem("analytics-consent"); const [accountSettingsModalOpen, setAccountSettingsModalOpen] = @@ -83,7 +84,7 @@ export default function MainApp() { const config = useConfig(); const user = useGitHubUser(); - const { data: isAuthed, isFetched } = useIsAuthed({ gitHubToken }); + const { data: isAuthed, isFetched } = useIsAuthed(); const aiConfigOptions = useAIConfigOptions(); const gitHubAuthUrl = useGitHubAuthUrl({ diff --git a/frontend/src/utils/extract-next-page-from-link.ts b/frontend/src/utils/extract-next-page-from-link.ts index a2aacad7ff53..98fe5a7da996 100644 --- a/frontend/src/utils/extract-next-page-from-link.ts +++ b/frontend/src/utils/extract-next-page-from-link.ts @@ -4,6 +4,8 @@ * @returns The next page number or null if there is no next page */ export const extractNextPageFromLink = (link: string): number | null => { - const match = link.match(/<.*\?page=(\d+)>; rel="next"/); + const regex = /<[^>]*[?&]page=(\d+)(?:&[^>]*)?>; rel="next"/; + const match = link.match(regex); + return match ? parseInt(match[1], 10) : null; };