@@ -13,17 +13,14 @@ class HomePage extends Component {
13
13
super ( props ) ;
14
14
15
15
this . state = {
16
- loading : false ,
17
16
users : null ,
18
17
} ;
19
18
}
20
19
21
20
componentDidMount ( ) {
22
- this . setState ( { loading : true } ) ;
23
21
this . props . firebase . users ( ) . on ( 'value' , snapshot => {
24
22
this . setState ( {
25
23
users : snapshot . val ( ) ,
26
- loading : false ,
27
24
} ) ;
28
25
} ) ;
29
26
}
@@ -33,14 +30,12 @@ class HomePage extends Component {
33
30
}
34
31
35
32
render ( ) {
36
- const { users, loading } = this . state ;
37
-
38
33
return (
39
34
< div >
40
35
< h1 > Home Page</ h1 >
41
36
< p > The Home Page is accessible by every signed in user.</ p >
42
37
43
- < Messages users = { users } usersLoading = { loading } />
38
+ < Messages users = { this . state . users } />
44
39
</ div >
45
40
) ;
46
41
}
@@ -128,7 +123,7 @@ class MessagesBase extends Component {
128
123
} ;
129
124
130
125
render ( ) {
131
- const { users, usersLoading } = this . props ;
126
+ const { users } = this . props ;
132
127
const { text, messages, loading } = this . state ;
133
128
134
129
return (
@@ -141,13 +136,15 @@ class MessagesBase extends Component {
141
136
</ button >
142
137
) }
143
138
144
- { loading && usersLoading && < div > Loading ...</ div > }
139
+ { loading && < div > Loading ...</ div > }
145
140
146
- { users && messages && (
141
+ { messages && (
147
142
< MessageList
148
143
messages = { messages . map ( message => ( {
149
144
...message ,
150
- user : users [ message . userId ] ,
145
+ user : users
146
+ ? users [ message . userId ]
147
+ : { userId : message . userId } ,
151
148
} ) ) }
152
149
onEditMessage = { this . onEditMessage }
153
150
onRemoveMessage = { this . onRemoveMessage }
@@ -233,8 +230,10 @@ class MessageItem extends Component {
233
230
/>
234
231
) : (
235
232
< span >
236
- < strong > { message . user . username } </ strong > { message . text } { ' ' }
237
- { message . editedAt && < span > (Edited)</ span > }
233
+ < strong >
234
+ { message . user . username || message . user . userId }
235
+ </ strong > { ' ' }
236
+ { message . text } { message . editedAt && < span > (Edited)</ span > }
238
237
</ span >
239
238
) }
240
239
0 commit comments