add loading bar, add borders

frontend/package-lock.json

@@ -10902,6 +10902,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
       "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-redux": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.0.tgz",
@@ -10915,12 +10920,13 @@
         "react-is": "^16.8.6"
       }
     },
-    "react-redux-loading": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/react-redux-loading/-/react-redux-loading-1.0.1.tgz",
-      "integrity": "sha512-FXEW1fCU7yeJHDuJ1OTG3VUHtllpw6ezenVVl/b64f25MCxd9Vsnm+N/4g5/rx89/FGGr+IMMVO3cpLhvxqLTw==",
+    "react-redux-loading-bar": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-redux-loading-bar/-/react-redux-loading-bar-4.4.0.tgz",
+      "integrity": "sha512-kcR+wT2eA3+bQD7Gpn7KcHcnANHkayLQGiePEU4JFnLq6sQqjlcE3n8DAUEGjTV+T+Gwlt3rMq/zfImq5yc0PA==",
       "requires": {
-        "prop-types": "^15.5.6"
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.2"
       }
     },
     "react-router": {

frontend/package.json

@@ -8,7 +8,7 @@
     "react-scripts": "^3.1.1",
     "react-icons": "^3.7.0",
     "react-redux": "^7.1.0",
-    "react-redux-loading": "^1.0.1",
+    "react-redux-loading-bar": "^4.4.0",
     "react-router-dom": "^5.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",

frontend/src/actions/messages.js

@@ -1,5 +1,5 @@
 import {getMessages, saveMessage} from "../utils/api";
-import { showLoading, hideLoading } from "react-redux-loading";
+import { showLoading, hideLoading } from "react-redux-loading-bar";
 
 export const ADD_MESSAGE = "ADD_MESSAGE";
 export const RECEIVE_MESSAGES = "RECEIVE_MESSAGES";
@@ -11,12 +11,17 @@ function addMessage(message) {
     };
 }
 
-export function fetchPosts(counter) {
+export function fetchPosts(counter, withBar) {
     return dispatch => {
-
+        if (withBar) {
+            dispatch(showLoading());
+        }
         return getMessages().then((messages) => {
             dispatch(receiveMessages(messages, counter));
-            dispatch(hideLoading());
+        }).finally(() => {
+            if (withBar) {
+                dispatch(hideLoading());
+            }
         });
     };
 }

frontend/src/components/App.js

@@ -2,7 +2,7 @@ import React, {Component, Fragment} from "react";
 import {BrowserRouter as Router} from "react-router-dom";
 import {connect} from "react-redux";
 
-import LoadingBar from "react-redux-loading"; //importing the loading bar given by react-redux-loading
+import LoadingBar from "react-redux-loading-bar";
 import Dashboard from "./Dashboard";
 import NewMessage from "./NewMessage";
 import ConnectionToggle from "./ConnectionToggle";

frontend/src/components/Dashboard.js

@@ -8,7 +8,7 @@ class Dashboard extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {counter: 1, lastUpdateCounter: 0};
+        this.state = {counter: 1, lastUpdateCounter: 0, firstFetch: true};
     }
 
     componentDidMount() {
@@ -24,10 +24,11 @@ class Dashboard extends Component {
     }
 
     getMessages() {
-        this.props.dispatch(fetchPosts(this.state.counter + 1));
+        this.props.dispatch(fetchPosts(this.state.counter + 1, this.state.firstFetch));
 
         this.setState((state) => ({
-            counter: state.counter + 1
+            counter: state.counter + 1,
+            firstFetch: false
         }));
     }
 

frontend/src/components/Message.js

@@ -18,7 +18,7 @@ class Message extends Component {
         return (
             <div className="message-info">
                 <div>
-                    <span><b>{name}</b></span>
+                    <p><b>{name}</b></p>
                     <p>{text}</p>
                 </div>
             </div>

frontend/src/index.css

@@ -90,6 +90,12 @@ li {
   margin: 5px;
   display: flex;
   flex-direction: column;
+  border: 1px solid #dad7d7;
+  border-radius: 25px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 /* Hacky but less typing in the video */

frontend/src/middleware/logger.js

@@ -1,9 +1,9 @@
 const logger = store => next => action => {
-    console.group(action.type);
-    console.log("The action: ", action);
+    // console.group(action.type);
+    // console.log("The action: ", action);
     const returnValue = next(action);
-    console.log("The new state: ", store.getState());
-    console.groupEnd();
+    // console.log("The new state: ", store.getState());
+    // console.groupEnd();
 
     return returnValue;
 };

frontend/src/reducers/index.js

@@ -2,7 +2,7 @@ import { combineReducers } from "redux";
 
 import updates from "./messages";
 
-import { loadingBarReducer } from "react-redux-loading";
+import { loadingBarReducer } from "react-redux-loading-bar";
 
 export default combineReducers({
     updates: updates,

frontend/src/utils/api.js

@@ -1,15 +1,18 @@
 import * as fluence from "fluence";
 
 let session = fluence.directConnect("localhost", 30000, 1);
+window.fluenceSession = session;
 
 export async function toggleConnection(devnet, appId = 412) {
     if (devnet) {
         fluence.connect("0xeFF91455de6D4CF57C141bD8bF819E5f873c1A01", appId).then((s) => {
             session = s;
+            window.fluenceSession = s;
             return s
         })
     } else {
         session = fluence.directConnect("localhost", 30000, 1);
+        window.fluenceSession = session;
         Promise.resolve(session)
     }
 }