diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 2747871..04ebd72 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 
 type Props = {
-  into: Element
+  into: Element | null
 }
 
 class Portal extends React.PureComponent<Props> {
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 88b00fa..0705791 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -28,7 +28,8 @@ function detectOS() {
   return OperatingSystems.others
 }
 
-function friendlyFormatShortcut(shortcut: string) {
+function friendlyFormatShortcut(shortcut?: string) {
+  if (!shortcut) return ''
   const OS = detectOS()
   if (OS === OperatingSystems.Windows) {
     return shortcut.replace(/meta/, 'win')
@@ -45,7 +46,7 @@ function friendlyFormatShortcut(shortcut: string) {
 }
 
 type Props = {
-  accessToken: string
+  accessToken?: string
   activated: boolean
   onAccessTokenChange: (accessToken: string) => void
   onShortcutChange: (shortcut: string) => void
@@ -56,14 +57,14 @@ type Props = {
   setCopySnippet: (copySnippetButton: Props['copySnippetButton']) => void
   setCompressSingleton: (compressSingletonFolder: Props['compressSingletonFolder']) => void
   toggleShowSettings: () => void
-  toggleShowSideBarShortcut: string
+  toggleShowSideBarShortcut?: string
 }
 
 type State = {
-  accessToken: string
+  accessToken?: string
   accessTokenHint: React.ReactNode
   shortcutHint: string
-  toggleShowSideBarShortcut: string
+  toggleShowSideBarShortcut?: string
   reloadHint: React.ReactNode
   varyOptions: {
     key: string
@@ -87,7 +88,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
         label: 'Compress singleton folder',
         onChange: this.createOnToggleChecked(
           config.compressSingletonFolder,
-          this.props.setCompressSingleton
+          this.props.setCompressSingleton,
         ),
         getValue: () => this.props.compressSingletonFolder,
         wikiLink: wikiLinks.compressSingletonFolder,
@@ -154,10 +155,12 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
     const { onShortcutChange } = this.props
     const { toggleShowSideBarShortcut } = this.state
     await configHelper.setOne(config.shortcut, toggleShowSideBarShortcut)
-    onShortcutChange(toggleShowSideBarShortcut)
-    this.setState({
-      shortcutHint: 'Shortcut is saved!',
-    })
+    if (typeof toggleShowSideBarShortcut === 'string') {
+      onShortcutChange(toggleShowSideBarShortcut)
+      this.setState({
+        shortcutHint: 'Shortcut is saved!',
+      })
+    }
   }
 
   onShortCutInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -182,7 +185,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
 
   createOnToggleChecked(
     configKey: config,
-    set: (value: boolean) => void
+    set: (value: boolean) => void,
   ): (e: React.FormEvent<HTMLInputElement>) => Promise<void> {
     return async e => {
       const enabled = e.currentTarget.checked
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 2f3d0f2..a595042 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -23,8 +23,6 @@ class Gitako extends React.PureComponent<Props & ConnectorState> {
     errorDueToAuth: false,
     accessToken: '',
     toggleShowSideBarShortcut: '',
-    metaData: null,
-    treeData: null,
     compressSingletonFolder: true,
     copyFileButton: true,
     copySnippetButton: true,
@@ -120,7 +118,7 @@ class Gitako extends React.PureComponent<Props & ConnectorState> {
       <div className={'gitako-side-bar'}>
         <Portal into={logoContainerElement}>
           <ToggleShowButton
-            error={(error)}
+            error={error}
             shouldShow={shouldShow}
             toggleShowSideBar={toggleShowSideBar}
           />
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 9e6d44e..fa45455 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -3,7 +3,7 @@ import Icon from 'components/Icon'
 import cx from 'utils/cx'
 
 type Props = {
-  error: string
+  error?: string
   shouldShow: boolean
   toggleShowSideBar: React.MouseEventHandler
 }
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index c63fc32..37f3ae0 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -16,27 +16,27 @@ import SettingsBar from 'components/SettingsBar'
 
 export type ConnectorState = {
   // initial width of side bar
-  baseSize?: number
+  baseSize: number
   // error message
   error?: string
   // whether Gitako side bar should be shown
-  shouldShow?: boolean
+  shouldShow: boolean
   // whether show settings pane
-  showSettings?: boolean
+  showSettings: boolean
   // whether failed loading the repo due to it is private
-  errorDueToAuth?: boolean
+  errorDueToAuth: boolean
   // access token for GitHub
   accessToken?: string
   // the shortcut string for toggle sidebar
   toggleShowSideBarShortcut?: string
   // meta data for the repository
-  metaData: MetaData
+  metaData?: MetaData
   // file tree data
-  treeData: TreeData
+  treeData?: TreeData
   // few settings
-  compressSingletonFolder?: boolean
-  copyFileButton?: boolean
-  copySnippetButton?: boolean
+  compressSingletonFolder: boolean
+  copyFileButton: boolean
+  copySnippetButton: boolean
   logoContainerElement: Element | null
 
   init: () => void