enh(#10): Frontend is now configurable from config.json

The host URL is now read from configuration.

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

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) => {

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"
+    }
+}

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
+}