Profile: component init

This commit is contained in:
SamR1 2017-12-31 18:43:24 +01:00
parent 1a888cd8f5
commit 7f1fa99429
6 changed files with 71 additions and 5 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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)