Profile: component init
This commit is contained in:
parent
1a888cd8f5
commit
7f1fa99429
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -6,7 +6,7 @@ class Logout extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Dashboard</h1>
|
||||
<h1 className="page-title">Dashboard</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -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 && (
|
||||
|
@ -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() {
|
41
mpwo_client/src/components/User/Profile.jsx
Normal file
41
mpwo_client/src/components/User/Profile.jsx
Normal 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)
|
Loading…
Reference in New Issue
Block a user