loading/listing first page of projects

Author: selfcontained

components/dashboard/src/data/projects/list-projects-query.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { projectsService } from "../../service/public-api";
+
+type ListProjectsQueryArgs = {
+    page: number;
+    pageSize: number;
+};
+
+export const useListProjectsQuery = ({ page, pageSize }: ListProjectsQueryArgs) => {
+    const { data: org } = useCurrentOrg();
+
+    return useQuery(
+        getListProjectsQueryKey(org?.id || "", { page, pageSize }),
+        async () => {
+            if (!org) {
+                throw new Error("No org currently selected");
+            }
+
+            return projectsService.listProjects({ teamId: org.id, pagination: { page, pageSize } });
+        },
+        {
+            enabled: !!org,
+        },
+    );
+};
+
+export const getListProjectsQueryKey = (orgId: string, { page, pageSize }: ListProjectsQueryArgs) => {
+    return ["projects", "list", { orgId, page, pageSize }];
+};

components/dashboard/src/repositories/list/RepositoryList.tsx

@@ -6,11 +6,25 @@
 
 import { FC } from "react";
 import Header from "../../components/Header";
+import { useListProjectsQuery } from "../../data/projects/list-projects-query";
+import { Loader2 } from "lucide-react";
+import { Link } from "react-router-dom";
 
 const RepositoryListPage: FC = () => {
+    const { data, isLoading } = useListProjectsQuery({ page: 1, pageSize: 10 });
+
     return (
         <>
             <Header title="Repositories" subtitle="" />
+
+            {isLoading && <Loader2 className="animate-spin" />}
+            {!isLoading &&
+                data?.projects.map((project) => (
+                    <div key={project.id}>
+                        <span>{project.name}</span>
+                        <Link to={`/repositories/${project.id}`}>View</Link>
+                    </div>
+                ))}
         </>
     );
 };