Merge remote-tracking branch 'origin/master'

# Conflicts:
#	CHANGELOG.md
#	src/core/Core.js

CHANGELOG.md

@@ -37,7 +37,7 @@ Ideas that will be planned and find their way into a release at one point
 
 ## 0.0.5
 
-Scheduled to be released: May 02, 2016
+<a name="next"></a> Scheduled to be released: May 02, 2016
 
 - [ ] meta: Create an Uppy logo (@markstory)
 - [ ] build: investigate Rollup someday, for tree-shaking and smaller dist https://github.com/substack/node-browserify/issues/1379#issuecomment-183383199, https://github.com/nolanlawson/rollupify
@@ -58,16 +58,22 @@ Scheduled to be released: May 02, 2016
 - [x] progressbar: make it great again (@arturi)
 - [x] website: Polish http://uppy.io/stats and undo its CSS crimes (@arturi)
 - [x] website: Move the activity feed from http://uppy.io/stats to the Uppy homepage (@arturi)
+ https://dl.dropboxusercontent.com/s/ypx6a0a82s65o0z/2016-04-08%20at%2010.38.png
+- [ ] drive: add breadcrumb navigation (@hedgerh)
+- [ ] drive: write files to filesystem correctly (@hedgerh)
+- [ ] drive: convert google docs to office format (@hedgerh)
+- [ ] drive: possible UI polish (@hedgerh)
 
 ## 0.0.4
 
-<a name="next"></a> Scheduled to be released: April 08, 2016
+Released: April 13, 2016
 
-- [ ] google: Add Google Drive plugin unit test (@hedgerh)
-- [ ] google: Add a working Google Drive example (without Modal, via e.g. `target: "div#on-my-page"`) (@hedgerh)
-- [ ] google: Make sure http://server.uppy.io is targeted on uppy.io; and localhost is targeted elsewhere (also see https://github.com/hughsk/envify) (@kvz)
+- [x] server: Upgrade to 0.0.4 (@kvz)
+- [x] drive: Add Google Drive plugin unit test (@hedgerh)
+- [x] drive: Add a barely working Google Drive example (without Modal, via e.g. `target: "div#on-my-page"`) (@hedgerh)
+- [x] drive: Make sure http://server.uppy.io is targeted on uppy.io; and localhost is targeted elsewhere (also see https://github.com/hughsk/envify) (@kvz)
 - [x] test: Setup one modal/dragdrop acceptance test (@arturi)
-- [x] google: Make sure http://server.uppy.io is targeted on uppy.io; and localhost is targeted elsewhere (also see https://github.com/hughsk/envify) (@kvz)
+- [x] drive: Make sure http://server.uppy.io is targeted on uppy.io; and localhost is targeted elsewhere (also see https://github.com/hughsk/envify) (@kvz)
 - [x] website: Add a http://uppy.io/stats page that inlines disc.html as well as displays the different bundle sizes, and an activity feed (@kvz)
 - [x] dragdrop: refactor & improve (@arturi)
 - [x] website: fix i18n & DragDrop examples (@arturi)
@@ -122,7 +128,7 @@ Released: March 01, 2016
 - [x] core: Decide on single-noun terminology (npm, umd, dist, package, cdn, module -> bundler -> bundle), and call it that through-out (@kvz)
 - [x] core: throw an error when one Plugin is `.use`d twice. We don't support that now, and will result in very confusing behavior (@kvz)
 - [x] dragdrop: Convert `DragDrop` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@arturi)
-- [x] google: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh)
+- [x] drive: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh)
 - [x] modal: Add barely working Modal plugin that can be used as a target (#53, #50, @arturi)
 - [x] modal: Improve Modal API (@arturi, @kvz)
 - [x] modal: Make `ProgressBar` work with the new Modal (@kvz, @arturi)
@@ -171,7 +177,7 @@ Here are the go-to folks for each individual component or area of expertise:
 - docs (@arturi)
 - dragdrop (@arturi)
 - dropbox (@hedgerh)
-- google (@hedgerh)
+- drive (@hedgerh)
 - instagram (@hedgerh)
 - meta (@kvz)
 - modal (@hedgerh)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uppy",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Almost as cute as a Puppy :dog:",
   "main": "src/index.js",
   "scripts": {

src/core/Core.js

@@ -41,7 +41,7 @@ export default class Core {
     // for debugging
     global.UppyState = this.state
 
-    this.state.book = 'Harry Potter'
+    // this.state.book = 'Harry Potter'
     // global.UppyDefaultState = this.defaultState
   }
 

src/plugins/GoogleDrive.js

@@ -14,6 +14,11 @@ export default class Google extends Plugin {
       </svg>
     `
 
+    this.getFile = this.getFile.bind(this)
+    this.getFolder = this.getFolder.bind(this)
+    this.logout = this.logout.bind(this)
+    this.renderBrowser = this.renderBrowser.bind(this)
+
     // set default options
     const defaultOptions = {}
 
@@ -71,23 +76,19 @@ export default class Google extends Plugin {
     .catch((err) => err)
   }
 
-  getFolder (folderId = this.core.state.googleDrive.folder) {
-    return fetch(`${this.opts.host}/google/list`, {
+  getFolder (id = this.core.state.googleDrive.directory) {
+    return fetch(`${this.opts.host}/google/list?dir=${id}`, {
       method: 'get',
       credentials: 'include',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
-      },
-      body: {
-        dir: folderId || undefined
       }
     })
     .then((res) => {
       if (res.status >= 200 && res.status <= 300) {
         return res.json().then((data) => {
           // let result = Utils.groupBy(data.items, (item) => item.mimeType)
-
           let folders = []
           let files = []
           data.items.forEach((item) => {
@@ -113,20 +114,25 @@ export default class Google extends Plugin {
     })
   }
 
+  getSubFolder (id) {
+    this.getFolder(id)
+      .then((newState) => {
+        console.log(newState)
+        this.updateState(newState)
+      })
+  }
+
   getFile (fileId) {
     if (typeof fileId !== 'string') {
       return new Error('getFile: File ID is not a string.')
     }
 
-    return fetch(`${this.opts.host}/google/get`, {
-      method: 'post',
+    return fetch(`${this.opts.host}/google/get?fileId=${fileId}`, {
+      method: 'get',
       credentials: 'include',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
-      },
-      body: {
-        fileId
       }
     })
     .then((res) => {
@@ -161,14 +167,28 @@ export default class Google extends Plugin {
     /**
      * Leave this here
      */
-    // fetch(`${this.opts.host}/google/logout`, {
-    //   method: 'get',
-    //   credentials: 'include',
-    //   headers: {
-    //     'Accept': 'application/json',
-    //     'Content-Type': 'application/json'
-    //   }
-    // }).then(res => console.log(res))
+    fetch(`${this.opts.host}/google/logout?redirect=${location.href}`, {
+      method: 'get',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.ok) {
+          console.log('ok')
+          const newState = {
+            authenticated: false,
+            files: [],
+            folders: [],
+            directory: 'root'
+          }
+
+          this.updateState(newState)
+        }
+      })
   }
 
   update (state) {
@@ -177,6 +197,16 @@ export default class Google extends Plugin {
     }
     const newEl = this.render(state)
     yo.update(this.el, newEl)
+
+    // setTimeout(() => {
+    //   const folders = Utils.qsa('.GoogleDriveFolder')
+    //   const files = Utils.qsa('.GoogleDriveFile')
+    //   console.log(folders)
+    //   console.log(files)
+
+    //   folders.forEach((folder) => folder.addEventListener('click', (e) => this.getFolder(folder.dataset.id)))
+    //   files.forEach((file) => file.addEventListener('click', (e) => this.getFile(file.dataset.id)))
+    // }, 5000)
   }
 
   updateState (newState) {
@@ -195,7 +225,7 @@ export default class Google extends Plugin {
   }
 
   renderAuth () {
-    const link = this.opts.host ? `${this.opts.host}/connect/google` : '#'
+    const link = `${this.opts.host}/connect/google?state=${location.href}`
     return yo`
       <div>
         <h1>Authenticate With Google Drive</h1>
@@ -205,11 +235,12 @@ export default class Google extends Plugin {
   }
 
   renderBrowser (state) {
-    const folders = state.folders.map((folder) => yo`<li>Folder<button class="GoogleDriveFolder" data-id="${folder.id}" data-title="${folder.title}">${folder.title}</button></li>`)
-    const files = state.files.map((file) => yo`<li><button class="GoogleDriveFile" data-id="${file.id}" data-title="${file.title}">${file.title}</button></li>`)
+    const folders = state.folders.map((folder) => yo`<li>Folder<button class="GoogleDriveFolder" data-id="${folder.id}" data-title="${folder.title}" onclick=${this.getSubFolder.bind(this, folder.id)}>${folder.title}</button></li>`)
+    const files = state.files.map((file) => yo`<li><button class="GoogleDriveFile" data-id="${file.id}" data-title="${file.title}" onclick=${this.getFile.bind(this, file.id)}>${file.title}</button></li>`)
 
     return yo`
       <div>
+        <button onclick=${this.logout}/>Logout</button>
         <ul>${folders}</ul>
         <ul>${files}</ul>
       </div>

src/plugins/Modal.js

@@ -63,8 +63,12 @@ export default class Modal extends Plugin {
     }
 
     const modal = this.core.getState().modal
-    modal.targets.push(target)
-    this.core.setState({modal: modal})
+
+    this.core.setState({
+      modal: Object.assign({}, modal, {
+        targets: modal.targets.concat([target])
+      })
+    })
 
     return this.opts.target
   }
@@ -73,17 +77,23 @@ export default class Modal extends Plugin {
     const modal = this.core.getState().modal
 
     // hide all panels, except the one that matches current id
-    modal.targets.forEach((target) => {
+    const newTargets = modal.targets.map((target) => {
       if (target.type === 'acquirer') {
         if (target.id === id) {
-          target.isHidden = false
-          return
+          return Object.assign({}, target, {
+            isHidden: false
+          })
         }
-        target.isHidden = true
+        return Object.assign({}, target, {
+          isHidden: true
+        })
       }
+      return target
     })
 
-    this.core.setState({modal: modal})
+    this.core.setState({modal: Object.assign({}, modal, {
+      targets: newTargets
+    })})
   }
 
   hideModal () {
@@ -93,25 +103,37 @@ export default class Modal extends Plugin {
 
     // The “right way”
     const modal = this.core.getState().modal
-    modal.isHidden = true
-    this.core.setState({modal: modal})
+    this.core.setState({
+      modal: Object.assign({}, modal, {
+        isHidden: true
+      })
+    })
 
     document.body.classList.remove('is-UppyModal-open')
   }
 
   showModal () {
     const modal = this.core.getState().modal
-    modal.isHidden = false
 
     // Show first acquirer plugin when modal is open
-    modal.targets.some((target) => {
-      if (target.type === 'acquirer') {
-        target.isHidden = false
-        return true
+    let found = false
+    const newTargets = modal.targets.map((target) => {
+      if (target.type === 'acquirer' && !found) {
+        found = true
+
+        return Object.assign({}, target, {
+          isHidden: false
+        })
       }
+      return target
     })
 
-    this.core.setState({modal: modal})
+    this.core.setState({
+      modal: Object.assign({}, modal, {
+        isHidden: false,
+        targets: newTargets
+      })
+    })
 
     document.body.classList.add('is-UppyModal-open')
   }

test/unit/GoogleDrive.spec.js

@@ -3,72 +3,87 @@ import nock from 'nock'
 import Utils from '../../src/core/Utils'
 import Google from '../../src/plugins/GoogleDrive'
 
-test('checkAuthentication success', function (t) {
-  t.plan(1)
+var defaultCore = {
+  state: {
+    googleDrive: {
+      authenticated: false,
+      files: [],
+      folders: [],
+      directory: 'root'
+    }
+  }
+}
 
+test('checkAuthentication success', function (t) {
   nock('http://localhost:3020')
     .get('/google/authorize')
     .reply(200, {
       isAuthenticated: true
     })
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
+
   GoogleDrive.checkAuthentication()
     .then((isAuthed) => {
       t.equal(isAuthed, true)
+      t.end()
     })
 })
 
 test('checkAuthentication fail', function (t) {
-  t.plan(1)
-
   nock('http://localhost:3020')
     .get('/google/authorize')
     .reply(200, {
       isAuthenticated: false
     })
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
+
   GoogleDrive.checkAuthentication()
     .then((isAuthed) => {
       t.equal(isAuthed, false)
+      t.end()
     })
 })
 
 test('getFile: success', function (t) {
-  t.plan(1)
-
   nock('http://localhost:3020')
-    .post('/google/get')
-    .reply(201, (uri, requestBody) => {
-      return {
-        ok: true,
-        id: '12345'
-      }
+    .get('/google/get?fileId=12345')
+    .reply(201, {
+      ok: true,
+      id: '12345'
     })
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
 
   GoogleDrive.getFile('12345')
     .then((result) => {
       t.equal(result.ok, true)
+      t.end()
     })
 })
 
 test('getFile: fileId not a string', function (t) {
-  t.plan(1)
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
   var result = GoogleDrive.getFile()
 
   t.equal(result instanceof Error, true)
+
+  t.end()
 })
 
 test('getFolder: success', function (t) {
-  t.plan(1)
-
   nock('http://localhost:3020')
-  .get('/google/list')
+  .get('/google/list?dir=root')
   .reply(200, {
     items: [{
       mimeType: 'application/vnd.google-apps.folder'
@@ -81,8 +96,11 @@ test('getFolder: success', function (t) {
     }]
   })
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
-  GoogleDrive.getFolder('/')
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
+
+  GoogleDrive.getFolder('root')
     .then((res) => {
       const allFolders = Utils.every(res.folders, function (folder) {
         return folder.mimeType === 'application/vnd.google-apps.folder'
@@ -93,19 +111,22 @@ test('getFolder: success', function (t) {
       })
 
       t.equal(allFolders && allFiles, true)
+      t.end()
     })
 })
 
 test('getFolder: fail', function (t) {
-  t.plan(1)
-
   nock('http://localhost:3020')
   .get('/google/list')
   .reply(500, 'Not authenticated')
 
-  var GoogleDrive = new Google(null, {host: 'http://localhost:3020'})
+  var core = Object.assign({}, defaultCore)
+
+  var GoogleDrive = new Google(core, {host: 'http://localhost:3020'})
+
   GoogleDrive.getFolder('/')
     .then((err) => {
       t.equal(err instanceof Error, true)
+      t.end()
     })
 })

website/src/examples/drive/app.es6

@@ -2,7 +2,6 @@ import Uppy from 'uppy/core'
 import { GoogleDrive } from 'uppy/plugins'
 // import ProgressDrawer from '../../../../src/plugins/ProgressDrawer.js'
 import { UPPY_SERVER } from '../env'
-console.log(UPPY_SERVER)
 
 const uppy = new Uppy({debug: true, autoProceed: false})
 uppy