From b0148cf4532c73820cb35c7a31fb9afc142cffa8 Mon Sep 17 00:00:00 2001
From: moflo <Fieldforceapp@gmail.com>
Date: Mon, 10 Dec 2018 05:25:40 -0800
Subject: [PATCH] Update for use with Firestore (#5793)

Google seems to be deprecated the legacy realtime database and moving towards default use of Firestore, although it's still officially in beta. This PR migrates towards Firestore and the recommended loading methods for the Firebase 5.6.0 libraries. Note: the Firebase and Firebase-Admin dependencies should be updated to 5.6.0 and 6.3.0 respectively.
---
 .../pages/index.js                            | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/examples/with-firebase-authentication/pages/index.js b/examples/with-firebase-authentication/pages/index.js
index b0bd0b41..ed9f683a 100644
--- a/examples/with-firebase-authentication/pages/index.js
+++ b/examples/with-firebase-authentication/pages/index.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
-import firebase from 'firebase'
+import firebase from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/firestore'
 import 'isomorphic-unfetch'
 import clientCredentials from '../credentials/client'
 
@@ -7,8 +9,9 @@ export default class Index extends Component {
   static async getInitialProps ({req, query}) {
     const user = req && req.session ? req.session.decodedToken : null
     // don't fetch anything from firebase if the user is not found
-    const snap = user && await req.firebaseServer.database().ref('messages').once('value')
-    const messages = snap && snap.val()
+    // const snap = user && await req.firebaseServer.database().ref('messages').once('value')
+    // const messages = snap && snap.val()
+    const messages = null
     return { user, messages }
   }
 
@@ -21,6 +24,7 @@ export default class Index extends Component {
     }
 
     this.addDbListener = this.addDbListener.bind(this)
+    this.removeDbListener = this.removeDbListener.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }
@@ -50,18 +54,32 @@ export default class Index extends Component {
         fetch('/api/logout', {
           method: 'POST',
           credentials: 'same-origin'
-        }).then(() => firebase.database().ref('messages').off())
+        }).then(() => this.removeDbListener())
       }
     })
   }
 
   addDbListener () {
-    firebase.database().ref('messages').on('value', snap => {
-      const messages = snap.val()
+    var db = firebase.firestore()
+    // Disable deprecated features
+    db.settings({
+      timestampsInSnapshots: true
+    })
+    let unsubscribe = db.collection('messages').onSnapshot(querySnapshot => {
+      var messages = {}
+      querySnapshot.forEach(function (doc) {
+        messages[doc.id] = doc.data()
+      })
       if (messages) this.setState({ messages })
     }, (error) => {
       console.error(error)
     })
+    this.setState({ unsubscribe })
+  }
+
+  removeDbListener () {
+    // firebase.database().ref('messages').off()
+    if (this.state.unsubscribe) { this.state.unsubscribe() }
   }
 
   handleChange (event) {
@@ -70,8 +88,13 @@ export default class Index extends Component {
 
   handleSubmit (event) {
     event.preventDefault()
+    var db = firebase.firestore()
+    // Disable deprecated features
+    db.settings({
+      timestampsInSnapshots: true
+    })
     const date = new Date().getTime()
-    firebase.database().ref(`messages/${date}`).set({
+    db.collection('messages').doc(`${date}`).set({
       id: date,
       text: this.state.value
     })
@@ -102,7 +125,7 @@ export default class Index extends Component {
             <input
               type={'text'}
               onChange={this.handleChange}
-              placeholder={'add message'}
+              placeholder={'add message...'}
               value={value}
             />
           </form>