Aw yiss. Mothafn breadcrumbs.

This commit is contained in:
Harry Hedger 2016-04-20 15:41:31 -04:00
parent 0a642a2a24
commit df1abea11d

View file

@ -30,22 +30,15 @@ export default class Google extends Plugin {
}
update (state) {
if (typeof this.core.getState().googleDrive !== 'undefined') {
console.log(this.core.getState().googleDrive.directory)
}
if (typeof this.el === 'undefined') {
return
}
const newEl = this.render(this.core.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) {
@ -56,6 +49,7 @@ export default class Google extends Plugin {
}
focus () {
console.log('GoogleDrive: focus')
this.checkAuthentication()
.then((res) => {
if (!this.isAuthenticated) {
@ -91,7 +85,7 @@ export default class Google extends Plugin {
.catch((err) => err)
}
getFolder (id = this.core.state.googleDrive.directory) {
getFolder (id = 'root') {
return fetch(`${this.opts.host}/google/list?dir=${id}`, {
method: 'get',
credentials: 'include',
@ -129,11 +123,24 @@ export default class Google extends Plugin {
})
}
getSubFolder (id) {
getSubFolder (id, title) {
this.getFolder(id)
.then((newState) => {
console.log(newState)
this.updateState(newState)
.then((data) => {
const state = this.core.getState().googleDrive
console.log(id)
const index = state.directory.findIndex((dir) => id === dir.id)
let directory
if (index !== -1) {
directory = state.directory.slice(0, index + 1)
} else {
directory = state.directory.concat([{
id,
title
}])
}
this.updateState(Utils.extend(data, {directory}))
})
}
@ -177,7 +184,10 @@ export default class Google extends Plugin {
authenticated: false,
files: [],
folders: [],
directory: 'root'
directory: {
title: 'My Drive',
id: 'root'
}
}
this.updateState(newState)
@ -196,12 +206,14 @@ 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}" 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>`)
const breadcrumbs = state.directory.map((dir) => yo`<span><button onclick=${this.getSubFolder.bind(this, dir.id, dir.title)}>${dir.title}</button> +</span> `)
const folders = state.folders.map((folder) => yo`<li>Folder<button class="GoogleDriveFolder" onclick=${this.getSubFolder.bind(this, folder.id, folder.title)}>${folder.title}</button></li>`)
const files = state.files.map((file) => yo`<li><button class="GoogleDriveFile" onclick=${this.getFile.bind(this, file.id)}>${file.title}</button></li>`)
return yo`
<div>
<button onclick=${this.logout}/>Logout</button>
<div>${breadcrumbs}</div>
<ul>${folders}</ul>
<ul>${files}</ul>
</div>
@ -212,26 +224,19 @@ export default class Google extends Plugin {
return `Something went wrong. Probably our fault. ${err}`
}
renderFolder (folder = this.currentFolder) {
this.getFolder(folder)
.then((data) => {
this.target.innerHTML = this.renderBrowser(data)
const folders = Utils.qsa('.GoogleDriveFolder')
const files = Utils.qsa('.GoogleDriveFile')
folders.forEach((folder) => folder.addEventListener('click', (e) => this.renderFolder(folder.dataset.id)))
files.forEach((file) => file.addEventListener('click', (e) => this.getFile(file.dataset.id)))
})
}
install () {
// Set default state for Google Drive
this.core.setState({googleDrive: {
authenticated: false,
files: [],
folders: [],
directory: 'root'
}})
this.core.setState({
googleDrive: {
authenticated: false,
files: [],
folders: [],
directory: [{
title: 'My Drive',
id: 'root'
}]
}
})
this.el = this.render(this.core.state)
this.target = this.getTarget(this.opts.target, this, this.el, this.render.bind(this))
@ -241,7 +246,7 @@ export default class Google extends Plugin {
this.updateState({authenticated})
if (authenticated) {
return this.getFolder()
return this.getFolder(this.core.getState().googleDrive.directory.id)
}
return authenticated