feat: handle more error and block UI

src/components/SideBar.js

@@ -18,6 +18,8 @@ export default class Gitako extends React.PureComponent {
   static propTypes = {
     // initial width of side bar
     baseSize: PropTypes.number,
+    // error message
+    error: PropTypes.string,
     // whether Gitako side bar should be shown
     shouldShow: PropTypes.bool,
     // whether show settings pane
@@ -103,6 +105,7 @@ export default class Gitako extends React.PureComponent {
   render() {
     const {
       baseSize,
+      error,
       shouldShow,
       showSettings,
       accessToken,
@@ -118,9 +121,9 @@ export default class Gitako extends React.PureComponent {
     return (
       <div className={'gitako-side-bar'}>
         <Portal into={logoContainerElement}>
-          <ToggleShowButton shouldShow={shouldShow} toggleShowSideBar={toggleShowSideBar} />
+          <ToggleShowButton error={error} shouldShow={shouldShow} toggleShowSideBar={toggleShowSideBar} />
         </Portal>
-        <Resizable className={cx({ hidden: !shouldShow })} baseSize={baseSize}>
+        <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
           <div className={'gitako-side-bar-body'}>
             {this.renderContent()}
             <SettingsBar

src/components/ToggleShowButton.js

@@ -3,10 +3,17 @@ import Icon from './Icon'
 
 import cx from '../utils/cx'
 
-export default function Logo({ shouldShow, toggleShowSideBar }) {
+export default function Logo({ error, shouldShow, toggleShowSideBar }) {
   return (
-    <div className={cx('gitako-toggle-show-button-wrapper', { collapsed: !shouldShow })} onClick={toggleShowSideBar}>
+    <div
+      className={cx('gitako-toggle-show-button-wrapper', {
+        collapsed: !shouldShow || error,
+        error,
+      })}
+      onClick={error ? undefined : toggleShowSideBar}
+    >
       <Icon className={'action-icon'} type={shouldShow ? 'x' : 'octoface'} />
+      {error && <span className={'error-message'}>{error}</span>}
     </div>
   )
 }

src/content.less

@@ -79,7 +79,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  width: 30px;
+  min-width: 30px;
   height: 30px;
   will-change: transform;
   border: 1px solid transparent;
@@ -89,6 +89,12 @@
     transform: translate(~'calc(50vw - (' @github-content-width ~') / 2 - 30px)');
   }
 
+  &:hover {
+    .error-message {
+      display: inline;
+    }
+  }
+
   &.collapsed {
     border-color: #999999;
     border-radius: 3px;
@@ -103,12 +109,24 @@
     }
   }
 
+  &.error {
+    .action-icon {
+      color: #cb2431;
+    }
+  }
+
   .action-icon {
     color: #666666;
     width: 16px;
     height: 20px;
+    margin: 5px 6px;
     transition: all @animation-duration ease;
   }
+
+  .error-message {
+    display: none;
+    margin: 0 4px;
+  }
 }
 
 .@{name}-side-bar {

src/driver/core/SideBar.js

@@ -6,6 +6,7 @@ import keyHelper from '../../utils/keyHelper'
 
 const init = dispatch => async () => {
   try {
+    let nothingWentWrong = true
     const metaData = URLHelper.parse()
     dispatch(setMetaData, metaData)
     const { access_token: accessToken, shortcut, compressSingletonFolder } = await configHelper.get()
@@ -14,21 +15,21 @@ const init = dispatch => async () => {
       ...metaData,
       branchName: metaData.branchName || 'master',
       accessToken,
-    }).catch(() => {})
+    }).catch(err => {
+      nothingWentWrong = false
+      dispatch(handleError, err)
+    })
     const metaDataFromAPI = await GitHubHelper.getRepoMeta({ ...metaData, accessToken })
     const branchName = metaData.branchName || metaDataFromAPI['default_branch']
     Object.assign(metaData, { branchName, api: metaDataFromAPI })
     dispatch(setMetaData, metaData)
     const shouldShow = URLHelper.isInCodePage(metaData)
-    dispatch(setShouldShow, shouldShow)
+    dispatch(setShouldShow, nothingWentWrong && shouldShow)
     aggressivelyGotTreeData
       .then(treeData => {
         dispatch({ logoContainerElement: DOMHelper.insertLogoMountPoint() })
         dispatch({ treeData })
       })
-      .catch(err => {
-        dispatch(handleError, err)
-      })
   } catch (err) {
     dispatch(handleError, err)
   }
@@ -39,13 +40,14 @@ const handleError = dispatch => async (err) => {
   if (err.message === NOT_FOUND || err.message === BAD_CREDENTIALS) {
     const repoPageType = await DOMHelper.getRepoPageType()
     const errorDueToAuth = repoPageType === REPO_TYPE_PRIVATE || err.message === BAD_CREDENTIALS
-    dispatch({
-      showSettings: repoPageType !== null,
-      errorDueToAuth,
-    })
+    dispatch({ errorDueToAuth })
     dispatch(setShouldShow, errorDueToAuth)
+    if (!errorDueToAuth) {
+      dispatch(setError, 'Gitako ate a bug, but it should recovery soon!')
+    }
   } else {
     dispatch(setShouldShow, false)
+    dispatch(setError, 'Gitako ate a bug, but it should recovery soon!')
   }
 }
 
@@ -78,6 +80,10 @@ const setShouldShow = dispatch => shouldShow => {
   DOMHelper.setBodyIndent(shouldShow)
 }
 
+const setError = dispatch => error => {
+  dispatch({ error })
+}
+
 const toggleShowSettings = dispatch => () => dispatch(({ showSettings }) => ({ showSettings: !showSettings }))
 
 const onAccessTokenChange = dispatch => accessToken => dispatch({ accessToken })
@@ -99,5 +105,6 @@ export default {
   onShortcutChange,
   setMetaData,
   setCompressSingleton,
+  setError,
   handleError,
 }