Feature first api call (#1)

* WIP - Network Error - Missing CORS-Header in BE?

* Fixed Pipelines, added featureRelease.yml pipeline.

* fixed cors erros, due to missing protocol in url.

* Minor changes on first api call example

* Deleted unused line

Co-authored-by: open-schnick <jonathan.burst@gmx.de>

.github/workflows/featureRelease.yml

@@ -0,0 +1,40 @@
+name: Latest Release
+
+on:
+  push:
+    branches:
+      - 'feature/**'
+    paths:
+      - 'webapp_frontend/**'
+      - 'webapp_provider/**'
+
+jobs:
+  Build_Docker_Image_on_Push:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up Project
+        uses: actions/checkout@v2
+      -
+        name: Set up Node.js environment
+        uses: actions/setup-node@v2.1.2
+        with:
+          node-version: 12
+      -
+        name: Build frontend
+        run: |
+          cd webapp_frontend
+          npm i
+          npm run-script build
+          cp -r build ../webapp_provider/public
+      -
+        name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USER }}
+          password: ${{ secrets.DOCKER_PW }}
+      -
+        name: Build and push
+        run: |
+          docker build -t filefighter/frontend:feature webapp_provider/
+          docker push filefighter/frontend:feature

.github/workflows/latestRelease.yml

@@ -1,6 +1,12 @@
 name: Latest Release
 
-on: push
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'webapp_frontend/**'
+      - 'webapp_provider/**'
 
 jobs:
   Build_Docker_Image_on_Push:

.github/workflows/stableRelease.yml

@@ -2,8 +2,14 @@ name: Stable Release
 
 on:
   push:
+    branches:
+      - 'master'
     tags:
       - 'v*.*.*'
+    paths:
+      - 'webapp_frontend/**'
+      - 'webapp_provider/**'
+
 jobs:
   Build_Docker_Image_on_new_Tag:
     runs-on: ubuntu-latest

webapp_frontend/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.12.64",
     "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
+    "axios": "^0.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",

webapp_frontend/src/api.ts

@@ -0,0 +1,21 @@
+import Axios from "axios";
+
+const uri = "http://localhost:8080";
+
+interface BackendHealthData {
+    uptimeInSeconds: number
+}
+
+function callBackendHealth():Promise<BackendHealthData>{
+    return new Promise((resolve, reject) => {
+        Axios.get(`${uri}/health`)
+            .then((data) => {
+                resolve(data.data);
+            })
+            .catch(((error) => {
+                reject(error);
+            }));
+    });
+}
+
+export {callBackendHealth}

webapp_frontend/src/components/App.tsx

@@ -0,0 +1,45 @@
+import React, {ReactElement, useEffect, useState} from 'react';
+import logo from '../logo.svg';
+import './App.css';
+import {callBackendHealth} from "../api";
+
+function App():ReactElement {
+    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("Init");
+
+    useEffect(() => {
+        updateVariables()
+    });
+
+    function updateVariables(): void {
+        Promise.all([callBackendHealth()])
+            .then(([backendHealthData]) => {
+                setBackendLiveTime(backendHealthData.uptimeInSeconds)
+            })
+    }
+
+    return (
+        <div className="App">
+            <header className="App-header">
+                <p>
+                    Hello World
+                </p>
+                <img src={logo} className="App-logo" alt="logo"/>
+                <p>
+                    Edit <code>src/App.tsx</code> and save to reload.
+                </p>
+                <a
+                    className="App-link"
+                    href="https://reactjs.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn React
+                </a>
+                <button style={{marginTop: "20px"}} onClick={() => updateVariables()}>Test</button>
+                <p>{backendLiveTime}</p>
+            </header>
+        </div>
+    );
+}
+
+export default App;

webapp_frontend/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(