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

@@ -2,39 +2,77 @@
 
 import SummaryDetails from "@/components/summary_card";
 import {
-  Client1SummaryDetails,
+    Client1SummaryDetails,
-  Client1ConsumerData,
+    Client1ConsumerData,
-  Client1ConsumerTableConfig,
+    Client1ConsumerTableConfig,
-  Client1ProducerTableConfig,
+    Client1ProducerTableConfig,
-  Client1ProducerData,
+    Client1ProducerData,
 } from "@/mock/client_1";
 import CustomTable from "@/components/table";
+import {useEffect, useState} from "react";
 
 export default function Client1() {
-  return (
+    const [consumerData, setConsumerData] = useState(null);
-    <div className="m-10">
+    const [producerData, setProducerData] = useState(null);
-      <SummaryDetails
+
-        hasAttachDetach
+    useEffect(() => {
-        hasRefreshButton
+        fetch('http://localhost:2979/api/v1/get_consumers', {
-        entity={{
+            method: 'GET',
-          name: "Client 1",
+            // credentials: 'include',
-          details: Client1SummaryDetails,
+        })
-        }}
+            .then(resp => resp.json().then(jsonData => {
-      />
+                    console.log(jsonData);
-      <div>
+                    if (jsonData.length > 0) {
-        <h4>Consumer View</h4>
+                        setConsumerData(jsonData);
-        <CustomTable
+                    } else {
-          data={Client1ConsumerData}
+                        setConsumerData(Client1ConsumerData);
-          configuration={Client1ConsumerTableConfig}
+                    }
-        />
+                }
-      </div>
+            ))
-      <div>
+            .then(data => null)
-        <h4>Producer View</h4>
+            .catch(err => null)
-        <CustomTable
+
-          data={Client1ProducerData}
+        fetch('http://localhost:2979/api/v1/get_producers', {
-          configuration={Client1ProducerTableConfig}
+            method: 'GET',
-        />
+            // credentials: 'include',
-      </div>
+        })
-    </div>
+            .then(resp => resp.json().then(jsonData => {
-  );
+                    console.log(jsonData);
+                    if (jsonData.length > 0) {
+                        setProducerData(jsonData);
+                    } else {
+                        setProducerData(Client1ProducerData);
+                    }
+                }
+            ))
+            .then(data => null)
+            .catch(err => null)
+    }, []);
+
+    return (
+        <div className="m-10">
+            <SummaryDetails
+                hasAttachDetach
+                hasRefreshButton
+                entity={{
+                    name: "Client 1",
+                    details: Client1SummaryDetails,
+                }}
+            />
+            <div>
+                <h4>Consumer View</h4>
+                <CustomTable
+                    data={consumerData}
+                    configuration={Client1ConsumerTableConfig}
+                />
+            </div>
+            <div>
+                <h4>Producer View</h4>
+                <CustomTable
+                    data={producerData}
+                    configuration={Client1ProducerTableConfig}
+                />
+            </div>
+        </div>
+    );
 }