Merge pull request #727 from transloadit/refactor-provider

refactor: decouple provider requests from views and expose the API

src/index.js

@@ -1,5 +1,13 @@
 const Core = require('./core')
 
+// Communication with Uppy Server
+const Server = require('./server')
+
+// Reusable views
+const Views = require('./views')
+
+const lib = { Views, Server }
+
 // Parent
 const Plugin = require('./core/Plugin')
 
@@ -32,6 +40,7 @@ const ReduxDevTools = require('./plugins/ReduxDevTools')
 
 module.exports = {
   Core,
+  lib,
   Plugin,
   StatusBar,
   ProgressBar,

src/plugins/Dropbox/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('../../core/Plugin')
-const Provider = require('../Provider')
-const View = require('../Provider/view')
+const { Provider } = require('../../server')
+const { ProviderView } = require('../../views')
 const icons = require('./icons')
 const { h } = require('preact')
 
@@ -38,7 +38,7 @@ module.exports = class Dropbox extends Plugin {
   }
 
   install () {
-    this.view = new View(this)
+    this.view = new ProviderView(this)
     // Set default state for Dropbox
     this.setPluginState({
       authenticated: false,

src/plugins/GoogleDrive/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('../../core/Plugin')
-const Provider = require('../Provider')
-const View = require('../Provider/view')
+const { Provider } = require('../../server')
+const { ProviderView } = require('../../views')
 const { h } = require('preact')
 
 module.exports = class GoogleDrive extends Plugin {
@@ -33,7 +33,7 @@ module.exports = class GoogleDrive extends Plugin {
   }
 
   install () {
-    this.view = new View(this)
+    this.view = new ProviderView(this)
     // Set default state for Google Drive
     this.setPluginState({
       authenticated: false,

src/plugins/Instagram/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('../../core/Plugin')
-const Provider = require('../Provider')
-const View = require('../Provider/view')
+const { Provider } = require('../../server')
+const { ProviderView } = require('../../views')
 const { h } = require('preact')
 
 module.exports = class Instagram extends Plugin {
@@ -36,7 +36,7 @@ module.exports = class Instagram extends Plugin {
   }
 
   install () {
-    this.view = new View(this, {
+    this.view = new ProviderView(this, {
       viewType: 'grid'
     })
     // Set default state for Instagram

src/plugins/Provider/index.js

@@ -1,91 +0,0 @@
-'use strict'
-
-require('whatwg-fetch')
-
-const _getName = (id) => {
-  return id.split('-').map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' ')
-}
-
-module.exports = class Provider {
-  constructor (uppy, opts) {
-    this.uppy = uppy
-    this.opts = opts
-    this.provider = opts.provider
-    this.id = this.provider
-    this.authProvider = opts.authProvider || this.provider
-    this.name = this.opts.name || _getName(this.id)
-
-    this.onReceiveResponse = this.onReceiveResponse.bind(this)
-  }
-
-  get hostname () {
-    const uppyServer = this.uppy.state.uppyServer || {}
-    const host = this.opts.host
-    return uppyServer[host] || host
-  }
-
-  onReceiveResponse (response) {
-    const uppyServer = this.uppy.state.uppyServer || {}
-    const host = this.opts.host
-    const headers = response.headers
-    // Store the self-identified domain name for the uppy-server we just hit.
-    if (headers.has('i-am') && headers.get('i-am') !== uppyServer[host]) {
-      this.uppy.setState({
-        uppyServer: Object.assign({}, uppyServer, {
-          [host]: headers.get('i-am')
-        })
-      })
-    }
-    return response
-  }
-
-  checkAuth () {
-    return fetch(`${this.hostname}/${this.id}/authorized`, {
-      method: 'get',
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-    .then(this.onReceiveResponse)
-    .then((res) => {
-      return res.json()
-      .then((payload) => {
-        return payload.authenticated
-      })
-    })
-  }
-
-  authUrl () {
-    return `${this.hostname}/${this.id}/connect`
-  }
-
-  fileUrl (id) {
-    return `${this.hostname}/${this.id}/get/${id}`
-  }
-
-  list (directory) {
-    return fetch(`${this.hostname}/${this.id}/list/${directory || ''}`, {
-      method: 'get',
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-    .then(this.onReceiveResponse)
-    .then((res) => res.json())
-  }
-
-  logout (redirect = location.href) {
-    return fetch(`${this.hostname}/${this.id}/logout?redirect=${redirect}`, {
-      method: 'get',
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      }
-    })
-  }
-}

src/plugins/Url/index.js

@@ -1,7 +1,7 @@
 const Plugin = require('../../core/Plugin')
 const Translator = require('../../core/Translator')
 const { h } = require('preact')
-const Provider = require('../Provider')
+const { RequestClient } = require('../../server')
 const UrlUI = require('./UrlUI.js')
 require('whatwg-fetch')
 
@@ -56,27 +56,11 @@ module.exports = class Url extends Plugin {
     this.getMeta = this.getMeta.bind(this)
     this.addFile = this.addFile.bind(this)
 
-    this[this.id] = new Provider(uppy, {
-      host: this.opts.host,
-      provider: 'url',
-      authProvider: 'url'
-    })
+    this.server = new RequestClient(uppy, {host: this.opts.host})
   }
 
   getMeta (url) {
-    return fetch(`${this.hostname}/url/meta`, {
-      method: 'post',
-      credentials: 'include',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        url: url
-      })
-    })
-    .then(this[this.id].onReceiveResponse)
-    .then((res) => res.json())
+    return this.server.post('url/meta', { url })
   }
 
   getFileNameFromUrl (url) {

src/server/Provider.js

@@ -0,0 +1,41 @@
+'use strict'
+
+const RequestClient = require('./RequestClient')
+require('whatwg-fetch')
+
+const _getName = (id) => {
+  return id.split('-').map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' ')
+}
+
+module.exports = class Provider extends RequestClient {
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.provider = opts.provider
+    this.id = this.provider
+    this.authProvider = opts.authProvider || this.provider
+    this.name = this.opts.name || _getName(this.id)
+  }
+
+  checkAuth () {
+    return this.get(`${this.id}/authorized`)
+      .then((payload) => {
+        return payload.authenticated
+      })
+  }
+
+  authUrl () {
+    return `${this.hostname}/${this.id}/connect`
+  }
+
+  fileUrl (id) {
+    return `${this.hostname}/${this.id}/get/${id}`
+  }
+
+  list (directory) {
+    return this.get(`${this.id}/list/${directory || ''}`)
+  }
+
+  logout (redirect = location.href) {
+    return this.get(`${this.id}/logout?redirect=${redirect}`)
+  }
+}

src/server/RequestClient.js

@@ -0,0 +1,61 @@
+'use strict'
+
+require('whatwg-fetch')
+
+module.exports = class RequestClient {
+  constructor (uppy, opts) {
+    this.uppy = uppy
+    this.opts = opts
+    this.onReceiveResponse = this.onReceiveResponse.bind(this)
+  }
+
+  get hostname () {
+    const uppyServer = this.uppy.state.uppyServer || {}
+    const host = this.opts.host
+    return uppyServer[host] || host
+  }
+
+  onReceiveResponse (response) {
+    const uppyServer = this.uppy.state.uppyServer || {}
+    const host = this.opts.host
+    const headers = response.headers
+    // Store the self-identified domain name for the uppy-server we just hit.
+    if (headers.has('i-am') && headers.get('i-am') !== uppyServer[host]) {
+      this.uppy.setState({
+        uppyServer: Object.assign({}, uppyServer, {
+          [host]: headers.get('i-am')
+        })
+      })
+    }
+    return response
+  }
+
+  get (path) {
+    return fetch(`${this.hostname}/${path}`, {
+      method: 'get',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      // @todo validate response status before calling json
+      .then(this.onReceiveResponse)
+      .then((res) => res.json())
+  }
+
+  post (path, data) {
+    fetch(`${this.hostname}/${path}`, {
+      method: 'post',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+      .then(this.onReceiveResponse)
+      // @todo validate response status before calling json
+      .then((res) => res.json())
+  }
+}

src/server/index.js

@@ -0,0 +1,11 @@
+'use-strict'
+/**
+ * Manages communications with Uppy Server
+ */
+
+const RequestClient = require('./RequestClient')
+const Provider = require('./Provider')
+
+module.exports = {
+  RequestClient, Provider
+}

src/plugins/Provider/view/index.js → src/views/ProviderView/index.js

@@ -1,7 +1,7 @@
 const AuthView = require('./AuthView')
 const Browser = require('./Browser')
 const LoaderView = require('./Loader')
-const Utils = require('../../../core/Utils')
+const Utils = require('../../core/Utils')
 const { h } = require('preact')
 
 /**
@@ -34,7 +34,7 @@ const { h } = require('preact')
  * getItemThumbnailUrl
  *    @return {String}
  */
-module.exports = class View {
+module.exports = class ProviderView {
   /**
    * @param {object} instance of the plugin
    */

src/views/index.js

@@ -0,0 +1,5 @@
+const ProviderView = require('./ProviderView')
+
+module.exports = {
+  ProviderView
+}