Completed Login/Logout/Protected Routes

src/components/Navbar.jsx

@@ -1,28 +1,61 @@
 import React, { Component } from "react";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { Menu } from "semantic-ui-react";
+import { Dropdown, Menu } from "semantic-ui-react";
+
+import { sendLogoutRequest } from "../actions/auth/saga.actions";
 
 class Navbar extends Component {
+  dispatchLogoutRequest = () => {
+    this.props.dispatch(sendLogoutRequest());
+  };
+
   render() {
+    const { userToken } = this.props;
     return (
-      <Menu>
-        <Menu.Item as={Link} to="/">
-          Caremyway
-        </Menu.Item>
-        <Menu.Item as={Link} to="/about">
-          About
-        </Menu.Item>
-        <Menu.Menu position="right">
-          <Menu.Item as={Link} to="/auth/login">
-            Login
-          </Menu.Item>
-          <Menu.Item as={Link} to="/auth/register">
-            Register
-          </Menu.Item>
-        </Menu.Menu>
-      </Menu>
+      <NavbarView
+        isAuthenticated={!!userToken}
+        dispatchLogoutRequest={this.dispatchLogoutRequest}
+      />
     );
   }
 }
 
-export default Navbar;
+function mapStateToProps(state) {
+  return { ...state.auth };
+}
+
+const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
+  <Menu>
+    <Menu.Item as={Link} to="/">
+      Caremyway
+    </Menu.Item>
+    <Menu.Item as={Link} to="/about">
+      About
+    </Menu.Item>
+    {!isAuthenticated &&
+      <Menu.Menu position="right">
+        <Menu.Item as={Link} to="/auth/login">
+          Login
+        </Menu.Item>
+        <Menu.Item as={Link} to="/auth/register">
+          Register
+        </Menu.Item>
+      </Menu.Menu>}
+    {!!isAuthenticated &&
+      <Menu.Menu position="right">
+        <Dropdown item text="Account">
+          <Dropdown.Menu>
+            <Dropdown.Item as={Link} to="/auth/settings">
+              Settings
+            </Dropdown.Item>
+            <Dropdown.Item onClick={dispatchLogoutRequest}>
+              Logout
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      </Menu.Menu>}
+  </Menu>
+);
+
+export default connect(mapStateToProps)(Navbar);