2017-04-22 14:56:28 +02:00
|
|
|
import React, { Component } from 'react'
|
2018-12-10 14:25:40 +01:00
|
|
|
import firebase from 'firebase/app'
|
|
|
|
import 'firebase/auth'
|
|
|
|
import 'firebase/firestore'
|
2017-11-04 15:05:16 +01:00
|
|
|
import 'isomorphic-unfetch'
|
2017-05-08 21:53:48 +02:00
|
|
|
import clientCredentials from '../credentials/client'
|
2017-04-22 14:56:28 +02:00
|
|
|
|
2020-04-02 23:36:18 +02:00
|
|
|
export async function getServerSideProps({ req, query }) {
|
2020-05-02 07:13:08 +02:00
|
|
|
const user =
|
|
|
|
req.session && req.session.decodedToken ? req.session.decodedToken : null
|
2020-04-02 23:36:18 +02:00
|
|
|
// don't fetch anything from firebase if the user is not found
|
2020-05-02 07:13:08 +02:00
|
|
|
// const snapshot = user && (await req.firebaseServer.firestore().collection('messages').get())
|
|
|
|
// let messages = []
|
|
|
|
// snapshot.forEach(function(doc) {
|
|
|
|
// messages.push(doc.data())
|
|
|
|
// });
|
2020-04-02 23:36:18 +02:00
|
|
|
const messages = null
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
user,
|
|
|
|
messages,
|
|
|
|
},
|
2017-04-22 14:56:28 +02:00
|
|
|
}
|
2020-04-02 23:36:18 +02:00
|
|
|
}
|
2017-04-22 14:56:28 +02:00
|
|
|
|
2020-04-02 23:36:18 +02:00
|
|
|
export default class Index extends Component {
|
2019-11-11 04:24:53 +01:00
|
|
|
constructor(props) {
|
2017-04-22 14:56:28 +02:00
|
|
|
super(props)
|
|
|
|
this.state = {
|
|
|
|
user: this.props.user,
|
|
|
|
value: '',
|
2019-11-11 04:24:53 +01:00
|
|
|
messages: this.props.messages,
|
2017-04-22 14:56:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
this.addDbListener = this.addDbListener.bind(this)
|
2018-12-10 14:25:40 +01:00
|
|
|
this.removeDbListener = this.removeDbListener.bind(this)
|
2017-04-22 14:56:28 +02:00
|
|
|
this.handleChange = this.handleChange.bind(this)
|
|
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
componentDidMount() {
|
2017-04-22 14:56:28 +02:00
|
|
|
firebase.initializeApp(clientCredentials)
|
|
|
|
|
|
|
|
if (this.state.user) this.addDbListener()
|
|
|
|
|
|
|
|
firebase.auth().onAuthStateChanged(user => {
|
|
|
|
if (user) {
|
|
|
|
this.setState({ user: user })
|
2018-12-17 17:34:32 +01:00
|
|
|
return user
|
|
|
|
.getIdToken()
|
|
|
|
.then(token => {
|
2017-04-22 14:56:28 +02:00
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
return fetch('/api/login', {
|
|
|
|
method: 'POST',
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
headers: new Headers({ 'Content-Type': 'application/json' }),
|
|
|
|
credentials: 'same-origin',
|
2019-11-11 04:24:53 +01:00
|
|
|
body: JSON.stringify({ token }),
|
2017-04-22 14:56:28 +02:00
|
|
|
})
|
2018-12-17 17:34:32 +01:00
|
|
|
})
|
|
|
|
.then(res => this.addDbListener())
|
2017-04-22 14:56:28 +02:00
|
|
|
} else {
|
|
|
|
this.setState({ user: null })
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
fetch('/api/logout', {
|
|
|
|
method: 'POST',
|
2019-11-11 04:24:53 +01:00
|
|
|
credentials: 'same-origin',
|
2018-12-10 14:25:40 +01:00
|
|
|
}).then(() => this.removeDbListener())
|
2017-04-22 14:56:28 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
addDbListener() {
|
2018-12-10 14:25:40 +01:00
|
|
|
var db = firebase.firestore()
|
2018-12-17 17:34:32 +01:00
|
|
|
let unsubscribe = db.collection('messages').onSnapshot(
|
|
|
|
querySnapshot => {
|
|
|
|
var messages = {}
|
2019-11-11 04:24:53 +01:00
|
|
|
querySnapshot.forEach(function(doc) {
|
2018-12-17 17:34:32 +01:00
|
|
|
messages[doc.id] = doc.data()
|
|
|
|
})
|
|
|
|
if (messages) this.setState({ messages })
|
|
|
|
},
|
|
|
|
error => {
|
|
|
|
console.error(error)
|
|
|
|
}
|
|
|
|
)
|
2018-12-10 14:25:40 +01:00
|
|
|
this.setState({ unsubscribe })
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
removeDbListener() {
|
2018-12-10 14:25:40 +01:00
|
|
|
// firebase.database().ref('messages').off()
|
2018-12-17 17:34:32 +01:00
|
|
|
if (this.state.unsubscribe) {
|
|
|
|
this.state.unsubscribe()
|
|
|
|
}
|
2017-04-22 14:56:28 +02:00
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
handleChange(event) {
|
2017-04-22 14:56:28 +02:00
|
|
|
this.setState({ value: event.target.value })
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
handleSubmit(event) {
|
2017-04-22 14:56:28 +02:00
|
|
|
event.preventDefault()
|
2018-12-10 14:25:40 +01:00
|
|
|
var db = firebase.firestore()
|
2017-04-22 14:56:28 +02:00
|
|
|
const date = new Date().getTime()
|
2018-12-17 17:34:32 +01:00
|
|
|
db.collection('messages')
|
|
|
|
.doc(`${date}`)
|
|
|
|
.set({
|
|
|
|
id: date,
|
2019-11-11 04:24:53 +01:00
|
|
|
text: this.state.value,
|
2018-12-17 17:34:32 +01:00
|
|
|
})
|
2017-04-22 14:56:28 +02:00
|
|
|
this.setState({ value: '' })
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
handleLogin() {
|
2017-04-22 14:56:28 +02:00
|
|
|
firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
handleLogout() {
|
2017-04-22 14:56:28 +02:00
|
|
|
firebase.auth().signOut()
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2017-04-22 14:56:28 +02:00
|
|
|
const { user, value, messages } = this.state
|
|
|
|
|
2018-12-17 17:34:32 +01:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{user ? (
|
|
|
|
<button onClick={this.handleLogout}>Logout</button>
|
|
|
|
) : (
|
|
|
|
<button onClick={this.handleLogin}>Login</button>
|
|
|
|
)}
|
|
|
|
{user && (
|
|
|
|
<div>
|
|
|
|
<form onSubmit={this.handleSubmit}>
|
|
|
|
<input
|
|
|
|
type={'text'}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
placeholder={'add message...'}
|
|
|
|
value={value}
|
|
|
|
/>
|
|
|
|
</form>
|
|
|
|
<ul>
|
|
|
|
{messages &&
|
|
|
|
Object.keys(messages).map(key => (
|
|
|
|
<li key={key}>{messages[key].text}</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
2017-04-22 14:56:28 +02:00
|
|
|
}
|
|
|
|
}
|