From 7f1fa994292658369757b06e24d1c56aaf1d974f Mon Sep 17 00:00:00 2001
From: SamR1 <samira.rabaaoui@coding-academy.fr>
Date: Sun, 31 Dec 2017 18:43:24 +0100
Subject: [PATCH] Profile: component init

---
 mpwo_client/src/components/App.css            |  7 +++-
 mpwo_client/src/components/App.jsx            | 15 ++++++-
 .../src/components/Dashboard/index.jsx        |  2 +-
 mpwo_client/src/components/NavBar/index.jsx   |  9 +++-
 .../{Logout/index.jsx => User/Logout.jsx}     |  2 +-
 mpwo_client/src/components/User/Profile.jsx   | 41 +++++++++++++++++++
 6 files changed, 71 insertions(+), 5 deletions(-)
 rename mpwo_client/src/components/{Logout/index.jsx => User/Logout.jsx} (92%)
 create mode 100644 mpwo_client/src/components/User/Profile.jsx

diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css
index c5c6e8a6..3e5e7e23 100644
--- a/mpwo_client/src/components/App.css
+++ b/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;
+}
diff --git a/mpwo_client/src/components/App.jsx b/mpwo_client/src/components/App.jsx
index d3e40427..29c18f7e 100644
--- a/mpwo_client/src/components/App.jsx
+++ b/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>
     )
diff --git a/mpwo_client/src/components/Dashboard/index.jsx b/mpwo_client/src/components/Dashboard/index.jsx
index c707883d..d22482db 100644
--- a/mpwo_client/src/components/Dashboard/index.jsx
+++ b/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>
     )
   }
diff --git a/mpwo_client/src/components/NavBar/index.jsx b/mpwo_client/src/components/NavBar/index.jsx
index 31dda97d..6019c7cb 100644
--- a/mpwo_client/src/components/NavBar/index.jsx
+++ b/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 && (
diff --git a/mpwo_client/src/components/Logout/index.jsx b/mpwo_client/src/components/User/Logout.jsx
similarity index 92%
rename from mpwo_client/src/components/Logout/index.jsx
rename to mpwo_client/src/components/User/Logout.jsx
index 1e3ea7e7..48d26192 100644
--- a/mpwo_client/src/components/Logout/index.jsx
+++ b/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() {
diff --git a/mpwo_client/src/components/User/Profile.jsx b/mpwo_client/src/components/User/Profile.jsx
new file mode 100644
index 00000000..ebab17af
--- /dev/null
+++ b/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)