Fetched User data on Login, modified PrivateRoute logic

src/components/App.jsx

@@ -7,6 +7,7 @@ import Register from "./Auth/Register";
 import ResetPassword from "./Auth/ResetPassword";
 import Settings from "./Auth/Settings";
 import VerifyEmail from "./Auth/VerifyEmail";
+import Profile from "./User/Profile";
 import PrivateRoute from "./Shared/PrivateRoute";
 import About from "./Static/About";
 import Footer from "./Static/Footer";
@@ -15,10 +16,6 @@ import NoMatch from "./Static/NoMatch";
 import Navbar from "./Navbar";
 
 class App extends Component {
-  componentDidMount() {
-
-  }
-
   render() {
     const footSmash = {
       display: "flex",
@@ -39,13 +36,14 @@ class App extends Component {
                 path="/auth/verify-email/:emailKey"
                 component={VerifyEmail}
               />
-              <Route
-                path="/auth/verify-email"
-                component={VerifyEmail}
-              />
+              <Route path="/auth/verify-email" component={VerifyEmail} />
               <PrivateRoute path="/auth/settings" component={Settings} />
               <Route path="/auth/forgot-password" component={ForgotPassword} />
-              <Route path="/auth/reset-password/:uid/:token" component={ResetPassword} />
+              <Route
+                path="/auth/reset-password/:uid/:token"
+                component={ResetPassword}
+              />
+              <PrivateRoute path="/user/profile" component={Profile} />
               <Route component={NoMatch} />
             </Switch>
           </div>

src/components/Auth/Login.jsx

@@ -41,7 +41,7 @@ class Login extends Component {
       password,
       userToken
     } = this.props;
-    if (userToken) return <Redirect to={"/"} />;
+    if (userToken) return <Redirect to={"/user/profile"} />;
     return (
       <LoginView
         isSendingAuthRequest={isSendingAuthRequest}

src/components/Auth/VerifyEmail.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, Redirect } from "react-router-dom";
 import { Container, Form, Header, Message } from "semantic-ui-react";
 
 import {
@@ -39,8 +39,10 @@ class VerifyEmail extends Component {
       isSendingAuthRequest,
       authRequestError,
       authRequestSuccess,
-      emailVerificationString
+      emailVerificationString,
+      userToken
     } = this.props;
+    if (userToken) return <Redirect to={"/"} />;
     return (
       <VerifyEmailView
         isSendingAuthRequest={isSendingAuthRequest}

src/components/Navbar.jsx

@@ -46,9 +46,13 @@ const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
       <Menu.Menu position="right">
         <Dropdown item text="Account">
           <Dropdown.Menu>
+            <Dropdown.Item as={Link} to="/user/profile">
+              My Profile
+            </Dropdown.Item>
             <Dropdown.Item as={Link} to="/auth/settings">
               Settings
             </Dropdown.Item>
+            <Dropdown.Divider />
             <Dropdown.Item onClick={dispatchLogoutRequest}>
               Logout
             </Dropdown.Item>

src/components/Shared/PrivateRoute.jsx

@@ -1,30 +1,66 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect, Route } from "react-router-dom";
+import { Loader } from "semantic-ui-react";
+
+import { sendGetSelfUserRequest } from "../../actions/user/saga.actions";
 
 const propTypes = {
-  path: PropTypes.string.isRequired,
   userToken: PropTypes.string.isRequired,
-  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired
+  selfUser: PropTypes.object.isRequired,
+  isSendingUserRequest: PropTypes.bool.isRequired,
+  path: PropTypes.string.isRequired,
+  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+    .isRequired,
+  dispatch: PropTypes.func.isRequired
 };
 
-const PrivateRoute = ({ userToken, component, ...rest }) => {
-  return (
-    <Route
-      {...rest}
-      render={props => {
-        if (!!userToken) return React.createElement(component, props);
-        return <Redirect to="/auth/login" />;
-      }}
-    />
-  );
-};
+class PrivateRoute extends Component {
+  componentWillMount() {
+    const { dispatch, userToken, selfUser } = this.props;
+    // If the user token exists and the self user object isn't loaded, dispatch
+    if (userToken && Object.keys(selfUser).length === 0) {
+      dispatch(sendGetSelfUserRequest());
+    }
+  }
+
+  render() {
+    const {
+      userToken,
+      selfUser,
+      isSendingUserRequest,
+      component,
+      ...rest
+    } = this.props;
+    // If the user token exists and 
+    // * self user object isn't loaded yet or
+    // * we are still sending user request
+    // show loading spinner
+    if (
+      !!userToken &&
+      (Object.keys(selfUser).length === 0 || isSendingUserRequest)
+    ) {
+      return <Loader active />;
+    }
+    return (
+      <Route
+        {...rest}
+        render={props => {
+          if (!!userToken) return React.createElement(component, props);
+          return <Redirect to="/auth/login" />;
+        }}
+      />
+    );
+  }
+}
 
 PrivateRoute.propTypes = propTypes;
 
 const mapStateToProps = state => ({
-  userToken: state.auth.userToken
+  userToken: state.auth.userToken,
+  selfUser: state.user.selfUser,
+  isSendingUserRequest: state.user.isSendingUserRequest
 });
 
 export default connect(mapStateToProps)(PrivateRoute);

src/components/User/Profile.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Card, Container, Header, Label, List } from "semantic-ui-react";
+
+class Profile extends Component {
+  render() {
+    const { selfUser } = this.props;
+    return <ProfileView user={selfUser} />;
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+const ProfileView = ({ user }) => (
+  <Container>
+    <Header>Profile</Header>
+    <Card>
+      <Card.Content>
+        <Card.Header>{user.username || "No username!"}</Card.Header>
+        <Card.Meta>{user.email || "No email!"}</Card.Meta>
+        <Card.Description>
+          <span>
+            {user.client && "Client"}{user.provider && "Provider"}
+            {!user.client && !user.provider && "User Registration Not Completed"}
+          </span>
+          {user.first_name} {user.last_name}
+          {user.userinfo && <List>
+            {Object.keys(user.userinfo).map(function(key) {
+              return (<List.Item key={key}>
+                {user.userinfo[key]}
+              </List.Item>)
+            })}
+          </List>}
+        </Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        <Label color={user.is_active ? "teal" : "red"} size="tiny" tag>
+          {user.is_active ? "Active" : "Deactivated"}
+        </Label>
+      </Card.Content>
+    </Card>
+  </Container>
+);
+
+export default connect(mapStateToProps)(Profile);