Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-26 11:44:53 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #436 from transloadit/chore/provider-use-getPluginState

Browse source 
Use setPluginState and getPluginState in Providers
This commit is contained in:
Artur Paikin 2017-11-27 22:03:58 -05:00 • committed by GitHub
commit fc64b44e51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/generic-provider-views/index.js
View file

@ -82,16 +82,6 @@ module.exports = class View {
this.plugin.core.off('core:file-removed', this.updateFolderState)
}
/**
* Little shorthand to update the state with the plugin's state
*/
updateState (newState) {
let stateId = this.plugin.stateId
const {state} = this.plugin.core
this.plugin.core.setState({[stateId]: Object.assign({}, state[stateId], newState)})
}
_updateFilesAndFolders (res, files, folders) {
this.plugin.getItemSubList(res).forEach((item) => {
if (this.plugin.isFolder(item)) {
@ -101,18 +91,18 @@ module.exports = class View {
}
})
this.updateState({ folders, files })
this.plugin.setPluginState({ folders, files })
}
checkAuth () {
this.updateState({ checkAuthInProgress: true })
this.plugin.setPluginState({ checkAuthInProgress: true })
this.Provider.checkAuth()
.then((authenticated) => {
this.updateState({ checkAuthInProgress: false })
this.plugin.setPluginState({ checkAuthInProgress: false })
this.plugin.onAuth(authenticated)
})
.catch((err) => {
this.updateState({ checkAuthInProgress: false })
this.plugin.setPluginState({ checkAuthInProgress: false })
this.handleError(err)
})
}
@ -130,7 +120,7 @@ module.exports = class View {
let files = []
let updatedDirectories
const state = this.plugin.core.getState()[this.plugin.stateId]
const state = this.plugin.getPluginState()
const index = state.directories.findIndex((dir) => id === dir.id)
if (index !== -1) {
@ -140,7 +130,7 @@ module.exports = class View {
}
this._updateFilesAndFolders(res, files, folders)
this.updateState({ directories: updatedDirectories })
this.plugin.setPluginState({ directories: updatedDirectories })
},
this.handleError)
}
@ -201,23 +191,23 @@ module.exports = class View {
folders: [],
directories: []
}
this.updateState(newState)
this.plugin.setPluginState(newState)
}
}).catch(this.handleError)
}
filterQuery (e) {
const state = this.plugin.core.getState()[this.plugin.stateId]
this.updateState(Object.assign({}, state, {
const state = this.plugin.getPluginState()
this.plugin.setPluginState(Object.assign({}, state, {
filterInput: e.target.value
}))
}
toggleSearch () {
const state = this.plugin.core.getState()[this.plugin.stateId]
const state = this.plugin.getPluginState()
const searchInputEl = document.querySelector('.Browser-searchInput')
this.updateState(Object.assign({}, state, {
this.plugin.setPluginState(Object.assign({}, state, {
isSearchVisible: !state.isSearchVisible,
filterInput: ''
}))
@ -229,14 +219,14 @@ module.exports = class View {
}
filterItems (items) {
const state = this.plugin.core.getState()[this.plugin.stateId]
const state = this.plugin.getPluginState()
return items.filter((folder) => {
return this.plugin.getItemName(folder).toLowerCase().indexOf(state.filterInput.toLowerCase()) !== -1
})
}
sortByTitle () {
const state = Object.assign({}, this.plugin.core.getState()[this.plugin.stateId])
const state = Object.assign({}, this.plugin.getPluginState())
const {files, folders, sorting} = state
let sortedFiles = files.sort((fileA, fileB) => {
@ -253,7 +243,7 @@ module.exports = class View {
return this.plugin.getItemName(folderA).localeCompare(this.plugin.getItemName(folderB))
})
this.updateState(Object.assign({}, state, {
this.plugin.setPluginState(Object.assign({}, state, {
files: sortedFiles,
folders: sortedFolders,
sorting: (sorting === 'titleDescending') ? 'titleAscending' : 'titleDescending'
@ -261,7 +251,7 @@ module.exports = class View {
}
sortByDate () {
const state = Object.assign({}, this.plugin.core.getState()[this.plugin.stateId])
const state = Object.assign({}, this.plugin.getPluginState())
const {files, folders, sorting} = state
let sortedFiles = files.sort((fileA, fileB) => {
@ -285,7 +275,7 @@ module.exports = class View {
return a > b ? 1 : a < b ? -1 : 0
})
this.updateState(Object.assign({}, state, {
this.plugin.setPluginState(Object.assign({}, state, {
files: sortedFiles,
folders: sortedFolders,
sorting: (sorting === 'dateDescending') ? 'dateAscending' : 'dateDescending'
@ -293,7 +283,7 @@ module.exports = class View {
}
sortBySize () {
const state = Object.assign({}, this.plugin.core.getState()[this.plugin.stateId])
const state = Object.assign({}, this.plugin.getPluginState())
const {files, sorting} = state
// check that plugin supports file sizes
@ -311,20 +301,20 @@ module.exports = class View {
return a > b ? 1 : a < b ? -1 : 0
})
this.updateState(Object.assign({}, state, {
this.plugin.setPluginState(Object.assign({}, state, {
files: sortedFiles,
sorting: (sorting === 'sizeDescending') ? 'sizeAscending' : 'sizeDescending'
}))
}
isActiveRow (file) {
return this.plugin.core.getState()[this.plugin.stateId].activeRow === this.plugin.getItemId(file)
return this.plugin.getPluginState().activeRow === this.plugin.getItemId(file)
}
isChecked (item) {
const itemId = this.providerFileToId(item)
if (this.plugin.isFolder(item)) {
const state = this.plugin.core.getState()[this.plugin.stateId]
const state = this.plugin.getPluginState()
const folders = state.selectedFolders || {}
if (itemId in folders) {
return folders[itemId]
@ -342,13 +332,13 @@ module.exports = class View {
*/
addFolder (folder) {
const folderId = this.providerFileToId(folder)
let state = this.plugin.core.getState()[this.plugin.stateId]
let state = this.plugin.getPluginState()
let folders = state.selectedFolders || {}
if (folderId in folders && folders[folderId].loading) {
return
}
folders[folderId] = {loading: true, files: []}
this.updateState({selectedFolders: folders})
this.plugin.setPluginState({selectedFolders: folders})
this.Provider.list(this.plugin.getItemRequestPath(folder)).then((res) => {
let files = []
this.plugin.getItemSubList(res).forEach((item) => {
@ -357,9 +347,9 @@ module.exports = class View {
files.push(this.providerFileToId(item))
}
})
state = this.plugin.core.getState()[this.plugin.stateId]
state = this.plugin.getPluginState()
state.selectedFolders[folderId] = {loading: false, files: files}
this.updateState({selectedFolders: folders})
this.plugin.setPluginState({selectedFolders: folders})
const dashboard = this.plugin.core.getPlugin('Dashboard')
let message
if (files.length) {
@ -371,15 +361,15 @@ module.exports = class View {
}
this.plugin.core.info(message)
}).catch((e) => {
state = this.plugin.core.getState()[this.plugin.stateId]
state = this.plugin.getPluginState()
delete state.selectedFolders[folderId]
this.updateState({selectedFolders: state.selectedFolders})
this.plugin.setPluginState({selectedFolders: state.selectedFolders})
this.handleError(e)
})
}
removeFolder (folderId) {
let state = this.plugin.core.getState()[this.plugin.stateId]
let state = this.plugin.getPluginState()
let folders = state.selectedFolders || {}
if (!(folderId in folders)) {
return
@ -394,7 +384,7 @@ module.exports = class View {
}
}
delete folders[folderId]
this.updateState({selectedFolders: folders})
this.plugin.setPluginState({selectedFolders: folders})
}
/**
@ -405,7 +395,7 @@ module.exports = class View {
* it's already been done in removeFolder method.
*/
updateFolderState (fileId) {
let state = this.plugin.core.getState()[this.plugin.stateId]
let state = this.plugin.getPluginState()
let folders = state.selectedFolders || {}
for (let folderId in folders) {
let folder = folders[folderId]
@ -420,7 +410,7 @@ module.exports = class View {
delete folders[folderId]
}
}
this.updateState({selectedFolders: folders})
this.plugin.setPluginState({selectedFolders: folders})
}
/**
@ -434,7 +424,7 @@ module.exports = class View {
toggleCheckbox (e, file) {
e.stopPropagation()
e.preventDefault()
let {folders, files, filterInput} = this.plugin.core.getState()[this.plugin.stateId]
let { folders, files, filterInput } = this.plugin.getPluginState()
let items = folders.concat(files)
if (filterInput !== '') {
items = this.filterItems(items)
@ -481,8 +471,8 @@ module.exports = class View {
}
handleDemoAuth () {
const state = this.plugin.core.getState()[this.plugin.stateId]
this.updateState({}, state, {
const state = this.plugin.getPluginState()
this.plugin.setPluginState({}, state, {
authenticated: true
})
}
@ -532,7 +522,7 @@ module.exports = class View {
if (scrollPos < 50 && path && !this._isHandlingScroll) {
this.Provider.list(path)
.then((res) => {
const { files, folders } = this.plugin.core.getState()[this.plugin.stateId]
const { files, folders } = this.plugin.getPluginState()
this._updateFilesAndFolders(res, files, folders)
}).catch(this.handleError)
.then(() => { this._isHandlingScroll = false }) // always called
@ -545,12 +535,12 @@ module.exports = class View {
_loaderWrapper (promise, then, catch_) {
promise
.then(then).catch(catch_)
.then(() => this.updateState({ loading: false })) // always called.
this.updateState({ loading: true })
.then(() => this.plugin.setPluginState({ loading: false })) // always called.
this.plugin.setPluginState({ loading: true })
}
render (state) {
const { authenticated, checkAuthInProgress, loading } = state[this.plugin.stateId]
const { authenticated, checkAuthInProgress, loading } = this.plugin.getPluginState()
if (loading) {
return LoaderView()
@ -567,7 +557,7 @@ module.exports = class View {
})
}
const browserProps = Object.assign({}, state[this.plugin.stateId], {
const browserProps = Object.assign({}, this.plugin.getPluginState(), {
getNextFolder: this.getNextFolder,
getFolder: this.getFolder,
addFile: this.addFile,

4
src/plugins/DragDrop/index.js
View file

@ -26,10 +26,6 @@ module.exports = class DragDrop extends Plugin {
strings: {
dropHereOr: 'Drop files here or',
browse: 'browse'
// selectedFiles: {
// 0: '%{smart_count} file selected',
// 1: '%{smart_count} files selected'
// }
}
}

27
src/plugins/Dropbox/index.js
View file

@ -12,7 +12,6 @@ module.exports = class Dropbox extends Plugin {
this.type = 'acquirer'
this.id = this.opts.id || 'Dropbox'
this.title = 'Dropbox'
this.stateId = 'dropbox'
this.icon = () => html`
<svg class="UppyIcon" width="128" height="118" viewBox="0 0 128 118">
<path d="M38.145.777L1.108 24.96l25.608 20.507 37.344-23.06z"/>
@ -23,7 +22,7 @@ module.exports = class Dropbox extends Plugin {
// writing out the key explicitly for readability the key used to store
// the provider instance must be equal to this.id.
this.Dropbox = new Provider(core, {
this[this.id] = new Provider(core, {
host: this.opts.host,
provider: 'dropbox'
})
@ -31,7 +30,7 @@ module.exports = class Dropbox extends Plugin {
this.files = []
this.onAuth = this.onAuth.bind(this)
// Visual
this.render = this.render.bind(this)
// set default options
@ -44,18 +43,14 @@ module.exports = class Dropbox extends Plugin {
install () {
this.view = new View(this)
// Set default state
this.core.setState({
// writing out the key explicitly for readability the key used to store
// the plugin state must be equal to this.stateId.
dropbox: {
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
}
this.setPluginState({
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
})
const target = this.opts.target
@ -70,7 +65,7 @@ module.exports = class Dropbox extends Plugin {
}
onAuth (authenticated) {
this.view.updateState({authenticated})
this.setPluginState({ authenticated })
if (authenticated) {
this.view.getFolder()
}

25
src/plugins/GoogleDrive/index.js
View file

@ -11,7 +11,6 @@ module.exports = class GoogleDrive extends Plugin {
this.type = 'acquirer'
this.id = this.opts.id || 'GoogleDrive'
this.title = 'Google Drive'
this.stateId = 'googleDrive'
this.icon = () => html`
<svg aria-hidden="true" class="UppyIcon UppyModalTab-icon" width="28" height="28" viewBox="0 0 16 16">
<path d="M2.955 14.93l2.667-4.62H16l-2.667 4.62H2.955zm2.378-4.62l-2.666 4.62L0 10.31l5.19-8.99 2.666 4.62-2.523 4.37zm10.523-.25h-5.333l-5.19-8.99h5.334l5.19 8.99z"/>
@ -20,7 +19,7 @@ module.exports = class GoogleDrive extends Plugin {
// writing out the key explicitly for readability the key used to store
// the provider instance must be equal to this.id.
this.GoogleDrive = new Provider(core, {
this[this.id] = new Provider(core, {
host: this.opts.host,
provider: 'drive',
authProvider: 'google'
@ -42,18 +41,14 @@ module.exports = class GoogleDrive extends Plugin {
install () {
this.view = new View(this)
// Set default state for Google Drive
this.core.setState({
// writing out the key explicitly for readability the key used to store
// the plugin state must be equal to this.stateId.
googleDrive: {
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
}
this.setPluginState({
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
})
const target = this.opts.target
@ -68,7 +63,7 @@ module.exports = class GoogleDrive extends Plugin {
}
onAuth (authenticated) {
this.view.updateState({authenticated})
this.setPluginState({ authenticated })
if (authenticated) {
this.view.getFolder('root')
}

31
src/plugins/Instagram/index.js
View file

@ -11,20 +11,17 @@ module.exports = class Instagram extends Plugin {
this.type = 'acquirer'
this.id = this.opts.id || 'Instagram'
this.title = 'Instagram'
this.stateId = 'instagram'
this.icon = () => html`
<svg aria-hidden="true" class="UppyIcon UppyModalTab-icon" width="28" height="28" viewBox="0 0 512 512">
<path
d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z"/>
<path
d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z"/>
<path d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z"/>
<path d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z"/>
<circle cx="390.476" cy="121.524" r="30.23"/>
</svg>
`
// writing out the key explicitly for readability the key used to store
// the provider instance must be equal to this.id.
this.Instagram = new Provider(core, {
this[this.id] = new Provider(core, {
host: this.opts.host,
provider: 'instagram',
authProvider: 'instagram'
@ -48,18 +45,14 @@ module.exports = class Instagram extends Plugin {
viewType: 'grid'
})
// Set default state for Google Drive
this.core.setState({
// writing out the key explicitly for readability the key used to store
// the plugin state must be equal to this.stateId.
instagram: {
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
}
this.setPluginState({
authenticated: false,
files: [],
folders: [],
directories: [],
activeRow: -1,
filterInput: '',
isSearchVisible: false
})
const target = this.opts.target
@ -74,7 +67,7 @@ module.exports = class Instagram extends Plugin {
}
onAuth (authenticated) {
this.view.updateState({authenticated})
this.setPluginState({ authenticated })
if (authenticated) {
this.view.getFolder('recent')
}