From 0238e4b67b5ce21aa9356c9da3b558d279268f5d Mon Sep 17 00:00:00 2001
From: Elia el Lazkani <gitea@lazkani.io>
Date: Wed, 25 Dec 2024 15:33:49 +0100
Subject: [PATCH] enh(#10): Frontend is now configurable from config.json

The host URL is now read from configuration.
---
 config/config.yaml                            |  4 ----
 .../components/URLShortener/URLShortener.tsx  |  7 +++++-
 frontend/src/config.json                      | 12 ++++++++++
 frontend/src/config.tsx                       | 24 +++++++++++++++++++
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/config.json
 create mode 100644 frontend/src/config.tsx

diff --git a/config/config.yaml b/config/config.yaml
index 03c8c9d..e868f41 100644
--- a/config/config.yaml
+++ b/config/config.yaml
@@ -5,10 +5,6 @@ Server:
   cors: False
   static_folder: frontend/build
 
-Web:
-  host: 127.0.0.1
-  port: 8000
-
 Database:
   username: foo
   password: bar
diff --git a/frontend/src/components/URLShortener/URLShortener.tsx b/frontend/src/components/URLShortener/URLShortener.tsx
index f956873..7aa75e1 100644
--- a/frontend/src/components/URLShortener/URLShortener.tsx
+++ b/frontend/src/components/URLShortener/URLShortener.tsx
@@ -3,6 +3,7 @@ import "./URLShortener.css";
 import axios from "axios";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import Config from "../../config"
 
 export default function URLShortener() {
   const [url, setUrl] = useState<string>("");
@@ -28,10 +29,14 @@ export default function URLShortener() {
     }
 
     try {
+      const config = Config()
+      const api_endpoint = "/api/v1/shorten";
+
+      const api_url = `${config.url}${api_endpoint}`;
 
       // Send the POST request to the backend
       await axios
-        .post("http://127.0.0.1:8000/api/v1/shorten", {
+        .post(api_url , {
           url: url
         })
         .then((response) => {
diff --git a/frontend/src/config.json b/frontend/src/config.json
new file mode 100644
index 0000000..aba9fd4
--- /dev/null
+++ b/frontend/src/config.json
@@ -0,0 +1,12 @@
+{
+    "frontend": {
+        "scheme": "http",
+        "host": "127.0.0.1",
+        "port": "8000"
+    },
+    "api": {
+        "scheme": "http",
+        "host": "127.0.0.1",
+        "port": "8000"
+    }
+}
diff --git a/frontend/src/config.tsx b/frontend/src/config.tsx
new file mode 100644
index 0000000..49984db
--- /dev/null
+++ b/frontend/src/config.tsx
@@ -0,0 +1,24 @@
+import configuration from './config.json';
+
+class APIConfig {
+    scheme: string;
+    host: string;
+    port: string;
+    url: string;
+
+    constructor(scheme: string, host: string, port: string) {
+        this.scheme = scheme;
+        this.host = host;
+        this.port = port;
+        this.url = `${scheme}://${host}:${port}`
+    }
+}
+
+export default function Config() {
+    const scheme = configuration.api.scheme;
+    const host = configuration.api.host;
+    const port = configuration.api.port;
+
+    const apiConfig = new APIConfig(scheme, host, port);
+    return apiConfig
+}