Skip to content

Commit f8b6e78

Browse files
rwieruchrwieruch
authored
Merge pull request #1 from lkazberova/migrate-to-firestore
Migrate to firestore
2 parents ddcabe8 + 7f273ec commit f8b6e78

File tree

8 files changed

+69
-59
lines changed

8 files changed

+69
-59
lines changed

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Firebase/firebase.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import app from 'firebase/app';
22
import 'firebase/auth';
33
import 'firebase/database';
4+
import 'firebase/firestore';
45

56
const config = {
67
apiKey: process.env.REACT_APP_API_KEY,
@@ -17,13 +18,14 @@ class Firebase {
1718

1819
/* Helper */
1920

20-
this.serverValue = app.database.ServerValue;
21+
this.fieldValue = app.firestore.FieldValue;
2122
this.emailAuthProvider = app.auth.EmailAuthProvider;
2223

2324
/* Firebase APIs */
2425

2526
this.auth = app.auth();
26-
this.db = app.database();
27+
this.db = app.firestore();
28+
this.db.settings({ timestampsInSnapshots: true});
2729

2830
/* Social Sign In Method Provider */
2931

@@ -67,9 +69,9 @@ class Firebase {
6769
this.auth.onAuthStateChanged(authUser => {
6870
if (authUser) {
6971
this.user(authUser.uid)
70-
.once('value')
72+
.get()
7173
.then(snapshot => {
72-
const dbUser = snapshot.val();
74+
const dbUser = snapshot.data() || {};
7375

7476
// default empty roles
7577
if (!dbUser.roles) {
@@ -94,15 +96,15 @@ class Firebase {
9496

9597
// *** User API ***
9698

97-
user = uid => this.db.ref(`users/${uid}`);
99+
user = uid => this.db.doc(`users/${uid}`);
98100

99-
users = () => this.db.ref('users');
101+
users = () => this.db.collection('users');
100102

101103
// *** Message API ***
102104

103-
message = uid => this.db.ref(`messages/${uid}`);
105+
message = uid => this.db.doc(`messages/${uid}`);
104106

105-
messages = () => this.db.ref('messages');
107+
messages = () => this.db.collection('messages');
106108
}
107109

108110
export default Firebase;

‎src/components/Home/index.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,24 @@ class HomePage extends Component {
1212
this.state = {
1313
users: null,
1414
};
15+
this.unsubscribe = null;
1516
}
1617

1718
componentDidMount() {
18-
this.props.firebase.users().on('value', snapshot => {
19-
this.setState({
20-
users: snapshot.val(),
19+
this.unsubscribe = this.props.firebase
20+
.users()
21+
.onSnapshot(snapshot => {
22+
let users = {};
23+
snapshot.forEach(doc => (users[doc.id] = doc.data()));
24+
25+
this.setState({
26+
users,
27+
});
2128
});
22-
});
2329
}
2430

2531
componentWillUnmount() {
26-
this.props.firebase.users().off();
32+
this.unsubscribe();
2733
}
2834

2935
render() {

‎src/components/Messages/Messages.js

+24-25
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class Messages extends Component {
1414
messages: [],
1515
limit: 5,
1616
};
17+
this.unsubscribe = null;
1718
}
1819

1920
componentDidMount() {
@@ -23,42 +24,40 @@ class Messages extends Component {
2324
onListenForMessages = () => {
2425
this.setState({ loading: true });
2526

26-
this.props.firebase
27+
this.unsubscribe = this.props.firebase
2728
.messages()
28-
.orderByChild('createdAt')
29-
.limitToLast(this.state.limit)
30-
.on('value', snapshot => {
31-
const messageObject = snapshot.val();
32-
33-
if (messageObject) {
34-
const messageList = Object.keys(messageObject).map(key => ({
35-
...messageObject[key],
36-
uid: key,
37-
}));
38-
39-
this.setState({
40-
messages: messageList,
41-
loading: false,
42-
});
43-
} else {
44-
this.setState({ messages: null, loading: false });
29+
.orderBy('createdAt', 'desc')
30+
.limit(this.state.limit) // firestore doesn't have limitLast, so we use combination of order desc and limit
31+
.onSnapshot(snapshot => {
32+
let messages;
33+
34+
if (snapshot.size) {
35+
messages = [];
36+
snapshot.forEach(doc =>
37+
messages.push({ ...doc.data(), uid: doc.id }),
38+
);
4539
}
40+
41+
this.setState({
42+
messages,
43+
loading: false,
44+
});
4645
});
4746
};
4847

4948
componentWillUnmount() {
50-
this.props.firebase.messages().off();
49+
this.unsubscribe();
5150
}
5251

5352
onChangeText = event => {
5453
this.setState({ text: event.target.value });
5554
};
5655

5756
onCreateMessage = (event, authUser) => {
58-
this.props.firebase.messages().push({
57+
this.props.firebase.messages().add({
5958
text: this.state.text,
6059
userId: authUser.uid,
61-
createdAt: this.props.firebase.serverValue.TIMESTAMP,
60+
createdAt: this.props.firebase.fieldValue.serverTimestamp(),
6261
});
6362

6463
this.setState({ text: '' });
@@ -67,15 +66,15 @@ class Messages extends Component {
6766
};
6867

6968
onEditMessage = (message, text) => {
70-
this.props.firebase.message(message.uid).set({
69+
this.props.firebase.message(message.uid).update({
7170
...message,
7271
text,
73-
editedAt: this.props.firebase.serverValue.TIMESTAMP,
72+
editedAt: this.props.firebase.fieldValue.serverTimestamp(),
7473
});
7574
};
7675

7776
onRemoveMessage = uid => {
78-
this.props.firebase.message(uid).remove();
77+
this.props.firebase.message(uid).delete();
7978
};
8079

8180
onNextPage = () => {
@@ -106,7 +105,7 @@ class Messages extends Component {
106105
messages={messages.map(message => ({
107106
...message,
108107
user: users
109-
? users[message.userId]
108+
? users[message.userId] || {}
110109
: { userId: message.userId },
111110
}))}
112111
onEditMessage={this.onEditMessage}

‎src/components/SignIn/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ class SignInGoogleBase extends Component {
105105
.doSignInWithGoogle()
106106
.then(socialAuthUser => {
107107
// Create a user in your Firebase Realtime Database too
108-
return this.props.firebase.user(socialAuthUser.user.uid).set({
108+
return this.props.firebase.user(socialAuthUser.user.uid).update({
109109
username: socialAuthUser.user.displayName,
110110
email: socialAuthUser.user.email,
111111
roles: [],
@@ -151,7 +151,7 @@ class SignInFacebookBase extends Component {
151151
.doSignInWithFacebook()
152152
.then(socialAuthUser => {
153153
// Create a user in your Firebase Realtime Database too
154-
return this.props.firebase.user(socialAuthUser.user.uid).set({
154+
return this.props.firebase.user(socialAuthUser.user.uid).update({
155155
username: socialAuthUser.additionalUserInfo.profile.name,
156156
email: socialAuthUser.additionalUserInfo.profile.email,
157157
roles: [],
@@ -197,7 +197,7 @@ class SignInTwitterBase extends Component {
197197
.doSignInWithTwitter()
198198
.then(socialAuthUser => {
199199
// Create a user in your Firebase Realtime Database too
200-
return this.props.firebase.user(socialAuthUser.user.uid).set({
200+
return this.props.firebase.user(socialAuthUser.user.uid).update({
201201
username: socialAuthUser.additionalUserInfo.profile.name,
202202
email: socialAuthUser.additionalUserInfo.profile.email,
203203
roles: [],

‎src/components/SignUp/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ class SignUpFormBase extends Component {
5050
.doCreateUserWithEmailAndPassword(email, passwordOne)
5151
.then(authUser => {
5252
// Create a user in your Firebase realtime database
53-
return this.props.firebase.user(authUser.user.uid).set({
53+
return this.props.firebase.user(authUser.user.uid).update({
5454
username,
5555
email,
5656
roles,

‎src/components/Users/UserItem.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ class UserItem extends Component {
1111
user: null,
1212
...props.location.state,
1313
};
14+
this.unsubscribe = null;
1415
}
1516

1617
componentDidMount() {
@@ -20,18 +21,18 @@ class UserItem extends Component {
2021

2122
this.setState({ loading: true });
2223

23-
this.props.firebase
24+
this.unsubscribe = this.props.firebase
2425
.user(this.props.match.params.id)
25-
.on('value', snapshot => {
26+
.onSnapshot(snapshot => {
2627
this.setState({
27-
user: snapshot.val(),
28+
user: snapshot.data(),
2829
loading: false,
2930
});
3031
});
3132
}
3233

3334
componentWillUnmount() {
34-
this.props.firebase.user(this.props.match.params.id).off();
35+
this.unsubscribe();
3536
}
3637

3738
onSendPasswordResetEmail = () => {

‎src/components/Users/UserList.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,30 @@ class UserList extends Component {
1212
loading: false,
1313
users: [],
1414
};
15+
this.unsubscribe = null;
1516
}
1617

1718
componentDidMount() {
1819
this.setState({ loading: true });
1920

20-
this.props.firebase.users().on('value', snapshot => {
21-
const usersObject = snapshot.val();
21+
this.unsubscribe = this.props.firebase
22+
.users()
23+
.onSnapshot(snapshot => {
24+
let users = [];
2225

23-
const usersList = Object.keys(usersObject).map(key => ({
24-
...usersObject[key],
25-
uid: key,
26-
}));
26+
snapshot.forEach(doc =>
27+
users.push({ ...doc.data(), uid: doc.id }),
28+
);
2729

28-
this.setState({
29-
users: usersList,
30-
loading: false,
30+
this.setState({
31+
users,
32+
loading: false,
33+
});
3134
});
32-
});
3335
}
3436

3537
componentWillUnmount() {
36-
this.props.firebase.users().off();
38+
this.unsubscribe();
3739
}
3840

3941
render() {

0 commit comments

Comments
 (0)