@@ -5,39 +5,50 @@ import PageLoading from '../../../../src/atoms/loading-indicators/page';
5
5
import styles from './_h-card.scss' ;
6
6
7
7
export default function Person ( { person, loading} ) {
8
- const avatar = person . avatar ;
8
+ return (
9
+ < div >
10
+ < Helmet title = { person ? person . displayName : 'Loading person...' } />
9
11
10
- return (
11
- < div >
12
- < Helmet title = { person . displayName || 'Loading person...' } />
13
-
14
- { loading && < PageLoading /> }
15
- { loading ||
16
- < div className = { `resource h-card panel panel-default ${ styles [ 'h-card' ] } ` } >
17
- < h3 className = "p-name panel-heading" > { person . displayName } </ h3 >
18
- < div className = "container-fluid panel-body" >
19
- < dl className = "col-sm-6" >
20
- < dt > First Name</ dt >
21
- < dd className = "p-given-name" > { person . name . first } </ dd >
22
- < dt > Last Name</ dt >
23
- < dd className = "p-family-name" > { person . name . last } </ dd >
24
- < dt > Username</ dt >
25
- < dd className = "p-nickname" > { person . id } </ dd >
26
- </ dl >
27
- < figure className = "col-sm-6" >
28
- < img
29
- src = { avatar . src }
30
- height = { avatar . size }
31
- width = { avatar . size }
32
- alt = { person . displayName }
33
- className = "img-rounded u-photo"
34
- />
35
- </ figure >
36
- </ div >
37
- </ div >
38
- }
12
+ { loading && < PageLoading /> }
13
+ { loading ||
14
+ < div className = { `resource h-card panel panel-default ${ styles [ 'h-card' ] } ` } >
15
+ < h3 className = "p-name panel-heading" > { person . displayName } </ h3 >
16
+ < div className = "container-fluid panel-body" >
17
+ < dl className = "col-sm-6" >
18
+ < dt > First Name</ dt >
19
+ < dd className = "p-given-name" > { person . name . first } </ dd >
20
+ < dt > Last Name</ dt >
21
+ < dd className = "p-family-name" > { person . name . last } </ dd >
22
+ < dt > Username</ dt >
23
+ < dd className = "p-nickname" > { person . id } </ dd >
24
+ </ dl >
25
+ < figure className = "col-sm-6" >
26
+ < img
27
+ src = { person . avatar . src }
28
+ height = { person . avatar . size }
29
+ width = { person . avatar . size }
30
+ alt = { person . displayName }
31
+ className = "img-rounded u-photo"
32
+ />
33
+ </ figure >
39
34
</ div >
40
- ) ;
35
+ </ div >
36
+ }
37
+ </ div >
38
+ ) ;
41
39
}
42
40
43
41
Person . displayName = 'Person' ;
42
+
43
+ Person . propTypes = {
44
+ loading : React . PropTypes . bool ,
45
+ person : React . PropTypes . shape ( {
46
+ id : React . PropTypes . string ,
47
+ displayName : React . PropTypes . string ,
48
+ name : React . PropTypes . shape ( {
49
+ first : React . PropTypes . string ,
50
+ last : React . PropTypes . string
51
+ } ) . isRequired
52
+ } )
53
+ } ;
54
+
0 commit comments