Feature/basic structur (#6)

* added some modules and folders

* fixed hostname always being localhost

* removed getting the backend port FF-140

* removed unused vars

* made the BE uri a constant that is connected to the current env (dev or prod)

Author: qvalentin

webapp_frontend/package-lock.json

@@ -54,6 +54,7 @@
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^6.0.28",
     "babel-loader": "8.1.0",
+    "prettier": "^2.1.2",
     "react-is": "^17.0.1",
     "react-test-renderer": "^17.0.1"
   }

webapp_frontend/package.json

@@ -0,0 +1,24 @@
+import Axios, {} from "axios";
+import {constants} from "../constants";
+
+const hostname:string =constants.url.API_URL;
+
+
+interface BackendHealthData {
+    uptimeInSeconds: number;
+    userCount: number
+}
+
+function callBackendHealth():Promise<BackendHealthData>{
+    return new Promise((resolve, reject) => {
+        Axios.get(`${hostname}/health`)
+            .then((data) => {
+                resolve(data.data);
+            })
+            .catch(((error) => {
+                reject(error);
+            }));
+    });
+}
+
+export { callBackendHealth}

webapp_frontend/public/backend.cfg

@@ -0,0 +1,7 @@
+
+
+function test(){
+    return null
+}
+
+export default test;

webapp_frontend/src/api.ts

@@ -0,0 +1,18 @@
+
+interface constants {
+    url: { API_URL: string }
+}
+
+
+const prod: constants = {
+    url: {
+        API_URL: window.location.hostname,
+    }
+}
+
+const dev: constants = {
+    url: {
+        API_URL: 'http://filefighter.ddns.net:7000/',
+    }
+};
+export const constants = process.env.NODE_ENV === 'development' ? dev : prod;

webapp_frontend/src/background/api/api.ts

@@ -1,12 +1,16 @@
 import React, {ReactElement, useEffect, useState} from 'react';
 import logo from '../assets/images/logos/logo.png';
 import './App.css';
-import {setBackendPort, callBackendHealth} from "../api";
+import {callBackendHealth} from "../background/api/api";
 
 
 import {Button, Table, Container} from 'react-bootstrap';
+import Header from "./basicElements/Header";
 
 function App():ReactElement {
+
+
+
     const [backendLiveTime, setBackendLiveTime] = useState<number | string>("not reachable");
     const [backendUserCount, setBackendUserCount] = useState<number | string>("not reachable");
 
@@ -15,14 +19,7 @@ function App():ReactElement {
 
 
     useEffect(() => {
-        Promise.resolve(setBackendPort())
-            .then((backendPort:string) => {
-                console.log("[APP] Backend-Port = " + backendPort)
-                callInitialBackendRequests()
-            })
-            .catch((error:any) => {
-                alert("Error: Problems with backend.cfg - " + error)
-            })
+        callInitialBackendRequests()
     // eslint-disable-next-line react-hooks/exhaustive-deps
     },[]);
 
@@ -40,7 +37,7 @@ function App():ReactElement {
 
     return (
         <div className="App">
-            <header className=""> </header>
+            <Header></Header>
                 <Container>
                 <h1>
                     FileFighter

webapp_frontend/src/background/api/login.tsx

@@ -0,0 +1,16 @@
+import React, {ReactElement} from "react";
+import App from "./App";
+
+function Constants():ReactElement{
+    // userinfos
+    // url + host of backend
+
+
+
+
+    return(<App></App>)
+
+
+}
+
+export default Constants;

webapp_frontend/src/background/constants.tsx

@@ -0,0 +1,8 @@
+import React, {ReactElement} from 'react';
+
+function Footers():ReactElement {
+    return(<div>hallo</div>);
+}
+
+export default Footers;
+