Working on file listing.

src/plugins/GoogleDrive.js

@@ -21,7 +21,9 @@ export default class Drive extends Plugin {
       target.innerHTML = this.renderAuthentication()
     } else {
       this.getDirectory()
-      .then(this.render)
+      .then(data => {
+        target.innerHTML = this.render(data)
+      })
     }
   }
 
@@ -56,7 +58,7 @@ export default class Drive extends Plugin {
   }
 
   getDirectory () {
-    fetch('http://localhost:3002/drive/get', {
+    return fetch('http://localhost:3002/drive/list', {
       method: 'get',
       credentials: 'include',
       headers: {
@@ -82,46 +84,47 @@ export default class Drive extends Plugin {
   }
 
   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)
-    }
-
-    // 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()
-        })
-      }
-    })
+    // // 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)
+    // }
+
+    // // 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)
   }
 }