Google Calendar API with React - reactjs

Question

I'm trying to use Google Calendar API in a React and Firebase app. I'm authenticating to Google in my App.js component, while I attempt to access the Google Calendar API in my Calendar.js component.
Here's my App.js:
import React from 'react'
import firebase from 'firebase'
import './App.css'
import AppBody from '../AppBody'
import AppHeader from '../AppHeader'
class App extends React.Component {
constructor() {
super()
this.state = {
user: null,
googleAuth: null
}
}
componentDidMount() {
// capture authentication callback
firebase.auth().onAuthStateChanged(user => {
if (user !== this.state.user) {
this.setState({user})
}
})
const script = document.createElement('script')
script.src = 'https://apis.google.com/js/api.js'
script.onload = () => {
window.gapi.load('client:auth2', () => {
window.gapi.client.init({
clientId: 'client_Id',
scope: 'https://www.googleapis.com/auth/calendar'
}).then(() =>
this.setState({googleAuth: window.gapi.auth2.getAuthInstance()})
)
})
}
document.head.appendChild(script)
}
handleAuthClick = () => {
let {googleAuth} = this.state
if (this.state.user) {
googleAuth.signOut().then(firebase.auth().signOut())
} else {
googleAuth.signIn().then(googleUser => {
var unsubscribe = firebase.auth().onAuthStateChanged(firebaseUser => {
unsubscribe()
if (!isUserEqual(googleUser, firebaseUser)) {
var credential = firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token)
firebase.auth().signInWithCredential(credential)
.then(user => this.setState({user}))
.catch(error => console.error(error))
} else {
console.log('User already signed-in Firebase.')
console.log(googleUser)
}
})
})
let isUserEqual = (googleUser, firebaseUser) => {
if (firebaseUser) {
var providerData = firebaseUser.providerData
for (let i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === firebase.auth.GoogleAuthProvider.PROVIDER_ID &&
providerData[i].uid === googleUser.getBasicProfile().getId()) {
return true
}
}
}
return false
}
}
}
render() {
let {user} = this.state
return (
<div>
<AppHeader onAuthClick={this.handleAuthClick} user={user} />
{user ? <AppBody userID={user.uid} /> : undefined}
</div>
)
}
}
export default App
And here is my Calendar.js (it's loaded by the AppBody component)
import React from 'react'
import './Calendar.css'
class Calendar extends React.Component {
constructor(props) {
super(props)
this.state = {
events: []
}
}
componentDidMount() {
if (window.gapi && window.gapi.client) {
var timeMin = new Date()
timeMin.setHours(0, 0, 0)
var timeMax = new Date()
timeMax.setHours(23, 59, 59)
window.gapi.client.load('calendar', 'v3', () => {
window.gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': timeMin.toISOString(),
'timeMax': timeMax.toISOString(),
'singleEvents': true
}).then(response => {
let events = []
response.result.items.forEach(event => {
events.push({
title: event.summary,
start: new Date(event.start.dateTime),
end: new Date(event.end.dateTime)
})
})
this.setState({events})
})
})
}
}
render() {
console.log(this.state.events)
return (
...render events...
)
}
}
export default Calendar
The problem is, if I keep refreshing the screen, I get very inconsistent results:
Sometimes I get and render the list of events.
More often than not, I get no events.
On occasion, I get the following error:
Uncaught {result: {…}, body: "{↵ "error": {↵ "errors": [↵ {↵ "domain": "us…e Exceeded. Continued use requires signup."↵ }↵}↵", headers: {…}, status: 403, statusText: null}
I'm obviously not using the Calendar API correctly. What am I doing wrong though?

Answer 1

Assuming that window.gapi is the Calendar API object that you're setting via a script tag and calling off of the window object, please consider whether the script has loaded by the time you're calling it in your componentDidMount.
In the case that the script races ahead of your component mounting, you'll have events rendered.
In the case that the script hasn't loaded when your component is mounting, your state.events array will be empty, resulting in no events.
The last error appears to be a quota error; you can check your api settings here: https://console.cloud.google.com/apis/api/calendar-json.googleapis.com/overview