[Frontend] Show dyanamic content on navbar

React-frontend/src/components/core/Navbar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Logo from '../../images/logo.png';
 import Ham from '../../images/hamburger.png';
 import { Link } from 'react-router-dom';
@@ -11,50 +12,65 @@ import {
 } from 'mdbreact';
 import { MDBBtn } from 'mdbreact';
 
-function Nvb() {
+import { logout } from '../../store/actions/auth';
+
+const Nvb = () => {
+  const dispatch = useDispatch();
+  const { isLoading, isAuthenticated } = useSelector(state => state.auth);
+
+  const logoutHandler = () => {
+    dispatch(logout());
+  };
+
   return (
     <div>
-      <Navbar expand="lg" bg="dark" variant="dark">
-        <Nav className="mr-auto">
-          <Link class="navbar-brand" to="/">
-            <img src={Logo} height="50" width="50" alt="logo"></img>
+      <Navbar expand='lg' bg='dark' variant='dark'>
+        <Nav className='mr-auto'>
+          <Link class='navbar-brand' to='/'>
+            <img src={Logo} height='50' width='50' alt='logo'></img>
             OpenMF
           </Link>
         </Nav>
         <Nav>
-          <a href="https://github.com/scorelab/OpenMF/">
-            <MDBBtn outline color="success">
+          <a href='https://github.com/scorelab/OpenMF/'>
+            <MDBBtn outline color='success'>
               Help
             </MDBBtn>
           </a>
-          <Link to="/login">
-            <MDBBtn outline color="primary">
-              Login
+          {!isLoading && isAuthenticated ? (
+            <MDBBtn onClick={logoutHandler} outline color='primary'>
+              Logout
             </MDBBtn>
-          </Link>
+          ) : (
+            <Link to='/login'>
+              <MDBBtn outline color='primary'>
+                Login
+              </MDBBtn>
+            </Link>
+          )}
           <MDBDropdown>
-            <MDBDropdownToggle caret color="dark">
+            <MDBDropdownToggle caret color='dark'>
               {
                 <img
-                  className="thumbnail-image"
+                  className='thumbnail-image'
                   src={Ham}
-                  alt="down"
-                  height="25"
-                  width="28"
+                  alt='down'
+                  height='25'
+                  width='28'
                 />
               }
             </MDBDropdownToggle>
-            <MDBDropdownMenu className="dropdown-default">
-              <MDBDropdownItem href="#!">Contact Admin</MDBDropdownItem>
-              <MDBDropdownItem href="#!">Request Role</MDBDropdownItem>
-              <MDBDropdownItem href="#!">Contribute</MDBDropdownItem>
-              <MDBDropdownItem href="#!">Report bug</MDBDropdownItem>
+            <MDBDropdownMenu className='dropdown-default'>
+              <MDBDropdownItem href='#!'>Contact Admin</MDBDropdownItem>
+              <MDBDropdownItem href='#!'>Request Role</MDBDropdownItem>
+              <MDBDropdownItem href='#!'>Contribute</MDBDropdownItem>
+              <MDBDropdownItem href='#!'>Report bug</MDBDropdownItem>
             </MDBDropdownMenu>
           </MDBDropdown>
         </Nav>
       </Navbar>
     </div>
   );
-}
+};
 
 export default Nvb;

React-frontend/src/store/actions/auth.js

@@ -1,5 +1,6 @@
 import axios from '../../axios';
 import { setAlert } from './alerts';
+import history from '../../utils/history';
 
 export const LOGIN = 'LOGIN';
 export const LOGOUT = 'LOGOUT';
@@ -20,6 +21,7 @@ export const login = loginData => async dispatch => {
   }
 };
 
-export const logout = () => dispatch => {
+export const logout = () => async dispatch => {
+  history.push('/login');
   dispatch({ type: LOGOUT });
 };

React-frontend/src/utils/history.js

@@ -0,0 +1,4 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+export default history;