It looks ugly, but files and folders are displaying.

src/plugins/GoogleDrive.js

@@ -11,7 +11,7 @@ export default class Drive extends Plugin {
     this.renderAuthentication = this.renderAuthentication.bind(this)
     this.checkAuthentication = this.checkAuthentication.bind(this)
     this.files = []
-    this.currentDir = '/'
+    this.currentDir = 'root'
 
     this.checkAuthentication()
   }
@@ -54,10 +54,20 @@ export default class Drive extends Plugin {
   }
 
   addFile () {
-
   }
 
   getDirectory () {
+    /**
+     * Leave this here
+     */
+    // fetch('http://localhost:3002/drive/logout', {
+    //   method: 'get',
+    //   credentials: 'include',
+    //   headers: {
+    //     'Accept': 'application/json',
+    //     'Content-Type': 'application/json'
+    //   }
+    // }).then(res => console.log(res))
     return fetch('http://localhost:3002/drive/list', {
       method: 'get',
       credentials: 'include',
@@ -69,7 +79,20 @@ export default class Drive extends Plugin {
     .then(res => {
       if (res.status >= 200 && res.status <= 300) {
         return res.json().then(data => {
-          console.log(data)
+          let folders = []
+          let files = []
+          data.items.forEach(item => {
+            if (item.mimeType === 'application/vnd.google-apps.folder') {
+              folders.push(item)
+            } else {
+              files.push(item)
+            }
+          })
+
+          return {
+            folders,
+            files
+          }
         })
       }
     })
@@ -83,48 +106,10 @@ export default class Drive extends Plugin {
     return `<div><h1>Authenticate With Google Drive</h1><a href=${ this.authUrl || '#' }>Authenticate</a></div>`
   }
 
-  render (files) {
-    // // for each file in the directory, create a list item element
-    // const elems = files.map((file, i) => {
-    //   const icon = (file.isFolder) ? 'folder' : 'file'
-    //   return `<li data-type="${icon}" data-name="${file.name}"><span>${icon}: </span><span> ${file.name}</span></li>`
-    // })
-
-    // // appends the list items to the target
-    // this._target.innerHTML = elems.sort().join('')
-
-    // if (this.currentDir.length > 1) {
-    //   const parent = document.createElement('LI')
-    //   parent.setAttribute('data-type', 'parent')
-    //   parent.innerHTML = '<span>...</span>'
-    //   this._target.appendChild(parent)
-    // }
+  render (data) {
+    const folders = data.folders.map(folder => `<li>Folder${folder.title}</li>`)
+    const files = data.files.map(file => `<li>${file.title}</li>`)
 
-    // // add an onClick to each list item
-    // const fileElems = this._target.querySelectorAll('li')
-
-    // Array.prototype.forEach.call(fileElems, element => {
-    //   const type = element.getAttribute('data-type')
-
-    //   if (type === 'file') {
-    //     element.addEventListener('click', () => {
-    //       this.files.push(element.getAttribute('data-name'))
-    //       console.log(`files: ${this.files}`)
-    //     })
-    //   } else {
-    //     element.addEventListener('dblclick', () => {
-    //       const length = this.currentDir.split('/').length
-
-    //       if (type === 'folder') {
-    //         this.currentDir = `${this.currentDir}${element.getAttribute('data-name')}/`
-    //       } else if (type === 'parent') {
-    //         this.currentDir = `${this.currentDir.split('/').slice(0, length - 2).join('/')}/`
-    //       }
-    //       console.log(this.currentDir)
-    //       this.getDirectory()
-    //     })
-    //   }
-    // })
-    console.log(files)
+    return `<ul>${folders}</ul><ul>${files}</ul>`
   }
 }