Minor changes on first api call example

Author: Gimleux

webapp_frontend/src/api.ts

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

webapp_frontend/src/components/App.tsx

@@ -1,41 +1,45 @@
-import React, {useEffect, useState} from 'react';
+import React, {ReactElement, useEffect, useState} from 'react';
 import logo from '../logo.svg';
 import './App.css';
 import {callBackendHealth} from "../api";
 
-function App() {
-  const[test,setTest] = useState("test");
+function App():ReactElement {
+    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("Init");
 
-  useEffect(() => {
-    Promise.all([callBackendHealth()])
-        .then(([backendHealthData]) => {
-          setTest(backendHealthData.uptimeInSeconds)
-        })
-  }, [test]);
+    useEffect(() => {
+        updateVariables()
+    });
 
-  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 onClick={() => setTest(callBackendHealth().data)}>Test</button>
-        <p>{test}</p>
-      </header>
-    </div>
-  );
+    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;