Skip to content

Commit ee90989

Browse files
committed
20-How to use Firebase Realtime Database in React
1 parent bffcfe8 commit ee90989

File tree

1 file changed

+11
-12
lines changed

1 file changed

+11
-12
lines changed

src/components/Home/index.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,14 @@ class HomePage extends Component {
1313
super(props);
1414

1515
this.state = {
16-
loading: false,
1716
users: null,
1817
};
1918
}
2019

2120
componentDidMount() {
22-
this.setState({ loading: true });
2321
this.props.firebase.users().on('value', snapshot => {
2422
this.setState({
2523
users: snapshot.val(),
26-
loading: false,
2724
});
2825
});
2926
}
@@ -33,14 +30,12 @@ class HomePage extends Component {
3330
}
3431

3532
render() {
36-
const { users, loading } = this.state;
37-
3833
return (
3934
<div>
4035
<h1>Home Page</h1>
4136
<p>The Home Page is accessible by every signed in user.</p>
4237

43-
<Messages users={users} usersLoading={loading} />
38+
<Messages users={this.state.users} />
4439
</div>
4540
);
4641
}
@@ -128,7 +123,7 @@ class MessagesBase extends Component {
128123
};
129124

130125
render() {
131-
const { users, usersLoading } = this.props;
126+
const { users } = this.props;
132127
const { text, messages, loading } = this.state;
133128

134129
return (
@@ -141,13 +136,15 @@ class MessagesBase extends Component {
141136
</button>
142137
)}
143138

144-
{loading && usersLoading && <div>Loading ...</div>}
139+
{loading && <div>Loading ...</div>}
145140

146-
{users && messages && (
141+
{messages && (
147142
<MessageList
148143
messages={messages.map(message => ({
149144
...message,
150-
user: users[message.userId],
145+
user: users
146+
? users[message.userId]
147+
: { userId: message.userId },
151148
}))}
152149
onEditMessage={this.onEditMessage}
153150
onRemoveMessage={this.onRemoveMessage}
@@ -233,8 +230,10 @@ class MessageItem extends Component {
233230
/>
234231
) : (
235232
<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>}
238237
</span>
239238
)}
240239

0 commit comments

Comments
 (0)