chore: code clean

src/components/AccessDeniedDescription.tsx

@@ -9,7 +9,7 @@ export function AccessDeniedDescription() {
   const hasToken = Boolean(configContext.value.accessToken)
 
   return (
-    <div className={'description'}>
+    <div className={'description-area'}>
       <h2>Access Denied</h2>
       {hasToken ? (
         <>

src/components/Gitako.tsx

@@ -1,13 +1,11 @@
-import { IIFC } from 'components/IIFC'
 import { SideBar } from 'components/SideBar'
-import { ConfigsContextWrapper, useConfigs } from 'containers/ConfigsContext'
+import { ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { ErrorBoundary } from './ErrorBoundary'
 import { StateBarErrorContextWrapper } from './ErrorContext'
 import { OAuthWrapper } from './OAuthWrapper'
-import { RepoContext, RepoContextWrapper } from './RepoContext'
-import { SideBarStateContext, StateBarStateContextWrapper } from './SideBarState'
+import { RepoContextWrapper } from './RepoContext'
+import { StateBarStateContextWrapper } from './SideBarState'
 
 export function Gitako() {
   return (
@@ -17,15 +15,7 @@ export function Gitako() {
           <StateBarErrorContextWrapper>
             <OAuthWrapper>
               <RepoContextWrapper>
-                <IIFC>
-                  {() => (
-                    <SideBar
-                      configContext={useConfigs()}
-                      stateContext={useLoadedContext(SideBarStateContext)}
-                      metaData={React.useContext(RepoContext)}
-                    />
-                  )}
-                </IIFC>
+                <SideBar />
               </RepoContextWrapper>
             </OAuthWrapper>
           </StateBarErrorContextWrapper>

src/components/SideBar.tsx

@@ -22,16 +22,12 @@ import { SideBarErrorContext } from './ErrorContext'
 import { Icon } from './Icon'
 import { IIFC } from './IIFC'
 import { LoadingIndicator } from './LoadingIndicator'
-import { SideBarState, SideBarStateContext, SideBarStateContextShape } from './SideBarState'
+import { RepoContext } from './RepoContext'
+import { SideBarState, SideBarStateContext } from './SideBarState'
 import { Theme } from './Theme'
 
-export function SideBar(props: {
-  metaData: MetaData | null
-  configContext: ConfigsContextShape
-  stateContext: SideBarStateContextShape
-}) {
-  const { metaData } = props
-
+export function SideBar() {
+  const metaData = React.useContext(RepoContext)
   const state = useLoadedContext(SideBarStateContext).value
   const configContext = useConfigs()
 
@@ -46,7 +42,7 @@ export function SideBar(props: {
 
   const $logoContainerElement = useStateIO<HTMLElement | null>(null)
 
-  const hasMetaData = state !== 'disabled'
+  const hasMetaData = state !== 'disabled' // will be true since retrieving data, cannot use Boolean(metaData)
   React.useEffect(() => {
     if (hasMetaData) {
       DOMHelper.markGitakoReadyState(true)
@@ -183,9 +179,10 @@ function useToggleSideBarWithKeyboard(
   configContext: ConfigsContextShape,
   toggleShowSideBar: () => void,
 ) {
+  const isDisabled = state === 'disabled'
   React.useEffect(
     function attachKeyDown() {
-      if (state === 'disabled' || !configContext.value.shortcut) return
+      if (isDisabled || !configContext.value.shortcut) return
 
       function onKeyDown(e: KeyboardEvent) {
         const keys = keyHelper.parseEvent(e)
@@ -196,6 +193,6 @@ function useToggleSideBarWithKeyboard(
       window.addEventListener('keydown', onKeyDown)
       return () => window.removeEventListener('keydown', onKeyDown)
     },
-    [toggleShowSideBar, state === 'disabled', configContext.value.shortcut],
+    [toggleShowSideBar, isDisabled, configContext.value.shortcut],
   )
 }

src/styles/index.scss

@@ -399,8 +399,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
       }
 
-      .description {
-        border-top: 1px solid var(--gitako-border-overlay);
+      .description-area {
         padding: 4px 10px;
       }
 

src/utils/hooks/useCatchNetworkError.tsx

@@ -35,7 +35,7 @@ export function useCatchNetworkError() {
           errorContext.onChange(`${platformName} server went down.`)
         } else {
           stateContext.onChange('disabled')
-          errorContext.onChange('Some thing went wrong.')
+          errorContext.onChange('Something unexpected happened.')
           throw err
         }
       }