Client: profile update & PageNotFound handling

This commit is contained in:
SamR1
2017-12-31 19:32:52 +01:00
parent 7f1fa99429
commit 62d87d05f5
9 changed files with 887 additions and 28 deletions

File diff suppressed because it is too large Load Diff

View File

@ -6,6 +6,7 @@
"history": "^4.7.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",

View File

@ -10,6 +10,10 @@
href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
rel="stylesheet"
>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
rel="stylesheet"
/>
<title>mpwo</title>
</head>
<body>

View File

@ -29,5 +29,6 @@
.page-title {
font-size: 2em;
margin: 1em;
text-align: center;
}

View File

@ -5,6 +5,7 @@ import './App.css'
import Dashboard from './Dashboard'
import Logout from './User/Logout'
import NavBar from './NavBar'
import NotFound from './NotFound'
import Profile from './User/Profile'
import UserForm from './User/UserForm'
import { isLoggedIn } from '../utils'
@ -68,6 +69,7 @@ export default class App extends React.Component {
)
)}
/>
<Route component={NotFound} />
</Switch>
</div>
)

View File

@ -1,4 +1,5 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
class Logout extends React.Component {
@ -6,6 +7,9 @@ class Logout extends React.Component {
render() {
return (
<div>
<Helmet>
<title>mpwo - Dashboard</title>
</Helmet>
<h1 className="page-title">Dashboard</h1>
</div>
)

View File

@ -0,0 +1,13 @@
import React from 'react'
import { Helmet } from 'react-helmet'
export default function NotFound () {
return (
<div>
<Helmet>
<title>mpwo - 404</title>
</Helmet>
<h1 className="page-title">Page not found</h1>
</div>
)
}

View File

@ -1,32 +1,46 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
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>
<Helmet>
<title>mpwo - {user.username} - Profile</title>
</Helmet>
<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} {' '}
<Link
to={{
pathname: '/profile/edit',
}}
>
<i className="fa fa-pencil-square-o" aria-hidden="true" />
</Link>
</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>
<div className="col-md-4">
<div className="card">
<div className="card-header">
Last activities
<div className="col-md-4">
<div className="card">
<div className="card-header">
Last activities
</div>
<div className="card-body" />
</div>
<div className="card-body" />
</div>
</div>
</div>