pkgs/ui/src/components/consume_action/index.tsx

@@ -1,5 +1,26 @@
-const ConsumeAction = () => {
-  return <></>;
+import { Button } from "@mui/material";
+import useAxios from "../hooks/useAxios";
+import { useState } from "react";
+
+const ConsumeAction = ({ endpoint }: { endpoint: string }) => {
+
+  const [currentEndpoint, setCurrentEndpoint] = useState("");
+  const [shouldFetch, setShouldFetch] = useState(false);
+  const { data, error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch);
+
+  if (error) console.error("Error consuming:", error);
+
+  if (data) console.log('what the response', data)
+
+  const onConsume = () => {
+    setCurrentEndpoint(endpoint);
+    setShouldFetch(true);
+  }
+
+
+  return <Button onClick={onConsume} variant="outlined">
+    Consume
+  </Button>
 };
 
 export default ConsumeAction;

pkgs/ui/src/config/client_1/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@mui/material";
 import EntityActions from "@/components/entity_actions";
+import ConsumeAction from "@/components/consume_action";
 
 export const ClientTableConfig = [
   {
@@ -13,11 +14,9 @@ export const ClientTableConfig = [
   {
     key: "endpoint_url",
     label: "End Point",
-    render: () => {
+    render: (value: any) => {
       return (
-        <Button disabled variant="outlined">
-          Consume
-        </Button>
+        <ConsumeAction endpoint={value} />
       );
     },
   },