Как реализовать Google Calendar API с помощью React?

Question

У меня проблемы с реализацией API Календаря Google с помощью React Big Calendar. Я могу получить два по отдельности, но объединение этих двух проблем для меня.

До сих пор я мог использовать API Календаря Google для извлечения событий из общего календаря c. Я запускаю его с помощью команды 'node.' И могу извлечь события таким образом (список json объектов), где он имеет соответствующий формат для календаря.

Я могу запустить React Big Calendar со статичными c, фиктивными событиями, но когда я пытаюсь использовать события, полученные из вызова API Google, я сталкиваюсь с чем-то, что называется 'promisify' выдает , и поиск в Google не помог. Я пытаюсь запустить программу, используя "npm start", и я комментировал свой код и увидел, что эта строка: "const {google} = require ('googleapis')" является причиной возникновения ошибки. Я собираюсь признать, что я новичок в веб-программировании и не понимаю, почему он будет работать с узлом, но не тогда, когда я использую два

Вот мой текущий код:

import React, { Component } from 'react';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import {
  Calendar,
  momentLocalizer,
} from 'react-big-calendar'

const { google } = require('googleapis')
const { OAuth2 } = google.auth

// Setup authorization to our Google Calendar API using OAuth that was setup 'console.developers.google.com'
const client_id = 'client_id'
const client_secret = 'client_secret'
const oAuth2Client = new OAuth2(client_id, client_secret)

oAuth2Client.setCredentials({
    refresh_token:'refresh_token'
})
//const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })
const localizer = momentLocalizer(moment);

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      events: []
    }
  }

  comonpentDidMount = () => {
    this.getEvents()

  }

  getEvents() {
    const calendar = google.calendar({version: 'v3', oAuth2Client});

    calendar.events.list({
      calendarId: 'primary',
      singleEvents: true,
      orderBy: 'startTime',
    }, 
    (err, res) => {
      if (err) return console.log('The API returned an error: ' + err);
      const events = res.data.items;

      if (events.length) {
        console.log('Events');
        events.map((event, i) => {
          let titleName = event.summary;
          let startTime = event.start.dateTime;
          let endTime = event.end.dateTime;
          this.state.events.push( {title: titleName, start: startTime, end: endTime});
        });
      } 
      else {
        console.log('No upcoming events found.');
      }

      console.log(this.state.events);
    });

  }

} 

const calendar = () =>  {
  return(
    <div>
    <Calendar
      localizer={localizer}
      events={this.state.events}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
  )       
}

export default calendar;

Имейте в виду, что client_id, client_secret и refresh_token были преднамеренно установлены на те, что ради этого вопроса.