Merge pull request #25 from pehlicd/9-fix-frontend-fetch-method-shoul…

…d-be-configurable-over-cli-since-we-support-port-configuration

fix(ui): switched to axios and removed port dependency in ui

.gitignore

@@ -0,0 +1,40 @@
+# Ignore everything
+*
+
+# But not these files...
+!/.gitignore
+
+!*.go
+!go.sum
+!go.mod
+
+!README.md
+!LICENSE
+
+!ui/app/*
+!ui/components/*
+!ui/config/*
+!ui/public/*
+!ui/styles/*
+!ui/types/*
+!ui/.eslintrc.json
+!ui/.npmrc
+!ui/LICENSE
+!ui/next.config.js
+!ui/next-env.d.ts
+!ui/package.json
+!ui/postcss.config.js
+!ui/tailwind.config.js
+!ui/tsconfig.json
+
+!.github/*
+!.github/workflows/*
+!.github/ISSUE_TEMPLATE/*
+
+!.goreleaser.yml
+
+# !Makefile
+
+# ...even if they are in subdirectories
+!*/
+

ui/components/graph.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
+import axios from "axios";
 
 interface Node extends d3.SimulationNodeDatum {
     id: string;
@@ -42,15 +43,11 @@ const DisjointGraph = () => {
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const response = await fetch('http://localhost:8080/api/data');
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                const data: BindingData[] = await response.json();
+                const response = await axios.get('/api/data');
+                const data: BindingData[] = response.data;
                 if (!data) {
-                    throw new Error('Data is null or undefined');
+                    console.error(new Error('Data is null or undefined'));
                 }
-                console.log('Fetched data:', data);
                 renderGraph(data);
             } catch (error) {
                 console.error('Error fetching data:', error);
@@ -161,7 +158,7 @@ const DisjointGraph = () => {
             };
         };
 
-        fetchData();
+        fetchData().finally(() => { console.log('Data fetching completed'); });
     }, [isDarkMode]);
 
     useEffect(() => {

ui/components/table.tsx

@@ -23,6 +23,7 @@ import {SearchIcon, VerticalDotsIcon, ChevronDownIcon, RefreshIcon} from "@/comp
 import {Modal, ModalBody, ModalContent, ModalHeader} from "@nextui-org/modal";
 import {Card, CardBody, CardHeader} from "@nextui-org/card";
 import { stringify } from 'yaml';
+import axios from "axios";
 
 function capitalize(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1);
@@ -84,9 +85,8 @@ export default function MainTable() {
     const hasSearchFilter = Boolean(filterValue);
 
     useEffect(() => {
-        fetch('http://localhost:8080/api/data')
-            .then(response => response.json())
-            .then(data => setData(data))
+        axios.get('/api/data')
+            .then(response => setData(response.data))
             .catch(error => console.error('Error fetching data:', error));
     }, []);
 
@@ -165,7 +165,7 @@ export default function MainTable() {
                 );
             case "details":
                 return (
-                    <div className="relative flex justify-end items-center gap-2">
+                    <div className="relative flex justify-center items-center gap-2">
                         <Dropdown>
                             <DropdownTrigger>
                                 <Button isIconOnly size="sm" variant="light">
@@ -275,7 +275,7 @@ export default function MainTable() {
                                 ))}
                             </DropdownMenu>
                         </Dropdown>
-                        <Button color="primary" endContent={<RefreshIcon />} onClick={() => fetch('http://localhost:8080/api/data').then(response => response.json()).then(data => setData(data)).catch(error => console.error('Error fetching data:', error))}>
+                        <Button color="primary" endContent={<RefreshIcon />} onClick={() => axios.get('/api/data').then(response => setData(response.data)).catch(error => console.error('Error fetching data:', error))}>
                             Refresh
                         </Button>
                     </div>

ui/package.json

@@ -26,6 +26,7 @@
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
 		"autoprefixer": "10.4.19",
+		"axios": "^1.6.8",
 		"clsx": "^2.0.0",
 		"d3": "^7.9.0",
 		"eslint": "8.48.0",