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

@@ -9,8 +9,46 @@ import {
     Client1ProducerData,
 } from "@/mock/client_1";
 import CustomTable from "@/components/table";
+import {useEffect, useState} from "react";
 
 export default function Client1() {
+    const [consumerData, setConsumerData] = useState(null);
+    const [producerData, setProducerData] = useState(null);
+
+    useEffect(() => {
+        fetch('http://localhost:2979/api/v1/get_consumers', {
+            method: 'GET',
+            // credentials: 'include',
+        })
+            .then(resp => resp.json().then(jsonData => {
+                    console.log(jsonData);
+                    if (jsonData.length > 0) {
+                        setConsumerData(jsonData);
+                    } else {
+                        setConsumerData(Client1ConsumerData);
+                    }
+                }
+            ))
+            .then(data => null)
+            .catch(err => null)
+
+        fetch('http://localhost:2979/api/v1/get_producers', {
+            method: 'GET',
+            // credentials: 'include',
+        })
+            .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
@@ -24,14 +62,14 @@ export default function Client1() {
             <div>
                 <h4>Consumer View</h4>
                 <CustomTable
-          data={Client1ConsumerData}
+                    data={consumerData}
                     configuration={Client1ConsumerTableConfig}
                 />
             </div>
             <div>
                 <h4>Producer View</h4>
                 <CustomTable
-          data={Client1ProducerData}
+                    data={producerData}
                     configuration={Client1ProducerTableConfig}
                 />
             </div>