support logout in React app frontend, update to 0.2.1

react-app/package.json

@@ -1,21 +1,21 @@
 {
   "name": "react-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "dependencies": {
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.2",
     "formik": "^2.2.9",
     "prop-types": "^15.8.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-player": "^2.10.0",
-    "react-redux": "^8.0.0",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "reactstrap": "^9.0.2",
+    "react-redux": "^8.0.5",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
+    "reactstrap": "^9.1.5",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.0",
-    "superagent": "^7.1.2",
+    "superagent": "^8.0.3",
     "toastr": "^2.1.4"
   },
   "devDependencies": {

react-app/src/actions/auth.js

@@ -31,3 +31,19 @@ export function checklogin() {
     },
   });
 }
+
+export function logout() {
+  return apiAction({
+    baseType: 'LOGOUT',
+    fetch() {
+      return api.auth.logout();
+    },
+    onSuccess(dispatch, data, getState) {
+        toastr.success(`Success logging out: ${JSON.stringify(data)}`);
+    },
+    onError(dispatch, data, getState) {
+        toastr.success(`Error logging out: ${JSON.stringify(data && data.response && data.response.text)}`);
+    },
+  });
+}
+

react-app/src/components/Logout.js

@@ -1,15 +1,23 @@
 import React, { useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
-import store from '../store';
+import { useDispatch, useSelector } from 'react-redux';
+import { logout } from '../actions/auth.js';
+import { isLoaded } from '../util/loadingObject'
 
 const Logout = () => {
-    // normally, we would inform the server just in case.
-    // (also, this wouldn't work if the cookie were httponly which it ought to be
-    document.cookie = "auth_token=";
+    const dispatch = useDispatch();
+    const user = useSelector(state => state.auth);
+    const isAuthenticated = isLoaded(user);
+
+    // log out on render, and navigate to root on success
     useEffect(() => {
-        store.dispatch({ type: "LOGOUT" });
+        dispatch(logout());
     }, []);
-    return (<Navigate to="/" />);
+
+    if (isAuthenticated)
+        return (<i>Logging you out ....</i>);
+    else
+        return (<Navigate to="/" />);
 };
 
 export default Logout;

react-app/src/components/forms/LoginForm.js

@@ -54,9 +54,10 @@ const LoginForm = (props) => {
             <ButtonToolbar>
               <Button
                 type='submit'
-                bsstyle='success' className="mr-2">
+                bsstyle='success'> 
                 Submit
               </Button> 
+                &nbsp;
               <Button
                 type="button"
                 onClick={handleReset}

react-app/src/reducers/auth.js

@@ -29,7 +29,7 @@ export default function(state = initialState, action) {
         if (!('sub' in newState))
             delete newState.loadingStatus;
     }
-    if (action.type === 'LOGOUT') {
+    if (action.type.startsWith('LOGOUT:')) {
         newState = { }
     }