Before Milestone Meeting Final Changes (#40)

some final fixes before the demo

Co-authored-by: Luis-Hebendanz <consulting@qube.email>
Reviewed-on: #40
Co-authored-by: sara-pervana <saramakishti@gmail.com>
Co-committed-by: sara-pervana <saramakishti@gmail.com>

pkgs/ui/src/app/access-point/page.tsx

@@ -1,56 +1,77 @@
 "use client";
 
+import { mutate } from "swr";
+import { useGetAttachedEntities } from "@/api/entities/entities";
+import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import {
   APSummaryDetails,
-  APAttachmentsDummyData,
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
-} from "@/mock/access_point";
-import { useEffect, useState } from "react";
-
-interface RepositoryData {
-  entity_name: string;
-  entity_did: string;
-  network: string;
-  ip_address: string;
-}
+} from "@/config/access_point";
+import { useEffect } from "react";
 
 export default function AccessPoint() {
-  const [repositoryData, setRepositoryData] = useState<RepositoryData[]>([]);
+  const {
+    data: APAttachementData,
+    isLoading: loadingAttachements,
+    swrKey: attachedEntitiesKeyFunc,
+  } = useGetAttachedEntities();
+  const {
+    data: APRepositories,
+    isLoading: laodingRepositories,
+    swrKey: repositoriesKeyFunc,
+  } = useGetRepositories();
+
+  const onRefresh = () => {
+    const attachedEntitiesKey =
+      typeof attachedEntitiesKeyFunc === "function"
+        ? attachedEntitiesKeyFunc()
+        : attachedEntitiesKeyFunc;
+    const repositoriesKey =
+      typeof repositoriesKeyFunc === "function"
+        ? repositoriesKeyFunc()
+        : repositoriesKeyFunc;
+
+    if (attachedEntitiesKey) {
+      mutate(attachedEntitiesKey);
+    }
+    if (repositoriesKey) {
+      mutate(repositoriesKey);
+    }
+  };
 
   useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_repositories", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setRepositoryData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{ name: "Access Point", details: APSummaryDetails }}
       />
       <div>
         <h4>Attachment View</h4>
         <CustomTable
-          data={APAttachmentsDummyData}
+          loading={loadingAttachements}
+          data={APAttachementData?.data}
           configuration={APAttachmentsTableConfig}
         />
       </div>
       <div>
         <h4>Service Repository View </h4>
         <CustomTable
-          data={repositoryData}
+          loading={laodingRepositories}
+          data={APRepositories?.data}
           configuration={APServiceRepositoryTableConfig}
         />
       </div>

pkgs/ui/src/app/client-1/page.tsx

@@ -1,68 +1,168 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useEffect, useRef, useState } from "react";
 import {
-  Client1SummaryDetails,
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
-} from "@/mock/client_1";
+} from "@/config/client_1";
 import CustomTable from "@/components/table";
-import { useEffect, useState } from "react";
+import useGetEntityByName from "@/components/hooks/useGetEntityById";
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Snackbar,
+  Typography,
+} from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import { mutate } from "swr";
+import { useGetEntity } from "@/api/entities/entities";
+import { BASE_URL } from "@/constants";
+import axios from "axios";
 
 export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
+  const { entity } = useGetEntityByName("C1");
+  const {
+    data: client1,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
+  const cardContentRef = useRef(null);
+  const [isAttached, setIsAttached] = useState(entity?.attached || false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+
+  const closeSnackBar = () => {
+    setSnackbarMessage("");
+    setSnackbarOpen(false);
+  };
+
+  const onAttachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
+      setSnackbarMessage(response.data.message);
+      setSnackbarOpen(true);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAttached(true);
+    }
+  };
+
+  const onDetachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/detach`, {
+        entity_did: entity?.did,
+      });
+      console.log(response);
+      setSnackbarMessage("Entity detached successfully.");
+      setSnackbarOpen(true);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAttached(false);
+    }
+  };
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
+    if (entityKey) mutate(entityKey);
+  };
 
   useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_consumers", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setConsumerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
 
-    fetch("http://localhost:2979/api/v1/get_producers", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setProducerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (isLoading) return <Skeleton height={500} />;
+
   return (
     <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 1",
-          details: Client1SummaryDetails,
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-      />
+      >
+        <h2>Client 1</h2>
+        <div>
+          {isAttached === false ? (
+            <Button
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
+              Attach
+            </Button>
+          ) : (
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
+              Detach
+            </Button>
+          )}
+
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <Card variant="outlined">
+        <CardHeader
+          subheader="Summary"
+          action={<CopyToClipboard contentRef={cardContentRef} />}
+        />
+        <CardContent ref={cardContentRef}>
+          <Typography color="text.primary" gutterBottom>
+            DID: <code>{client1?.data?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{client1?.data?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{client1?.data?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          data={consumerData}
+          loading={isLoading}
+          data={client1?.data?.producers}
           configuration={Client1ConsumerTableConfig}
         />
       </div>
       <div>
         <h4>Producer View</h4>
         <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client1?.data?.producers}
           configuration={Client1ProducerTableConfig}
         />
       </div>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }

pkgs/ui/src/app/client-2/page.tsx

@@ -1,69 +1,165 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useEffect, useRef, useState } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
-  Client2SummaryDetails,
-} from "@/mock/client_2";
+} from "@/config/client_2";
 import CustomTable from "@/components/table";
-import { useEffect, useState } from "react";
+import useGetEntityByName from "@/components/hooks/useGetEntityById";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Typography,
+  Snackbar,
+  Alert,
+} from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import { useGetEntity } from "@/api/entities/entities";
+import { mutate } from "swr";
+import axios from "axios";
+import { BASE_URL } from "@/constants";
 
-export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
+export default function Client2() {
+  const { entity } = useGetEntityByName("C2");
+  const {
+    data: client2,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
+  const cardContentRef = useRef(null);
+  const [isAttached, setIsAttached] = useState(entity?.attached);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+
+  const closeSnackBar = () => {
+    setSnackbarMessage("");
+    setSnackbarOpen(false);
+  };
+
+  const onAttachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
+      alert(response.data.message);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAttached(true);
+    }
+  };
+
+  const onDetachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/detach`, {
+        entity_did: entity?.did,
+      });
+      console.log("detach", response);
+      alert("Entity Detached Successfully.");
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAttached(false);
+    }
+  };
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
+    if (entityKey) mutate(entityKey);
+  };
 
   useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_consumers", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setConsumerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
 
-    fetch("http://localhost:2979/api/v1/get_producers", {
-      method: "GET",
-      // credentials: 'include',
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setProducerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (isLoading) return <Skeleton height={500} />;
+
   return (
     <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 2",
-          details: Client2SummaryDetails,
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-      />
+      >
+        <h2>Client 2</h2>
+        <div>
+          {isAttached === false ? (
+            <Button
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
+              Attach
+            </Button>
+          ) : (
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
+              Detach
+            </Button>
+          )}
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <Card variant="outlined">
+        <CardHeader
+          subheader="Summary"
+          action={<CopyToClipboard contentRef={cardContentRef} />}
+        />
+        <CardContent ref={cardContentRef}>
+          <Typography color="text.primary" gutterBottom>
+            DID: <code>{client2?.data?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{client2?.data?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{client2?.data?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          data={consumerData}
+          loading={isLoading}
+          data={client2?.data?.producers}
           configuration={Client2ConsumerTableConfig}
         />
       </div>
       <div>
         <h4>Producer View</h4>
         <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client2?.data?.producers}
           configuration={Client2ProducerTableConfig}
         />
       </div>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }

pkgs/ui/src/app/distributed-ledger-gateway/page.tsx

@@ -1,31 +1,37 @@
 "use client";
 
-import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/mock/dlg";
+import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
-import { useEffect, useState } from "react";
+import useFetch from "@/components/hooks/useFetch";
+import { useEffect } from "react";
 
 export default function DLG() {
-  const [resolutionData, setResolutionData] = useState([]);
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
+
+  const onRefresh = () => {
+    fetch();
+  };
 
   useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_resolutions", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setResolutionData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{
           name: "Distributed Ledger Gateway",
           details: DLGSummaryDetails,
@@ -34,6 +40,7 @@ export default function DLG() {
       <div>
         <h4>DID Resolution View</h4>
         <CustomTable
+          loading={loadingResolutions}
           data={resolutionData}
           configuration={DLGResolutionTableConfig}
         />

pkgs/ui/src/app/home/page.tsx

@@ -1,39 +1,51 @@
 "use client";
 
+import { useAppState } from "@/components/hooks/useAppContext";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
-import { HomeTableConfig } from "@/mock/home";
-import { useEffect, useState } from "react";
+import { HomeTableConfig } from "@/config/home";
+import { useEffect } from "react";
+import { mutate } from "swr";
 
 export default function Home() {
-  const [homeData, setHomeData] = useState([]);
+  const { data } = useAppState();
+
+  const entitiesKeyFunc = data.entitiesKeyFunc;
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entitiesKeyFunc === "function"
+        ? entitiesKeyFunc()
+        : entitiesKeyFunc;
+    if (entitiesKeyFunc) mutate(entityKey);
+  };
 
   useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_entities", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setHomeData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 500);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className="m-10">
       <SummaryDetails
         entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
         hasAttachDetach={false}
       />
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={homeData} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+        />
       </div>
 
       <div>