2017-11-04 21:11:43 +00:00
|
|
|
import React, { Component } from 'react'
|
2017-10-29 22:06:41 +00:00
|
|
|
|
2017-11-04 21:11:43 +00:00
|
|
|
import { api, httpGET } from '../http.js'
|
|
|
|
import './user.css'
|
2017-10-29 22:06:41 +00:00
|
|
|
|
|
|
|
export default class User extends Component {
|
|
|
|
constructor(props) {
|
2017-11-04 21:11:43 +00:00
|
|
|
super(props)
|
|
|
|
this.state = {user: undefined}
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
|
|
|
componentDidMount() {
|
2017-11-04 21:11:43 +00:00
|
|
|
if (!this.props.id) {
|
|
|
|
return
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
2017-11-04 21:11:43 +00:00
|
|
|
|
2017-10-29 22:06:41 +00:00
|
|
|
httpGET(api("/users/"+ this.props.id),
|
|
|
|
(status, body) => {
|
2017-11-04 21:11:43 +00:00
|
|
|
this.setState({user: JSON.parse(body)})
|
2017-10-29 22:06:41 +00:00
|
|
|
},
|
|
|
|
(error) => {
|
2017-11-04 21:11:43 +00:00
|
|
|
console.log("Failed to load user details:", error)
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
2017-11-04 21:11:43 +00:00
|
|
|
)
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-11-04 21:11:43 +00:00
|
|
|
let details = this.state.user
|
|
|
|
if (!this.props.id || details === undefined) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
if (details === null) {
|
|
|
|
return this.renderUnknownUser()
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
2017-11-04 21:11:43 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="user-details">
|
|
|
|
<img src={details.picture} alt={details.name +" picture"} />
|
|
|
|
<div className="name">{details.name}</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderUnknownUser() {
|
|
|
|
let shortID = this.props.id.substring(0, 8)
|
|
|
|
return (
|
|
|
|
<div className="user-details">
|
|
|
|
User
|
|
|
|
<div className="user-id">{shortID}</div>
|
|
|
|
</div>
|
|
|
|
)
|
2017-10-29 22:06:41 +00:00
|
|
|
}
|
|
|
|
}
|