@@ -77,7 +77,7 @@ vi.mock("@/components/header/Header", () => ({
),
}));
-vi.mock("@/components/sideNavBar/SideBar", () => ({
+vi.mock("@/components/common/sideNavBar/SideBar", () => ({
default: ({ collapsed, onSelect, onToggleExpand }: any) => (
Collapsed: {collapsed.toString()}
diff --git a/apps/customer-portal/webapp/src/pages/ProjectHub.tsx b/apps/customer-portal/webapp/src/pages/ProjectHub.tsx
index 43a306aa70..8543e8d956 100644
--- a/apps/customer-portal/webapp/src/pages/ProjectHub.tsx
+++ b/apps/customer-portal/webapp/src/pages/ProjectHub.tsx
@@ -18,8 +18,8 @@ import { Box, Typography } from "@wso2/oxygen-ui";
import { useEffect, type JSX } from "react";
import useGetProjects from "@/api/useGetProjects";
import { useLogger } from "@/hooks/useLogger";
-import ProjectCard from "@/components/projectCard/ProjectCard";
-import ProjectCardSkeleton from "@/components/projectCard/ProjectCardSkeleton";
+import ProjectCard from "@/components/projectHub/projectCard/ProjectCard";
+import ProjectCardSkeleton from "@/components/projectHub/projectCard/ProjectCardSkeleton";
import { FolderOpen } from "@wso2/oxygen-ui-icons-react";
/**
@@ -38,10 +38,22 @@ export default function ProjectHub(): JSX.Element {
*/
const {
data: projectsResponse,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
isLoading,
isError,
} = useGetProjects({}, true);
+ /**
+ * Drain all pages if fetch-all flag is set.
+ */
+ useEffect(() => {
+ if (hasNextPage && !isFetchingNextPage && !isError) {
+ fetchNextPage();
+ }
+ }, [hasNextPage, isFetchingNextPage, isError, fetchNextPage]);
+
/**
* Get projects from the response.
*/
diff --git a/apps/customer-portal/webapp/src/pages/__tests__/ProjectHub.test.tsx b/apps/customer-portal/webapp/src/pages/__tests__/ProjectHub.test.tsx
index e6d965aa10..7de971a1ad 100644
--- a/apps/customer-portal/webapp/src/pages/__tests__/ProjectHub.test.tsx
+++ b/apps/customer-portal/webapp/src/pages/__tests__/ProjectHub.test.tsx
@@ -35,11 +35,11 @@ vi.mock("@wso2/oxygen-ui-icons-react", () => ({
}));
// Mock sub-components
-vi.mock("@/components/projectCard/ProjectCard", () => ({
+vi.mock("@/components/projectHub/projectCard/ProjectCard", () => ({
default: ({ title }: any) =>
{title}
,
}));
-vi.mock("@/components/projectCard/ProjectCardSkeleton", () => ({
+vi.mock("@/components/projectHub/projectCard/ProjectCardSkeleton", () => ({
default: () =>
,
}));
@@ -140,4 +140,22 @@ describe("ProjectHub", () => {
);
});
});
+
+ it("should call fetchNextPage when hasNextPage is true", () => {
+ const mockFetchNextPage = vi.fn();
+ mockUseGetProjects.mockReturnValue({
+ isLoading: false,
+ data: {
+ pages: [{ projects: mockProjects }],
+ },
+ fetchNextPage: mockFetchNextPage,
+ hasNextPage: true,
+ isFetchingNextPage: false,
+ isError: false,
+ });
+
+ render(
);
+
+ expect(mockFetchNextPage).toHaveBeenCalled();
+ });
});