feat(frontend): allow fetching data service and project list

frontend/src/api/cubicweb.ts

@@ -27,3 +27,44 @@
     "INSERT DataService X: X name %(name)s, X data_url %(data_url)s, X refresh_period %(refresh_period)s, X description %(description)s";
   return client.execute(rql, data);
 }
+
+export async function getProjectList(): Promise<Array<Project>> {
+  const rql =
+    "Any X, ATTR_NAME, ATTR_SPARQL_ENDPOINT, ATTR_ACTIVATED " +
+    "GROUPBY X, ATTR_NAME, ATTR_SPARQL_ENDPOINT, ATTR_ACTIVATED " +
+    "WHERE X is ImportProcedure, X name ATTR_NAME, X sparql_endpoint ATTR_SPARQL_ENDPOINT, X activated ATTR_ACTIVATED";
+  const result = await client.execute(rql, {});
+
+  const jsonResult: Array<Project> = result.map(
+    (r) =>
+      ({
+        eid: r[0],
+        name: r[1],
+        sparql_endpoint: r[2],
+        activated: r[3],
+      }) as Project,
+  );
+
+  return jsonResult;
+}
+
+export async function getDataServiceList(): Promise<Array<DataService>> {
+  const rql =
+    "Any X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION " +
+    "GROUPBY X, ATTR_NAME, ATTR_DATA_URL, ATTR_REFRESH_PERIOD, ATTR_DESCRIPTION " +
+    "WHERE X is DataService, X name ATTR_NAME, X data_url ATTR_DATA_URL, X refresh_period ATTR_REFRESH_PERIOD, X description ATTR_DESCRIPTION";
+  const result = await client.execute(rql, {});
+
+  const jsonResult: Array<DataService> = result.map(
+    (r) =>
+      ({
+        eid: r[0],
+        name: r[1],
+        data_url: r[2],
+        refresh_period: r[3],
+        description: r[4],
+      }) as DataService,
+  );
+
+  return jsonResult;
+}

frontend/src/app/page.tsx

@@ -7,5 +7,4 @@
 import { Box, Button, Container, Stack, Typography } from "@mui/material";
 import { ProjectCard } from "@/components/cards/ProjectCard";
 import { DataServiceCard } from "@/components/cards/DataServiceCard";
-import { useLoad } from "@/hooks/useLoad";
 import { CardList } from "@/components/cards/CardList";
@@ -11,6 +10,5 @@
 import { CardList } from "@/components/cards/CardList";
-import { DATA_SERVICES, PROJECTS } from "@/constants/constants";
 import { useRouter } from "next/navigation";
 import AddIcon from "@mui/icons-material/Add";
 import { useState } from "react";
 import { ConfirmModal } from "@/components/ConfirmModal";
@@ -13,6 +11,8 @@
 import { useRouter } from "next/navigation";
 import AddIcon from "@mui/icons-material/Add";
 import { useState } from "react";
 import { ConfirmModal } from "@/components/ConfirmModal";
+import { useGetDataServiceList } from "@/hooks/useGetDataServiceList";
+import { useGetProjectList } from "@/hooks/useGetProjectList";
 
 export default function Home() {
@@ -17,4 +17,4 @@
 
 export default function Home() {
-  const { data: projects, loading: projectsLoading } = useLoad(PROJECTS);
+  const { data: projects, loading: projectsLoading } = useGetProjectList();
   const { data: dataServices, loading: dataServicesLoading } =
@@ -20,5 +20,5 @@
   const { data: dataServices, loading: dataServicesLoading } =
-    useLoad(DATA_SERVICES);
+    useGetDataServiceList();
   const router = useRouter();
   const [modal, setModal] = useState<{
     visible: boolean;

frontend/src/hooks/useGetDataServiceList.tsx

+import { getDataServiceList } from "@/api/cubicweb";
+import { DataService } from "@/types";
+import { useEffect, useState } from "react";
+
+export function useGetDataServiceList() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<Array<DataService> | undefined>(undefined);
+
+  useEffect(() => {
+    setLoading(true);
+    getDataServiceList().then((result) => {
+      console.log(result);
+      setLoading(false);
+      setData(result);
+    });
+  }, []);
+  return { loading, data };
+}

frontend/src/hooks/useGetProjectList.tsx

+import { getProjectList } from "@/api/cubicweb";
+import { Project } from "@/types";
+import { useState, useEffect } from "react";
+
+export function useGetProjectList() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<Array<Project> | undefined>(undefined);
+
+  useEffect(() => {
+    setLoading(true);
+    getProjectList().then((result) => {
+      console.log(result);
+      setLoading(false);
+      setData(result);
+    });
+  }, []);
+  return { loading, data };
+}