From db3cf0ee29ac4d7127f082d0c351ad4f8771ba7c Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Sat, 19 Aug 2023 19:59:55 +0200
Subject: [PATCH] ReactJS: add loading state

- use 8081 port for talking to SpringBoot (as 8080 occupied by Corda)
---
 webapp/package.json |  2 +-
 webapp/src/App.js   | 25 +++++++++++++------------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index f5f7a11..43ddbd9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,7 +17,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:8080",
+  "proxy": "http://localhost:8081",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 7982f09..71598e2 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -3,24 +3,25 @@ import React, { useState, useEffect } from 'react';
 
 function App() {
 
-  const [joke, setJoke] = useState([]);
+  const [joke, setJoke] = useState(null);
+
   useEffect(() => {
-     fetch('/api/badjokes')
-        .then((response) => response.json())
-        .then((data) => {
-           console.log(data.joke);
-           setJoke(data.joke);
-        })
-        .catch((err) => {
-           console.log(err.message);
-        });
+    fetch('/api/badjokes')
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data.joke);
+        setJoke(data.joke);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   }, []);
 
   return (
     <div className="App">
       <header className="App-header">
-        <p>         
-          Here is your joke: {joke}
+        <p>
+          Here is your joke: {joke ? <span>{joke}</span> : <span>Loading...</span>}
         </p>
       </header>
     </div>