{
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ if (error) console.error("Error in state", error);
+
+ const handleConsume = () => {
+ if (loading) return;
+
+ setLoading(true);
+
+ const axiosConfig = {
+ url: endpoint,
+ method: "GET",
+ data: null,
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ };
+
+ axios(axiosConfig)
+ .then((response) => {
+ if (onConsume) {
+ onConsume(response.data);
+ console.log("I got the data from consume: ", response.data);
+ }
+ })
+ .catch((error) => {
+ if (onConsume) onConsume(null);
+ console.error("Error happened during consume: ", error);
+ setError(error);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ };
+
+ const handleCloseSnackbar = () => {
+ setError(null);
+ };
+
+ return (
+ <>
+
+ {error && (
+
+ )}
+
+ );
+};
+
+export default ConsumeAction;
diff --git a/pkgs/ui/src/components/consume_content/index.tsx b/pkgs/ui/src/components/consume_content/index.tsx
new file mode 100644
index 0000000..8ce7a74
--- /dev/null
+++ b/pkgs/ui/src/components/consume_content/index.tsx
@@ -0,0 +1,9 @@
+const ConsumeDisplayComponent = ({ htmlContent }: { htmlContent: any }) => {
+ return (
+
+ );
+};
+
+export default ConsumeDisplayComponent;
diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx
index 7a3ba8d..c7bfeb7 100644
--- a/pkgs/ui/src/components/entity_actions/index.tsx
+++ b/pkgs/ui/src/components/entity_actions/index.tsx
@@ -1,8 +1,19 @@
import { IEntityActions } from "@/types";
-import { Button, Snackbar, Alert, AlertColor } from "@mui/material";
+import {
+ Button,
+ Snackbar,
+ Alert,
+ AlertColor,
+ CircularProgress,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogContentText,
+ DialogActions,
+} from "@mui/material";
import { useState } from "react";
-import useAxios from "../hooks/useAxios";
import { deleteEntity } from "@/api/entities/entities";
+import axios from "axios";
interface Props {
endpointData: IEntityActions[];
@@ -16,25 +27,37 @@ const SNACKBAR_DEFAULT = {
};
const EntityActions = ({ endpointData, rowData }: Props) => {
- const [currentEndpoint, setCurrentEndpoint] = useState("");
- const [shouldFetch, setShouldFetch] = useState(false);
- const { error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch);
-
const [snackbar, setSnackbar] = useState<{
open: boolean;
message: string;
severity: AlertColor;
}>(SNACKBAR_DEFAULT);
- console.error("Error registering/deregistering:", error);
+ const [registerData, setRegisterData] = useState(null);
+ const [registerError, setRegisterError] = useState(null);
+ const [loadingRegister, setLoadingRegister] = useState(false);
+
+ const [DeregisterData, setDeRegisterData] = useState(null);
+ const [DeregisterError, setDeRegisterError] = useState(null);
+ const [loadingDeRegister, setLoadingDeRegister] = useState(false);
+
+ const [loadingDelete, setLoadingDelete] = useState(false);
+ const [confirmDelete, setConfirmDelete] = useState(false);
+
+ if (registerData) console.log("Register Data in state", registerData);
+ if (registerError) console.error("Register Error in state", registerError);
+
+ if (DeregisterData) console.log("Register Data in state", DeregisterData);
+ if (DeregisterError)
+ console.error("Register Error in state", DeregisterError);
const onDeleteEntity = async () => {
+ setLoadingDelete(true);
if (rowData)
try {
const response = await deleteEntity({
entity_did: rowData?.entity_did,
});
- console.log("On Delete:", response.data.message);
setSnackbar({
open: true,
message: response.data.message,
@@ -47,31 +70,109 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
message: "Failed to delete entity.",
severity: "error",
});
+ } finally {
+ setLoadingDelete(false);
+ closeDeleteConfirmation();
}
};
const onRegisterEntity = (endpoint: string) => {
- setCurrentEndpoint(endpoint);
- setShouldFetch(true);
+ if (loadingRegister) return;
+
+ setLoadingRegister(true);
+
+ const axiosConfig = {
+ url: endpoint,
+ method: "GET",
+ data: null,
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ };
+
+ axios(axiosConfig)
+ .then((response) => {
+ setRegisterData(response.data);
+ console.log("I got the data from register: ", response.data);
+ setSnackbar({
+ open: true,
+ message: "Registered successfully!",
+ severity: "success",
+ });
+ })
+ .catch((error) => {
+ console.error("Error happened during register: ", error);
+ setRegisterError(error);
+ setSnackbar({
+ open: true,
+ message: error,
+ severity: "error",
+ });
+ })
+ .finally(() => {
+ setLoadingRegister(false);
+ });
};
const onDeregisterEntity = (endpoint: string) => {
- setCurrentEndpoint(endpoint);
- setShouldFetch(true);
+ if (loadingDeRegister) return;
+
+ setLoadingDeRegister(true);
+
+ const axiosConfig = {
+ url: endpoint,
+ method: "GET",
+ data: null,
+ };
+
+ axios(axiosConfig)
+ .then((response) => {
+ setDeRegisterData(response.data);
+ console.log("I got the data from deregister: ", response.data);
+ setSnackbar({
+ open: true,
+ message: "De-Registered successfully!",
+ severity: "success",
+ });
+ })
+ .catch((error) => {
+ console.error("Error happened during deregister: ", error);
+ setDeRegisterError(error);
+ setSnackbar({
+ open: true,
+ message: error,
+ severity: "error",
+ });
+ })
+ .finally(() => {
+ setLoadingDeRegister(false);
+ });
};
const handleCloseSnackbar = () => {
setSnackbar(SNACKBAR_DEFAULT);
};
+ const openDeleteConfirmation = () => {
+ setConfirmDelete(true);
+ };
+
+ const closeDeleteConfirmation = () => {
+ setConfirmDelete(false);
+ };
+
return (
<>
{endpointData.map(
({ name, endpoint }: IEntityActions, index: number) => {
const isRegister = name && name.toLocaleLowerCase() === "register";
+ // const isDeRegister = name && name.toLocaleLowerCase() === "deregister";
return (
+
{
+const CustomTable = ({
+ configuration,
+ data,
+ loading,
+ tkey,
+ onConsumeAction,
+}: ICustomTable) => {
if (loading)
return ;
@@ -23,7 +29,11 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => {
const renderTableCell = (
value: any,
cellKey: string,
- render?: (param: any, data?: any) => void | undefined,
+ render?: (
+ param: any,
+ data?: any,
+ onFunc?: (param: any) => void,
+ ) => void | undefined,
rowData?: any,
) => {
let renderedValue = value;
@@ -36,7 +46,7 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => {
renderedValue = ;
// cover use case if we want to render a component
- if (render) renderedValue = render(value, rowData);
+ if (render) renderedValue = render(value, rowData, onConsumeAction);
// catch use case where the value is an object but the render function is not provided in the table config
if (
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index d8190f2..8d26e61 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@mui/material";
import EntityActions from "@/components/entity_actions";
+import ConsumeAction from "@/components/consume_action";
export const ClientTableConfig = [
{
@@ -13,11 +13,13 @@ export const ClientTableConfig = [
{
key: "endpoint_url",
label: "End Point",
- render: () => {
+ render: (value: any, rowData: any, onConsume: any) => {
return (
-
+
);
},
},
diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts
index 28fe7f0..477338e 100644
--- a/pkgs/ui/src/types/index.ts
+++ b/pkgs/ui/src/types/index.ts
@@ -1,7 +1,7 @@
export interface CustomTableConfiguration {
key: string;
label: string;
- render?: (param: any) => void;
+ render?: (param: any, rowData?: any, onConsume?: any) => void;
}
export interface ICustomTable {
@@ -9,6 +9,7 @@ export interface ICustomTable {
data: any;
loading?: boolean;
tkey: string;
+ onConsumeAction?: (param: any) => void;
}
export interface EntityDetails {