feat: init sequence, conditional reload hint

src/components/SettingsBar.tsx

@@ -112,7 +112,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
         throw new Error(`Cannot resolve token response: '${JSON.stringify(res)}'`)
       }
       window.history.pushState({}, 'removed code', window.location.pathname.replace(/#.*$/, ''))
-      this.setState({ accessToken }, () => this.saveToken())
+      this.setState({ accessToken }, () => this.saveToken(''))
     }
   }
 
@@ -131,7 +131,16 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
     }
   }
 
-  saveToken = async () => {
+  saveToken = async (
+    hint: State['accessTokenHint'] = (
+      <span>
+        <a href="#" onClick={() => window.location.reload()}>
+          Reload
+        </a>{' '}
+        to activate!
+      </span>
+    ),
+  ) => {
     const { onAccessTokenChange } = this.props
     const { accessToken } = this.state
     if (accessToken) {
@@ -139,14 +148,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
       onAccessTokenChange(accessToken)
       this.setState({
         accessToken: '',
-        accessTokenHint: (
-          <span>
-            <a href="#" onClick={() => window.location.reload()}>
-              Reload
-            </a>{' '}
-            to activate!
-          </span>
-        ),
+        accessTokenHint: hint,
       })
     }
   }
@@ -222,18 +224,21 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
             <div className={'gitako-settings-bar-content'}>
               <div className={'shadow-shelter'} />
               <div className={'gitako-settings-bar-content-section access-token'}>
-                <h4>Access Token</h4>
-                <a
-                  href={`https://github.com/login/oauth/authorize?client_id=${
-                    oauth.clientId
-                  }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`}
-                >
-                  Create token
-                </a>
-                <a href={wikiLinks.createAccessToken} target="_blank">
-                  Why & how to create it?
-                </a>
-                <br />
+                <h4>
+                  Access Token
+                  <a href={wikiLinks.createAccessToken} target="_blank">
+                    &nbsp;(?)
+                  </a>
+                </h4>
+                {!hasAccessToken && (
+                  <a
+                    href={`https://github.com/login/oauth/authorize?client_id=${
+                      oauth.clientId
+                    }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`}
+                  >
+                    Create with OAuth
+                  </a>
+                )}
                 <div className={'access-token-input-control'}>
                   <input
                     className={'access-token-input form-control'}

src/driver/connect.ts

@@ -123,3 +123,9 @@ export default function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>)
     }
   }
 }
+
+export function promisifyGetState<Props, State>(
+  get: PreDispatch<Props, State>,
+): () => Promise<State> {
+  return () => new Promise(resolve => get(state => resolve(state)))
+}

src/driver/core/SideBar.ts

@@ -11,7 +11,7 @@ import GitHubHelper, {
 import configHelper from 'utils/configHelper'
 import URLHelper from 'utils/URLHelper'
 import keyHelper from 'utils/keyHelper'
-import { MethodCreator } from 'driver/connect'
+import { MethodCreator, promisifyGetState } from 'driver/connect'
 import { Props } from 'components/SideBar'
 import SettingsBar from 'components/SettingsBar'
 
@@ -40,6 +40,7 @@ export type ConnectorState = {
   copySnippetButton: boolean
   logoContainerElement: Element | null
   disabled: boolean
+  initializingPromise: Promise<void> | null
 
   init: () => void
   onPJAXEnd: () => void
@@ -55,12 +56,24 @@ export type ConnectorState = {
 }
 
 const init: MethodCreator<Props, ConnectorState> = dispatch => async () => {
+  const { initializingPromise } = await promisifyGetState(dispatch.get)()
+  if (initializingPromise) await initializingPromise
+
+  let done: any = null // cannot use type `(() => void) | null` here
+  dispatch.set({
+    initializingPromise: new Promise(resolve => {
+      done = () => resolve()
+    }),
+  })
+
   try {
     if (!URLHelper.isInRepoPage()) {
       dispatch.set({ disabled: true })
       return
     }
     dispatch.set({
+      errorDueToAuth: false,
+      showSettings: false,
       logoContainerElement: DOMHelper.insertLogoMountPoint(),
     })
     let detectedBranchName
@@ -139,6 +152,8 @@ const init: MethodCreator<Props, ConnectorState> = dispatch => async () => {
     DOMHelper.markGitakoReadyState()
   } catch (err) {
     dispatch.call(handleError, err)
+  } finally {
+    if (done) done()
   }
 }
 
@@ -219,7 +234,13 @@ const onAccessTokenChange: MethodCreator<
   Props,
   ConnectorState,
   [ConnectorState['accessToken']]
-> = dispatch => accessToken => dispatch.set({ accessToken })
+> = dispatch => accessToken => {
+  dispatch.set({ accessToken })
+  // reload when setting new accessToken
+  if (accessToken) {
+    dispatch.call(init)
+  }
+}
 
 const onShortcutChange: MethodCreator<
   Props,