refactor: keep access token in state

src/components/SettingsBar.js

@@ -56,28 +56,29 @@ export default class SettingsBar extends React.PureComponent {
 
   onInputAccessToken = event => {
     const value = event.target.value
-    this.setState({ accessToken: value })
     this.setState({
+      accessToken: value,
       accessTokenHint: ACCESS_TOKEN_REGEXP.test(value) ? '' : 'This token is in unknown format.',
     })
   }
 
   saveToken = async () => {
-    const { onHasAccessTokenChange } = this.props
+    const { onAccessTokenChange } = this.props
     const { accessToken } = this.state
     if (accessToken) {
       await storageHelper.setAccessToken(accessToken)
-      onHasAccessTokenChange(true)
+      onAccessTokenChange(accessToken)
       this.setState({
+        accessToken: '',
         accessTokenHint: 'Your token is saved, will work after reloading the page!',
       })
     }
   }
 
   clearToken = async () => {
-    const { onHasAccessTokenChange } = this.props
+    const { onAccessTokenChange } = this.props
     await storageHelper.setAccessToken('')
-    onHasAccessTokenChange(false)
+    onAccessTokenChange('')
     this.setState({ accessToken: '' })
   }
 
@@ -101,9 +102,8 @@ export default class SettingsBar extends React.PureComponent {
   }
 
   render() {
-    const { accessTokenHint, accessToken, toggleShowSideBarShortcut, shortcutHint } = this.state
-    const { hasAccessToken } = this.props
-    const { toggleShowSettings, activated } = this.props
+    const { accessTokenHint, toggleShowSideBarShortcut, shortcutHint, accessToken } = this.state
+    const { toggleShowSettings, activated, accessToken: hasAccessToken } = this.props
     return (
       <div className={'gitako-settings-bar'}>
         {activated && (
@@ -138,12 +138,12 @@ export default class SettingsBar extends React.PureComponent {
                   value={accessToken}
                   onInput={this.onInputAccessToken}
                 />
-                {hasAccessToken ? (
+                {hasAccessToken && !accessToken ? (
                   <button className={'btn'} onClick={this.clearToken}>
                     Clear
                   </button>
                 ) : (
-                  <button className={'btn'} onClick={this.saveToken}>
+                  <button className={'btn'} onClick={this.saveToken} disabled={!accessToken}>
                     Save
                   </button>
                 )}

src/components/SideBar.js

@@ -24,8 +24,8 @@ export default class Gitako extends React.PureComponent {
     showSettings: PropTypes.bool,
     // whether failed loading the repo due to it is private
     errorDueToAuth: PropTypes.bool,
-    // got access token for GitHub
-    hasAccessToken: PropTypes.bool,
+    // access token for GitHub
+    accessToken: PropTypes.string,
     // the shortcut string for toggle sidebar
     toggleShowSideBarShortcut: PropTypes.string,
     // meta data for the repository
@@ -38,7 +38,7 @@ export default class Gitako extends React.PureComponent {
     setShouldShow: PropTypes.func.isRequired,
     toggleShowSideBar: PropTypes.func.isRequired,
     toggleShowSettings: PropTypes.func.isRequired,
-    onHasAccessTokenChange: PropTypes.func.isRequired,
+    onAccessTokenChange: PropTypes.func.isRequired,
     onKeyDown: PropTypes.func.isRequired,
     onShortcutChange: PropTypes.func.isRequired,
     onResize: PropTypes.func.isRequired,
@@ -51,7 +51,7 @@ export default class Gitako extends React.PureComponent {
     shouldShow: false,
     showSettings: false,
     errorDueToAuth: false,
-    hasAccessToken: false,
+    accessToken: '',
     toggleShowSideBarShortcut: '',
     metaData: null,
     treeData: null,
@@ -88,14 +88,14 @@ export default class Gitako extends React.PureComponent {
   }
 
   renderContent() {
-    const { errorDueToAuth, metaData, treeData, showSettings } = this.props
+    const { errorDueToAuth, metaData, treeData, showSettings, accessToken } = this.props
     return (
       <div className={'gitako-side-bar-content'}>
         {metaData && <MetaBar metaData={metaData} />}
         {errorDueToAuth && this.renderAccessDeniedError()}
         {metaData &&
           treeData && (
-            <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} />
+            <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} accessToken={accessToken} />
           )}
       </div>
     )
@@ -106,14 +106,14 @@ export default class Gitako extends React.PureComponent {
       size,
       shouldShow,
       showSettings,
-      hasAccessToken,
+      accessToken,
       toggleShowSideBarShortcut,
       logoContainerElement,
       toggleShowSideBar,
       onResize,
       toggleShowSettings,
       onShortcutChange,
-      onHasAccessTokenChange,
+      onAccessTokenChange,
     } = this.props
     return (
       <div className={cx('gitako', { hidden: !shouldShow })}>
@@ -127,9 +127,9 @@ export default class Gitako extends React.PureComponent {
             <SettingsBar
               toggleShowSettings={toggleShowSettings}
               onShortcutChange={onShortcutChange}
-              onHasAccessTokenChange={onHasAccessTokenChange}
+              onAccessTokenChange={onAccessTokenChange}
               activated={showSettings}
-              hasAccessToken={hasAccessToken}
+              accessToken={accessToken}
               toggleShowSideBarShortcut={toggleShowSideBarShortcut}
             />
           </div>

src/driver/core.js

@@ -15,7 +15,7 @@ const init = dispatch => async () => {
       storageHelper.getAccessToken(),
       storageHelper.getShortcut(),
     ])
-    dispatch({ hasAccessToken: Boolean(accessToken), toggleShowSideBarShortcut: shortcut })
+    dispatch({ accessToken, toggleShowSideBarShortcut: shortcut })
     const metaDataFromAPI = await GitHubHelper.getRepoMeta({ ...metaData, accessToken })
     const branchName = metaData.branchName || metaDataFromAPI['default_branch']
     Object.assign(metaData, { branchName, api: metaDataFromAPI })
@@ -81,23 +81,21 @@ const onResize = dispatch => size => dispatch({ size })
 
 const toggleShowSettings = dispatch => () => dispatch(({ showSettings }) => ({ showSettings: !showSettings }))
 
-const onHasAccessTokenChange = dispatch => hasAccessToken => dispatch({ hasAccessToken })
+const onAccessTokenChange = dispatch => accessToken => dispatch({ accessToken })
 
 const onShortcutChange = dispatch => shortcut => dispatch({ toggleShowSideBarShortcut: shortcut })
 
 const setMetaData = dispatch => metaData => dispatch({ metaData })
 
-export default function(instance) {
-  return link(instance.setState.bind(instance), {
-    init,
-    onPJAXEnd,
-    onKeyDown,
-    setShouldShow,
-    toggleShowSideBar,
-    toggleShowSettings,
-    onHasAccessTokenChange,
-    onShortcutChange,
-    onResize,
-    setMetaData,
-  })
+export default {
+  init,
+  onPJAXEnd,
+  onKeyDown,
+  setShouldShow,
+  toggleShowSideBar,
+  toggleShowSettings,
+  onAccessTokenChange,
+  onShortcutChange,
+  onResize,
+  setMetaData,
 }