Profile: component init

mpwo_client/src/components/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  /*text-align: center;*/
 }
 
 .App-logo {
@@ -26,3 +26,8 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.page-title {
+  font-size: 2em;
+  text-align: center;
+}

mpwo_client/src/components/App.jsx

@@ -3,8 +3,9 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 
 import './App.css'
 import Dashboard from './Dashboard'
-import Logout from './Logout'
+import Logout from './User/Logout'
 import NavBar from './NavBar'
+import Profile from './User/Profile'
 import UserForm from './User/UserForm'
 import { isLoggedIn } from '../utils'
 
@@ -55,6 +56,18 @@ export default class App extends React.Component {
             )}
           />
           <Route exact path="/logout" component={Logout} />
+          <Route
+            exact path="/profile"
+            render={() => (
+              isLoggedIn() ? (
+                <Profile />
+              ) : (
+                <UserForm
+                  formType={'Login'}
+                />
+              )
+            )}
+          />
         </Switch>
      </div>
     )

mpwo_client/src/components/Dashboard/index.jsx

@@ -6,7 +6,7 @@ class Logout extends React.Component {
   render() {
     return (
       <div>
-        <h1>Dashboard</h1>
+        <h1 className="page-title">Dashboard</h1>
       </div>
     )
   }

mpwo_client/src/components/NavBar/index.jsx

@@ -58,7 +58,14 @@ function NavBar (props) {
             )}
             {props.user.isAuthenticated && (
             <li className="nav-item">
-              <a className="nav-link">{props.user.username}</a>
+              <Link
+                className="nav-link"
+                to={{
+                  pathname: '/profile',
+                }}
+              >
+                {props.user.username}
+              </Link>
             </li>
             )}
             {props.user.isAuthenticated && (

mpwo_client/src/components/User/Logout.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-import { logout } from '../../actions'
+import { logout } from '../../actions/index'
 
 class Logout extends React.Component {
   componentDidMount() {

mpwo_client/src/components/User/Profile.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+function Profile ({ user }) {
+  return (
+    <div className="container">
+      <h1 className="page-title">Profile</h1>
+      <div className="row">
+        <div className="col-md-8">
+          <div className="card">
+            <div className="card-header">
+              {user.username}
+            </div>
+            <div className="card-body">
+              <div className="row">
+                <div className="col-md-8">
+                  <p>Email : {user.email}</p>
+                  <p>Registration date : {user.createdAt}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-4">
+          <div className="card">
+            <div className="card-header">
+              Last activities
+            </div>
+            <div className="card-body" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default connect(
+  state => ({
+    user: state.user,
+  })
+)(Profile)