1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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.
This commit is contained in:
moflo 2018-12-10 05:25:40 -08:00 committed by Tim Neutkens
parent 77d5f36eea
commit b0148cf453

View file

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