Feature: Live Refresh on View Orders

application/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.2",
-    "bootstrap": "^4.6.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.0.1",
-    "redux": "^4.1.0",
-    "redux-thunk": "^2.3.0"
+    "axios": "^1.3.4",
+    "bootstrap": "^5.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.9.0",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -35,7 +34,8 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "react-scripts": "^5.0.1"
   }
 }

application/src/components/login/login-form/loginForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux'; 
+import { connect } from 'react-redux';
 import { loginUser } from '../../../redux/actions/authActions'
 
 const mapActionsToProps = dispatch => ({
@@ -17,7 +17,7 @@ class LoginForm extends Component {
   login(e) {
     e.preventDefault();
     this.props.commenceLogin(this.state.email, this.state.password);
-    this.props.onLogin();
+    this.props.onLogin(true);
   }
 
   onChange(key, val) {

application/src/components/login/login.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react';
+import { Navigate } from 'react-router-dom'
 import LoginForm from './login-form/loginForm';
 import './login.css';
 
 class Login extends Component {
-
+  state = { isLoggedIn: false };
+
+  handleLogin(isLoggedIn) {
+    this.setState({ isLoggedIn: isLoggedIn });
+  }
+
   render() {
     return (
       <div className="main-body">
+        {this.state.isLoggedIn && (<Navigate to="/view-orders" replace={true} />)}
         <h1 className="text-center">Login Screen</h1>
         <div className="d-flex justify-content-center mt-5">
-          <LoginForm onLogin={() => {this.props.history.push('/view-orders')}}/>
+          <LoginForm onLogin={(isLoggedIn) => this.handleLogin(isLoggedIn)}/>
         </div>
       </div>
     )

application/src/components/view-orders/viewOrders.js

@@ -8,7 +8,9 @@ export default function ViewOrders(props) {
     const [orders, setOrders] = useState([]);
 
     useEffect(() => {
-        fetch(`${SERVER_IP}/api/current-orders`)
+        let interval;
+        (function liveUpdateLoop() {
+            fetch(`${SERVER_IP}/api/current-orders`)
             .then(response => response.json())
             .then(response => {
                 if(response.success) {
@@ -17,7 +19,16 @@ export default function ViewOrders(props) {
                     console.log('Error getting orders');
                 }
             });
-    }, [])
+
+            interval = setTimeout(() => {
+              liveUpdateLoop();
+            }, 5000);
+          })();
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, []);
 
     return (
         <Template>

application/src/router/appRouter.js

@@ -1,14 +1,16 @@
 import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Main, Login, OrderForm, ViewOrders} from '../components';
 
 const AppRouter = (props) => {
   return (
     <Router>
-      <Route path="/" exact component={Main} />
-      <Route path="/login" exact component={Login} />
-      <Route path="/order" exact component={OrderForm} />
-      <Route path="/view-orders" exact component={ViewOrders} />
+      <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/order" element={<OrderForm />} />
+        <Route path="/view-orders" element={<ViewOrders />} />
+      </Routes>
     </Router>
   );
 }