Browse Source

Show “loading” when checking auth too

addresses this comment
https://github.com/transloadit/uppy/pull/265#issuecomment-317403651
@goto-bus-stop
Artur Paikin 7 years ago
parent
commit
a6b28e5737
2 changed files with 24 additions and 10 deletions
  1. 11 5
      src/generic-provider-views/AuthView.js
  2. 13 5
      src/generic-provider-views/index.js

+ 11 - 5
src/generic-provider-views/AuthView.js

@@ -1,15 +1,21 @@
 const html = require('yo-yo')
 const html = require('yo-yo')
 const onload = require('on-load')
 const onload = require('on-load')
+const LoaderView = require('./Loader')
 
 
 module.exports = (props) => {
 module.exports = (props) => {
   const demoLink = props.demo ? html`<button class="UppyProvider-authBtnDemo" onclick=${props.handleDemoAuth}>Proceed with Demo Account</button>` : null
   const demoLink = props.demo ? html`<button class="UppyProvider-authBtnDemo" onclick=${props.handleDemoAuth}>Proceed with Demo Account</button>` : null
-  return onload(html`
+  const AuthBlock = () => html`
     <div class="UppyProvider-auth">
     <div class="UppyProvider-auth">
-      <h1 class="UppyProvider-authTitle">
-        Please authenticate with <span class="UppyProvider-authTitleName">${props.pluginName}</span><br> to select files
-      </h1>
+      <h1 class="UppyProvider-authTitle">Please authenticate with <span class="UppyProvider-authTitleName">${props.pluginName}</span><br> to select files</h1>
       <button type="button" class="UppyProvider-authBtn" onclick=${props.handleAuth}>Authenticate</button>
       <button type="button" class="UppyProvider-authBtn" onclick=${props.handleAuth}>Authenticate</button>
       ${demoLink}
       ${demoLink}
     </div>
     </div>
-  `, props.checkAuth, null, `auth${props.pluginName}`)
+  `
+  return onload(html`
+    <div style="height: 100%;">
+      ${props.checkAuthInProgress
+        ? LoaderView()
+        : AuthBlock()
+      }
+    </div>`, props.checkAuth, null, `auth${props.pluginName}`)
 }
 }

+ 13 - 5
src/generic-provider-views/index.js

@@ -96,9 +96,16 @@ module.exports = class View {
   }
   }
 
 
   checkAuth () {
   checkAuth () {
+    this.updateState({ checkAuthInProgress: true })
     this.Provider.checkAuth()
     this.Provider.checkAuth()
-      .then(this.plugin.onAuth)
-      .catch(this.handleError)
+      .then((authenticated) => {
+        this.updateState({ checkAuthInProgress: false })
+        this.plugin.onAuth(authenticated)
+      })
+      .catch((err) => {
+        this.updateState({ checkAuthInProgress: false })
+        this.handleError(err)
+      })
   }
   }
 
 
   /**
   /**
@@ -163,7 +170,7 @@ module.exports = class View {
         tagFile.preview = this.plugin.getItemThumbnailUrl(file)
         tagFile.preview = this.plugin.getItemThumbnailUrl(file)
       }
       }
       this.plugin.core.log('Adding remote file')
       this.plugin.core.log('Adding remote file')
-      this.plugin.core.emitter.emit('core:file-add', tagFile)
+      this.plugin.core.addFile(tagFile)
     })
     })
   }
   }
 
 
@@ -346,7 +353,7 @@ module.exports = class View {
   }
   }
 
 
   render (state) {
   render (state) {
-    const { authenticated, loading } = state[this.plugin.stateId]
+    const { authenticated, checkAuthInProgress, loading } = state[this.plugin.stateId]
 
 
     if (loading) {
     if (loading) {
       return LoaderView()
       return LoaderView()
@@ -358,7 +365,8 @@ module.exports = class View {
         demo: this.plugin.opts.demo,
         demo: this.plugin.opts.demo,
         checkAuth: this.checkAuth,
         checkAuth: this.checkAuth,
         handleAuth: this.handleAuth,
         handleAuth: this.handleAuth,
-        handleDemoAuth: this.handleDemoAuth
+        handleDemoAuth: this.handleDemoAuth,
+        checkAuthInProgress: checkAuthInProgress
       })
       })
     }
     }