Migrate to firestore

src/components/Firebase/firebase.js

@@ -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/Home/index.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/Messages/Messages.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/SignIn/index.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/SignUp/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/Users/UserItem.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/UserList.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() {