API Календаря Google с React

Question

Я пытаюсь использовать Google Calendar API в приложении React и Firebase. Я аутентифицируюсь в Google в моем App.js компонент, в то время как я пытаюсь получить доступ к API Календаря Google в моем Calendar.js составная часть.

Вот мой 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

А вот мой Calendar.js (загружается компонентом AppBody)

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

Проблема в том, что если я продолжаю обновлять экран, я получаю очень противоречивые результаты:

• Иногда я получаю и отображаю список событий.
• Чаще всего я не получаю никаких событий.
• Иногда я получаю следующую ошибку:

Uncaught {result: {…}, body: "{↵ "error": {↵ "errors": [↵ {↵ "domain": "us…e Exceeded. Continued use requires signup."↵ }↵}↵", headers: {…}, status: 403, statusText: null}

Я явно не правильно использую Calendar API. Что я делаю не так, хотя?

Answer 1

Предполагая, что window.gapi является объектом API Календаря, который вы устанавливаете с помощью тега скрипта и вызываете объект окна, пожалуйста, подумайте, загрузился ли скрипт к тому моменту, когда вы вызываете его в свой componentDidMount.

В случае, если скрипт запускается раньше монтирования вашего компонента, вы будете отображать события. В случае, если скрипт не загрузился, когда ваш компонент монтируется, ваш массив state.events будет пустым, что не приведет к событиям. Последняя ошибка представляется ошибкой квоты; Вы можете проверить свои настройки API здесь: https://console.cloud.google.com/apis/api/calendar-json.googleapis.com/overview