Migrate to firestore

Author: lkazberova

package-lock.json

@@ -1,6 +1,7 @@
 import app from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/database';
+import 'firebase/firestore';
 
 const config = {
   apiKey: process.env.REACT_APP_API_KEY,
@@ -17,13 +18,17 @@ class Firebase {
 
     /* Helper */
 
-    this.serverValue = app.database.ServerValue;
+    this.fieldValue = app.firestore.FieldValue;
     this.emailAuthProvider = app.auth.EmailAuthProvider;
 
     /* Firebase APIs */
 
     this.auth = app.auth();
-    this.db = app.database();
+
+    /* FireStore */
+    this.db = app.firestore();
+    const settings = { timestampsInSnapshots: true};
+    this.db.settings(settings);
 
     /* Social Sign In Method Provider */
 
@@ -67,9 +72,9 @@ class Firebase {
     this.auth.onAuthStateChanged(authUser => {
       if (authUser) {
         this.user(authUser.uid)
-          .once('value')
+          .get()
           .then(snapshot => {
-            const dbUser = snapshot.val();
+            const dbUser = snapshot.data() || {};
 
             // default empty roles
             if (!dbUser.roles) {
@@ -94,15 +99,15 @@ class Firebase {
 
   // *** User API ***
 
-  user = uid => this.db.ref(`users/${uid}`);
+  user = uid => this.db.doc(`users/${uid}`);
 
-  users = () => this.db.ref('users');
+  users = () => this.db.collection('users');
 
   // *** Message API ***
 
-  message = uid => this.db.ref(`messages/${uid}`);
+  message = uid => this.db.doc(`messages/${uid}`);
 
-  messages = () => this.db.ref('messages');
+  messages = () => this.db.collection('messages');
 }
 
 export default Firebase;

src/components/Firebase/firebase.js

@@ -12,18 +12,24 @@ class HomePage extends Component {
     this.state = {
       users: null,
     };
+    this.unsubscribe = null;
   }
 
   componentDidMount() {
-    this.props.firebase.users().on('value', snapshot => {
-      this.setState({
-        users: snapshot.val(),
+    this.unsubscribe = this.props.firebase
+      .users()
+      .onSnapshot(snapshot => {
+        let users = {};
+        snapshot.forEach(doc => (users[doc.id] = doc.data()));
+
+        this.setState({
+          users: users,
+        });
       });
-    });
   }
 
   componentWillUnmount() {
-    this.props.firebase.users().off();
+    this.unsubscribe && this.unsubscribe();
   }
 
   render() {

src/components/Home/index.js

@@ -14,6 +14,7 @@ class Messages extends Component {
       messages: [],
       limit: 5,
     };
+    this.unsubscribe = null;
   }
 
   componentDidMount() {
@@ -23,42 +24,37 @@ class Messages extends Component {
   onListenForMessages = () => {
     this.setState({ loading: true });
 
-    this.props.firebase
+    this.unsubscribe = this.props.firebase
       .messages()
-      .orderByChild('createdAt')
-      .limitToLast(this.state.limit)
-      .on('value', snapshot => {
-        const messageObject = snapshot.val();
-
-        if (messageObject) {
-          const messageList = Object.keys(messageObject).map(key => ({
-            ...messageObject[key],
-            uid: key,
-          }));
-
-          this.setState({
-            messages: messageList,
-            loading: false,
-          });
-        } else {
-          this.setState({ messages: null, loading: false });
-        }
+      .orderBy('createdAt', 'desc')
+      .limit(this.state.limit) // firestore doesn't have limitLast, so we use combination of order desc and limit
+      .onSnapshot(snapshot => {
+        let messageList = [];
+
+        snapshot.forEach(doc =>
+          messageList.push({ ...doc.data(), uid: doc.id }),
+        );
+
+        this.setState({
+          messages: messageList.reverse(),
+          loading: false,
+        });
       });
   };
 
   componentWillUnmount() {
-    this.props.firebase.messages().off();
+    this.unsubscribe && this.unsubscribe();
   }
 
   onChangeText = event => {
     this.setState({ text: event.target.value });
   };
 
   onCreateMessage = (event, authUser) => {
-    this.props.firebase.messages().push({
+    this.props.firebase.messages().add({
       text: this.state.text,
       userId: authUser.uid,
-      createdAt: this.props.firebase.serverValue.TIMESTAMP,
+      createdAt: this.props.firebase.fieldValue.serverTimestamp(),
     });
 
     this.setState({ text: '' });
@@ -67,15 +63,15 @@ class Messages extends Component {
   };
 
   onEditMessage = (message, text) => {
-    this.props.firebase.message(message.uid).set({
+    this.props.firebase.message(message.uid).update({
       ...message,
       text,
-      editedAt: this.props.firebase.serverValue.TIMESTAMP,
+      editedAt: this.props.firebase.fieldValue.serverTimestamp(),
     });
   };
 
   onRemoveMessage = uid => {
-    this.props.firebase.message(uid).remove();
+    this.props.firebase.message(uid).delete();
   };
 
   onNextPage = () => {
@@ -106,7 +102,7 @@ class Messages extends Component {
                 messages={messages.map(message => ({
                   ...message,
                   user: users
-                    ? users[message.userId]
+                    ? users[message.userId] || {}
                     : { userId: message.userId },
                 }))}
                 onEditMessage={this.onEditMessage}

src/components/Messages/Messages.js

@@ -105,7 +105,7 @@ class SignInGoogleBase extends Component {
       .doSignInWithGoogle()
       .then(socialAuthUser => {
         // Create a user in your Firebase Realtime Database too
-        return this.props.firebase.user(socialAuthUser.user.uid).set({
+        return this.props.firebase.user(socialAuthUser.user.uid).update({
           username: socialAuthUser.user.displayName,
           email: socialAuthUser.user.email,
           roles: [],
@@ -151,7 +151,7 @@ class SignInFacebookBase extends Component {
       .doSignInWithFacebook()
       .then(socialAuthUser => {
         // Create a user in your Firebase Realtime Database too
-        return this.props.firebase.user(socialAuthUser.user.uid).set({
+        return this.props.firebase.user(socialAuthUser.user.uid).update({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
           roles: [],
@@ -197,7 +197,7 @@ class SignInTwitterBase extends Component {
       .doSignInWithTwitter()
       .then(socialAuthUser => {
         // Create a user in your Firebase Realtime Database too
-        return this.props.firebase.user(socialAuthUser.user.uid).set({
+        return this.props.firebase.user(socialAuthUser.user.uid).update({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
           roles: [],

src/components/SignIn/index.js

@@ -50,7 +50,7 @@ class SignUpFormBase extends Component {
       .doCreateUserWithEmailAndPassword(email, passwordOne)
       .then(authUser => {
         // Create a user in your Firebase realtime database
-        return this.props.firebase.user(authUser.user.uid).set({
+        return this.props.firebase.user(authUser.user.uid).update({
           username,
           email,
           roles,

src/components/SignUp/index.js

@@ -11,6 +11,7 @@ class UserItem extends Component {
       user: null,
       ...props.location.state,
     };
+    this.unsubscribe = null;
   }
 
   componentDidMount() {
@@ -20,18 +21,18 @@ class UserItem extends Component {
 
     this.setState({ loading: true });
 
-    this.props.firebase
+    this.unsubscribe = this.props.firebase
       .user(this.props.match.params.id)
-      .on('value', snapshot => {
+      .onSnapshot(snapshot => {
         this.setState({
-          user: snapshot.val(),
+          user: snapshot.data(),
           loading: false,
         });
       });
   }
 
   componentWillUnmount() {
-    this.props.firebase.user(this.props.match.params.id).off();
+    this.unsubscribe && this.unsubscribe();
   }
 
   onSendPasswordResetEmail = () => {

src/components/Users/UserItem.js

@@ -12,28 +12,30 @@ class UserList extends Component {
       loading: false,
       users: [],
     };
+    this.unsubscribe = null;
   }
 
   componentDidMount() {
     this.setState({ loading: true });
 
-    this.props.firebase.users().on('value', snapshot => {
-      const usersObject = snapshot.val();
+    this.unsubscribe = this.props.firebase
+      .users()
+      .onSnapshot(snapshot => {
+        let usersList = [];
 
-      const usersList = Object.keys(usersObject).map(key => ({
-        ...usersObject[key],
-        uid: key,
-      }));
+        snapshot.forEach(doc =>
+          usersList.push({ ...doc.data(), uid: doc.id }),
+        );
 
-      this.setState({
-        users: usersList,
-        loading: false,
+        this.setState({
+          users: usersList,
+          loading: false,
+        });
       });
-    });
   }
 
   componentWillUnmount() {
-    this.props.firebase.users().off();
+    this.unsubscribe && this.unsubscribe();
   }
 
   render() {