Migrate Google Spreadsheet API to v4

Author: pomartel

.nvmrc

@@ -0,0 +1 @@
+6.17.1

index.html

@@ -8,7 +8,6 @@
   <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
 
   <script src="https://addevent.com/libs/atc/1.6.1/atc.min.js"></script>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
 
   <title>Calendrier des événements - CYCLEPOP</title>
 </head>

src/assets/scss/bulma.scss

@@ -7,7 +7,7 @@ $widescreen: $desktop;
 $fullhd: $desktop;
 
 // Colors
-$primary: #ff5252;
+$primary: #D04143;
 
 // Images placeholder dimensions
 $dimensions: 16 24 32 48 64 80 96 128;

src/core/DataStore.js

@@ -1,13 +1,13 @@
 import Evnt from './Evnt'
 import Ride from './Ride'
 class DataStore {
-  constructor (tabletop) {
-    this.tabletop = tabletop
+  constructor (backend) {
+    this.backend = backend
   }
 
-  initialize () {
-    this._buildEvents()
-    this._buildRides()
+  async initialize () {
+    await this._buildEvents()
+    await this._buildRides()
     this._buildDependencies()
   }
 
@@ -23,18 +23,14 @@ class DataStore {
     return this.rides.find(ev => ev.slug === slug)
   }
 
-  _buildEvents () {
-    this.events = this.tabletop
-      .sheets('calendrier')
-      .all()
-      .map(attrs => new Evnt({ attrs: attrs }))
+  async _buildEvents () {
+    const eventsData = await this.backend.dataFor({ sheet: 'calendrier' })
+    this.events = eventsData.map(attrs => new Evnt({ attrs: attrs }))
   }
 
-  _buildRides () {
-    this.rides = this.tabletop
-      .sheets('sorties')
-      .all()
-      .map(attrs => new Ride({ attrs: attrs }))
+  async _buildRides () {
+    const ridesData = await this.backend.dataFor({ sheet: 'sorties' })
+    this.rides = ridesData.map(attrs => new Ride({ attrs: attrs }))
   }
 
   _buildDependencies () {

src/core/DataStoreProxy.js

@@ -1,4 +1,5 @@
 import DataStore from './DataStore'
+import GoogleSheetsBackend from './GoogleSheetsBackend'
 
 class DataStoreProxy {
   static cachedDataStore = undefined
@@ -8,25 +9,18 @@ class DataStoreProxy {
       if (DataStoreProxy.cachedDataStore) {
         resolve(DataStoreProxy.cachedDataStore)
       } else {
-        this._fetchSpreadsheet((data, tabletop) => {
-          const dataStore = new DataStore(tabletop)
-          dataStore.initialize()
+        const backend = new GoogleSheetsBackend({
+          spreadsheetId: window.CONFIG.spreadsheetId,
+          apiKey: window.CONFIG.apiKey
+        })
+        const dataStore = new DataStore(backend)
+        dataStore.initialize().then(() => {
           DataStoreProxy.cachedDataStore = dataStore
           resolve(dataStore)
         })
       }
     })
   }
-
-  static _fetchSpreadsheet (callback) {
-    console.log('Fetching JSON from Google Spreadsheet...')
-    window.Tabletop.init({
-      key: window.CONFIG.spreadsheetUrl,
-      callback: callback,
-      simpleSheet: false,
-      parseNumbers: true
-    })
-  }
 }
 
 export default DataStoreProxy

src/core/GoogleSheetsBackend.js

@@ -0,0 +1,42 @@
+class GoogleSheetsBackend {
+  constructor (opts) {
+    this.spreadsheetId = opts.spreadsheetId
+    this.apiKey = opts.apiKey
+  }
+
+  dataFor (opts) {
+    return new Promise((resolve) => {
+      this._fetchJsonSheetData(opts['sheet']).then(data => {
+        resolve(this._dataToObjects(data))
+      })
+    })
+  }
+
+  _fetchJsonSheetData (sheet) {
+    return new Promise((resolve) => {
+      const url = `https://sheets.googleapis.com/v4/spreadsheets/${this.spreadsheetId}/values/${sheet}?key=${this.apiKey}`
+      console.debug(`Fetching ${sheet} spreadsheet...`)
+      fetch(url).then(response => {
+        response.json().then(data => {
+          resolve(data.values)
+        })
+      })
+    })
+  }
+
+  _dataToObjects (data) {
+    let objects = []
+    const headers = data.shift()
+    data.forEach(line => {
+      let obj = {}
+      headers.forEach((key, index) => {
+        const value = line[index]
+        obj[key] = value || ''
+      })
+      objects.push(obj)
+    })
+    return objects
+  }
+}
+
+export default GoogleSheetsBackend

src/main.js

@@ -9,7 +9,8 @@ require('@/assets/scss/main.scss')
 moment.locale('fr-ca')
 
 window.CONFIG = {
-  spreadsheetUrl: 'https://docs.google.com/spreadsheets/d/1_zXpbThqwS0xxYcF8NouVxW3UVMA55KlVttf9rvsDZ0/',
+  spreadsheetId: '1_zXpbThqwS0xxYcF8NouVxW3UVMA55KlVttf9rvsDZ0',
+  apiKey: 'AIzaSyBKlqE-VpGkZsAQLvNVutvOwt4QHLdb6Hw',
   rideWithGpsUrl: `https://ridewithgps.com/routes/[routeId].json?apikey=338acd0e&version=2`,
   eventTypes: {
     'sortie-locale': {