refactor: status mapping

src/components/FileExplorer.tsx

@@ -138,14 +138,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
       onClick={freeze ? toggleShowSettings : undefined}
     >
       {state !== 'done' ? (
-        <LoadingIndicator
-          text={
-            {
-              pulling: 'Fetching File List...',
-              rendering: 'Rendering File List...',
-            }[state]
-          }
-        />
+        <LoadingIndicator text={'Rendering File List...'} />
       ) : (
         visibleNodes &&
         renderNodeContext && (
@@ -183,7 +176,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
 
 RawFileExplorer.defaultProps = {
   freeze: false,
-  state: 'pulling',
+  state: 'rendering',
   searchKey: '',
   visibleNodes: null,
 }

src/components/SideBar.tsx

@@ -23,9 +23,9 @@ import { Theme } from './Theme'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const {
-    errorDueToAuth,
     metaData,
     treeData,
+    status,
     defer,
     error,
     shouldShow,
@@ -59,7 +59,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
 
   React.useEffect(
     function attachKeyDown() {
-      if (props.disabled || !configContext.value.shortcut) return
+      if (status === 'disabled' || !configContext.value.shortcut) return
 
       function onKeyDown(e: KeyboardEvent) {
         const keys = keyHelper.parseEvent(e)
@@ -70,13 +70,13 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
       window.addEventListener('keydown', onKeyDown)
       return () => window.removeEventListener('keydown', onKeyDown)
     },
-    [toggleShowSideBar, props.disabled, configContext.value.shortcut],
+    [toggleShowSideBar, status === 'disabled', configContext.value.shortcut],
   )
 
   const intelligentToggle = configContext.value.intelligentToggle
   // Hide sidebar when error due to auth but token is set  #128
   const hideSidebarOnInvalidToken: boolean =
-    intelligentToggle === null && Boolean(errorDueToAuth && accessToken)
+    intelligentToggle === null && Boolean(status === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {
     if (hideSidebarOnInvalidToken) {
       props.setShouldShow(false)
@@ -120,27 +120,34 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
               </button>
             </div>
             <div className={'gitako-side-bar-content'}>
-              {errorDueToAuth ? (
-                <AccessDeniedDescription hasToken={Boolean(accessToken)} />
-              ) : metaData ? (
-                <>
-                  <div className={'header'}>
-                    <MetaBar metaData={metaData} />
-                  </div>
-                  <FileExplorer
-                    toggleShowSettings={toggleShowSettings}
-                    metaData={metaData}
-                    treeRoot={treeData}
-                    freeze={showSettings}
-                    accessToken={accessToken}
-                    loadWithPJAX={loadWithPJAX}
-                    config={configContext.value}
-                    defer={defer}
-                  />
-                </>
-              ) : (
-                <LoadingIndicator text={'Fetching repo meta...'} />
-              )}
+              {(() => {
+                switch (status) {
+                  case 'loading-meta':
+                    return <LoadingIndicator text={'Fetching repo meta...'} />
+                  case 'loading-tree':
+                    return <LoadingIndicator text={'Fetching File List...'} />
+                  case 'idle':
+                    return metaData ? (
+                      <>
+                        <div className={'header'}>
+                          <MetaBar metaData={metaData} />
+                        </div>
+                        <FileExplorer
+                          toggleShowSettings={toggleShowSettings}
+                          metaData={metaData}
+                          treeRoot={treeData}
+                          freeze={showSettings}
+                          accessToken={accessToken}
+                          loadWithPJAX={loadWithPJAX}
+                          config={configContext.value}
+                          defer={defer}
+                        />
+                      </>
+                    ) : null
+                  case 'error-due-to-auth':
+                    return <AccessDeniedDescription hasToken={Boolean(accessToken)} />
+                }
+              })()}
             </div>
             <SettingsBar
               defer={defer}
@@ -157,8 +164,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
 RawGitako.defaultProps = {
   shouldShow: false,
   showSettings: false,
-  errorDueToAuth: false,
-  disabled: false,
+  status: 'loading-meta',
 }
 
 export const SideBar = connect(SideBarCore)(RawGitako)

src/driver/core/FileExplorer.ts

@@ -16,7 +16,7 @@ export type Props = {
 }
 
 export type ConnectorState = {
-  state: 'pulling' | 'rendering' | 'done'
+  state: 'rendering' | 'done'
   visibleNodesGenerator: VisibleNodesGenerator | null
   visibleNodes: VisibleNodes | null
   searchKey: string

src/driver/core/SideBar.ts

@@ -15,16 +15,13 @@ export type ConnectorState = {
   shouldShow: boolean
   // whether show settings pane
   showSettings: boolean
-  // whether failed loading the repo due to it is private
-  errorDueToAuth: boolean
   // meta data for the repository
   metaData?: MetaData
   // file tree data
   treeData?: TreeNode
+  status: 'loading-meta' | 'loading-tree' | 'idle' | 'error-due-to-auth' | 'disabled'
   logoContainerElement: Element | null
   defer?: boolean
-  disabled: boolean
-  initializingPromise: Promise<void> | null
 } & {
   init: GetCreatedMethod<typeof init>
   setShouldShow: GetCreatedMethod<typeof setShouldShow>
@@ -40,16 +37,16 @@ export const init: BoundMethodCreator = dispatch => async () => {
   const leave = await promiseQueue.enter()
 
   try {
+    dispatch.set({ status: 'loading-meta' })
     const metaData = platform.resolveMeta()
     if (!metaData) {
-      dispatch.set({ disabled: true })
+      dispatch.set({ status: 'disabled' })
       return
     }
     const { userName, repoName, branchName } = metaData
 
     DOMHelper.markGitakoReadyState(true)
     dispatch.set({
-      errorDueToAuth: false,
       showSettings: false,
       logoContainerElement: DOMHelper.insertLogoMountPoint(),
     })
@@ -116,8 +113,9 @@ export const init: BoundMethodCreator = dispatch => async () => {
       }
     }
 
+    dispatch.set({ status: 'loading-tree' })
     const { root: treeData, defer } = await getTreeData
-    dispatch.set({ treeData, defer })
+    dispatch.set({ status: 'idle', treeData, defer })
   } catch (err) {
     dispatch.call(handleError, err)
   }
@@ -135,13 +133,13 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err =>
     err.message === errors.BAD_CREDENTIALS ||
     err.message === errors.API_RATE_LIMIT
   ) {
-    dispatch.set({ errorDueToAuth: true })
+    dispatch.set({ status: 'error-due-to-auth' })
   } else if (err.message === errors.CONNECTION_BLOCKED) {
     const { props } = dispatch.get()
     if (props.configContext.value.accessToken) {
       dispatch.call(setError, `Cannot connect to ${platformName}.`)
     } else {
-      dispatch.set({ errorDueToAuth: true })
+      dispatch.set({ status: 'error-due-to-auth' })
     }
   } else if (err.message === errors.SERVER_FAULT) {
     dispatch.call(setError, `${platformName} server went down.`)