From 0fc3b263375f7fe2e998f69cb2320326d0e81eb3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 8 Nov 2019 16:12:15 +0800
Subject: [PATCH 01/29] build: makefile

---
 Makefile           | 21 +++++++++++++++++++++
 package.json       |  2 +-
 scripts/release.sh | 18 ------------------
 3 files changed, 22 insertions(+), 19 deletions(-)
 create mode 100755 Makefile
 delete mode 100755 scripts/release.sh

diff --git a/Makefile b/Makefile
new file mode 100755
index 0000000..a9c4084
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,21 @@
+build:
+	rm -rf dist
+	yarn build
+
+upload-for-analytics:
+	VERSION=v$(node scripts/get-version.js)
+	# make sure sentry can retrieve current commit on remote
+	git push --tags
+	yarn sentry-cli releases new "$(VERSION)"
+	yarn sentry-cli releases set-commits "$(VERSION)" --auto
+	yarn sentry-cli releases files "$(VERSION)" upload-sourcemaps dist --no-rewrite
+	yarn sentry-cli releases finalize "$(VERSION)"
+
+compress:
+	rm -f dist/gitako.zip
+	cd dist && zip -r gitako.zip * -x *.map
+
+release:
+	$(MAKE) build
+	$(MAKE) upload-for-analytics
+	$(MAKE) compress
diff --git a/package.json b/package.json
index b034a84..2f45dc2 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
     "build": "NODE_ENV=production webpack",
     "postversion": "node scripts/version.js",
-    "roll": "./scripts/release.sh"
+    "roll": "make release"
   },
   "dependencies": {
     "@primer/octicons": "^9.2.0",
diff --git a/scripts/release.sh b/scripts/release.sh
deleted file mode 100755
index bff0774..0000000
--- a/scripts/release.sh
+++ /dev/null
@@ -1,18 +0,0 @@
-#!/bin/sh
-rm -rf dist
-yarn build
-
-GIT_SHA=$(git rev-parse HEAD)
-VERSION=v$(node scripts/get-version.js)
-echo "Got version $VERSION"
-
-# sentry
-git push --tags # make sure sentry can retrieve current commit on remote
-yarn sentry-cli releases new "$VERSION"
-yarn sentry-cli releases set-commits "$VERSION" --auto
-yarn sentry-cli releases files "$VERSION" upload-sourcemaps dist --no-rewrite
-yarn sentry-cli releases finalize "$VERSION"
-
-cd dist
-rm -f ./gitako.zip
-zip -r gitako.zip * -x *.map

From 405d863913c88a78e62b5e88ad6ef3744993bd6b Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 8 Nov 2019 17:01:39 +0800
Subject: [PATCH 02/29] build: sanitize build scope, pass version through env

---
 package.json                   |  4 ++--
 src/analytics.ts               |  5 ++---
 src/components/SettingsBar.tsx |  5 ++---
 src/env.ts                     |  2 ++
 webpack.config.js              | 15 ++++++---------
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 2f45dc2..b5d5721 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,10 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "webpack --watch",
+    "start": "VERSION=dev-v$(node scripts/get-version.js) webpack --watch",
     "debug-firefox": "web-ext run -s dist",
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
-    "build": "NODE_ENV=production webpack",
+    "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack",
     "postversion": "node scripts/version.js",
     "roll": "make release"
   },
diff --git a/src/analytics.ts b/src/analytics.ts
index 492c2f2..0fdf838 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -1,14 +1,13 @@
 import * as Sentry from '@sentry/browser'
 import { Middleware } from 'driver/connect.js'
-import { IN_PRODUCTION_MODE } from 'env'
-import { version } from '../package.json'
+import { IN_PRODUCTION_MODE, VERSION } from 'env'
 
 const PUBLIC_KEY = 'd22ec5c9cc874539a51c78388c12e3b0'
 const PROJECT_ID = '1406497'
 
 const sentryOptions: Sentry.BrowserOptions = {
   dsn: `https://${PUBLIC_KEY}@sentry.io/${PROJECT_ID}`,
-  release: `v${version}`,
+  release: VERSION,
   environment: IN_PRODUCTION_MODE ? 'production' : 'development',
   // Not safe to activate all integrations in non-Chrome environments where Gitako may not run in top context
   // https://docs.sentry.io/platforms/javascript/#sdk-integrations
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 1aa686d..71ff569 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -1,11 +1,10 @@
 import { raiseError } from 'analytics'
 import Icon from 'components/Icon'
-import { oauth } from 'env'
+import { oauth, VERSION } from 'env'
 import * as React from 'react'
 import configHelper, { Config, configKeys } from 'utils/configHelper'
 import { friendlyFormatShortcut, JSONRequest, parseURLSearch } from 'utils/general'
 import keyHelper from 'utils/keyHelper'
-import { version } from '../../package.json'
 
 const WIKI_HOME_LINK = 'https://github.com/EnixCoda/Gitako/wiki'
 const wikiLinks = {
@@ -348,7 +347,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
             target={'_blank'}
             title={'Check out new features!'}
           >
-            v{version}
+            {VERSION}
           </a>
           {activated ? (
             <Icon
diff --git a/src/env.ts b/src/env.ts
index dca85ac..bba237d 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -9,3 +9,5 @@ export const oauth = {
   clientId: process.env.GITHUB_OAUTH_CLIENT_ID,
   clientSecret: process.env.GITHUB_OAUTH_CLIENT_SECRET,
 }
+
+export const VERSION = process.env.VERSION
diff --git a/webpack.config.js b/webpack.config.js
index 02c11e1..a3d34fd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,15 +38,12 @@ if (analyse) {
 }
 
 const IN_PRODUCTION_MODE = process.env.NODE_ENV === 'production'
-if (IN_PRODUCTION_MODE) {
-  plugins.push(
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('production'),
-      },
-    }),
-  )
-}
+plugins.push(
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    'process.env.VERSION': JSON.stringify(process.env.VERSION),
+  }),
+)
 
 module.exports = {
   entry: {

From 6a897c0249fd468d720b8375a35d466449570cef Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 00:50:27 +0800
Subject: [PATCH 03/29] fix: update DOM structure

---
 src/utils/DOMHelper.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 31d681a..3b76393 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -154,7 +154,7 @@ const PAGE_TYPES = {
  * TODO: distinguish type 'preview'
  */
 function getCurrentPageType() {
-  const blobWrapperSelector = '.repository-content .file .blob-wrapper table'
+  const blobWrapperSelector = '.repository-content .blob-wrapper table'
   const readmeSelector = '.repository-content .readme'
   return (
     $(blobWrapperSelector, () => PAGE_TYPES.RAW_TEXT) ||
@@ -188,7 +188,7 @@ function attachCopyFileBtn() {
    */
   function getCodeElement() {
     if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
-      const codeContentSelector = '.repository-content .file .data table'
+    const codeContentSelector = '.repository-content .data table'
       const codeContentElement = $(codeContentSelector)
       if (!codeContentElement) {
         raiseError(new Error('cannot find code content element'))
@@ -209,10 +209,8 @@ function attachCopyFileBtn() {
 
   if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
     const btnGroupSelector = [
-      // the button group next to navigation bar
-      '.repository-content .file-navigation.js-zeroclipboard-container .BtnGroup',
       // the button group in file content header
-      '.repository-content .file .file-header .file-actions .BtnGroup',
+      '.repository-content > .Box > .Box-header .BtnGroup',
     ].join(', ')
     const btnGroups = document.querySelectorAll(btnGroupSelector)
 

From 54d7c675d7b51b83d1f8d98dfeab5913862ab6a1 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 00:50:54 +0800
Subject: [PATCH 04/29] feat: CopyFileButton

---
 src/components/CopyFileButton.tsx | 38 +++++++++++++++
 src/utils/DOMHelper.ts            | 78 +++++++++++++------------------
 2 files changed, 71 insertions(+), 45 deletions(-)
 create mode 100644 src/components/CopyFileButton.tsx

diff --git a/src/components/CopyFileButton.tsx b/src/components/CopyFileButton.tsx
new file mode 100644
index 0000000..11bcda4
--- /dev/null
+++ b/src/components/CopyFileButton.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { copyElementContent, getCodeElement } from 'utils/DOMHelper'
+
+type Props = {}
+
+export function CopyFileButton(props: React.PropsWithChildren<Props>) {
+  const contents = {
+    success: 'Success!',
+    error: 'Copy failed!',
+    normal: 'Copy file',
+  }
+  const [content, setContent] = React.useState(contents.normal)
+  React.useEffect(() => {
+    if (content !== contents.normal) {
+      const timer = setTimeout(() => {
+        setContent(contents.normal)
+      }, 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [content])
+  return (
+    <a
+      className="btn btn-sm BtnGroup-item copy-file-btn"
+      onClick={() => {
+        const codeElement = getCodeElement()
+        if (codeElement) {
+          if (copyElementContent(codeElement)) {
+            setContent(contents.success)
+          } else {
+            setContent(contents.error)
+          }
+        }
+      }}
+    >
+      {content}
+    </a>
+  )
+}
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 3b76393..0919f72 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -1,10 +1,12 @@
 /**
  * this helper helps manipulating DOM
  */
-
 import { raiseError } from 'analytics'
+import { CopyFileButton } from 'components/CopyFileButton'
 import * as NProgress from 'nprogress'
 import * as PJAX from 'pjax'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 
 NProgress.configure({ showSpinner: false })
 
@@ -92,7 +94,6 @@ function getCurrentBranch() {
 
 /**
  * add the logo element into DOM
- *
  */
 function insertLogoMountPoint() {
   const logoSelector = '.gitako .gitako-logo'
@@ -178,57 +179,42 @@ function getRepoPageType() {
   })
 }
 
+/**
+ * get text content of raw text content
+ */
+function getCodeElement() {
+  if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
+    const codeContentSelector = '.repository-content .data table'
+    const codeContentElement = $(codeContentSelector)
+    if (!codeContentElement) {
+      raiseError(new Error('cannot find code content element'))
+    }
+    return codeContentElement
+  }
+}
+
 /**
  * add copy file content buttons to button groups
  * click these buttons will copy file content to clipboard
  */
 function attachCopyFileBtn() {
-  /**
-   * get text content of raw text content
-   */
-  function getCodeElement() {
-    if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
-    const codeContentSelector = '.repository-content .data table'
-      const codeContentElement = $(codeContentSelector)
-      if (!codeContentElement) {
-        raiseError(new Error('cannot find code content element'))
-      }
-      return codeContentElement
-    }
-  }
-
-  /**
-   * change inner text of copy file button to give feedback
-   * @param {element} copyFileBtn
-   * @param {string} text
-   */
-  function setTempCopyFileBtnText(copyFileBtn: HTMLButtonElement, text: string) {
-    copyFileBtn.innerText = text
-    window.setTimeout(() => (copyFileBtn.innerText = 'Copy file'), 1000)
-  }
-
   if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
-    const btnGroupSelector = [
       // the button group in file content header
-      '.repository-content > .Box > .Box-header .BtnGroup',
-    ].join(', ')
-    const btnGroups = document.querySelectorAll(btnGroupSelector)
+    const buttonGroupSelector = '.repository-content > .Box > .Box-header .BtnGroup'
+    const buttonGroups = document.querySelectorAll(buttonGroupSelector)
 
-    btnGroups.forEach(btnGroup => {
-      const copyFileBtn = document.createElement('button')
-      copyFileBtn.classList.add('btn', 'btn-sm', 'BtnGroup-item', 'copy-file-btn')
-      copyFileBtn.innerText = 'Copy file'
-      copyFileBtn.addEventListener('click', () => {
-        const codeElement = getCodeElement()
-        if (codeElement) {
-          if (copyElementContent(codeElement)) {
-            setTempCopyFileBtnText(copyFileBtn, 'Success!')
-          } else {
-            setTempCopyFileBtnText(copyFileBtn, 'Copy failed!')
-          }
-        }
-      })
-      btnGroup.insertBefore(copyFileBtn, btnGroup.lastChild)
+    if (buttonGroups.length === 0) {
+      raiseError(new Error(`No button groups found`))
+    }
+
+    buttonGroups.forEach(buttonGroup => {
+      if (!buttonGroup.lastElementChild) return
+      const portal = ReactDOM.createPortal(React.createElement(CopyFileButton), buttonGroup)
+      // creating a element for mounting button into button group, somehow hack
+      const seedElementForButton = document.createElement('a')
+      buttonGroup.appendChild(seedElementForButton)
+      ReactDOM.render(portal, seedElementForButton)
+      buttonGroup.removeChild(seedElementForButton)
     })
   }
 }
@@ -384,9 +370,11 @@ export default {
   loadWithPJAX,
   attachCopyFileBtn,
   attachCopySnippet,
+  copyElementContent,
   decorateGitHubPageContent,
   focusSearchInput,
   focusFileExplorer,
+  getCodeElement,
   getCurrentPageType,
   getRepoPageType,
   insertLogoMountPoint,

From d9aaf72b03402325eab352e486b2787c27540ee2 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 01:08:12 +0800
Subject: [PATCH 05/29] build: deprecate default export

---
 src/components/PJAXLink.tsx     |  2 +-
 src/content.tsx                 |  7 ++--
 src/driver/core/FileExplorer.ts |  2 +-
 src/driver/core/SideBar.ts      |  2 +-
 src/utils/DOMHelper.ts          | 62 +++++++++++----------------------
 5 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/src/components/PJAXLink.tsx b/src/components/PJAXLink.tsx
index bc0e7d4..1b78927 100644
--- a/src/components/PJAXLink.tsx
+++ b/src/components/PJAXLink.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import DOMHelper from 'utils/DOMHelper'
+import * as DOMHelper from 'utils/DOMHelper'
 
 type Props<P> = {
   to: string
diff --git a/src/content.tsx b/src/content.tsx
index 06b7c41..3ba5177 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { withErrorLog } from 'analytics'
 import Gitako from 'components/Gitako'
 import { addMiddleware } from 'driver/connect'
-import { withErrorLog } from 'analytics'
-
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 import './content.less'
 
 addMiddleware(withErrorLog)
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index ba075c5..60489cb 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -2,7 +2,7 @@ import { Props } from 'components/FileExplorer'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import * as ini from 'ini'
 import { Base64 } from 'js-base64'
-import DOMHelper from 'utils/DOMHelper'
+import * as DOMHelper from 'utils/DOMHelper'
 import { findNode, searchKeyToRegexps } from 'utils/general'
 import GitHubHelper, { BlobData } from 'utils/GitHubHelper'
 import treeParser from 'utils/treeParser'
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index d738340..15b9ecf 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,7 +1,7 @@
 import { Props } from 'components/SideBar'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import configHelper, { Config, configKeys } from 'utils/configHelper'
-import DOMHelper from 'utils/DOMHelper'
+import * as DOMHelper from 'utils/DOMHelper'
 import GitHubHelper, {
   API_RATE_LIMIT,
   BAD_CREDENTIALS,
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 0919f72..0917b96 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -13,7 +13,7 @@ NProgress.configure({ showSpinner: false })
 /**
  * when gitako is ready, make page's header narrower
  */
-function markGitakoReadyState() {
+export function markGitakoReadyState() {
   const readyClassName = 'gitako-ready'
   document.body.classList.add(readyClassName)
 }
@@ -23,7 +23,7 @@ function markGitakoReadyState() {
  * otherwise, hide the space
  */
 export const bodySpacingClassName = 'with-gitako-spacing'
-function setBodyIndent(shouldShowGitako: boolean) {
+export function setBodyIndent(shouldShowGitako: boolean) {
   if (shouldShowGitako) {
     document.body.classList.add(bodySpacingClassName)
   } else {
@@ -49,18 +49,18 @@ function $<EE extends Element, E extends (element: EE) => any, O extends () => a
   return otherwise ? otherwise() : null
 }
 
-function isInCodePage() {
+export function isInCodePage() {
   const branchListSelector = '#branch-select-menu.branch-select-menu'
   return Boolean($(branchListSelector))
 }
 
-function getBranches() {
+export function getBranches() {
   const branchSelector = '.branch-select-menu .select-menu-list > div .select-menu-item-text'
   const branchElements = Array.from(document.querySelectorAll(branchSelector))
   return branchElements.map(element => element.innerHTML.trim())
 }
 
-function getCurrentBranch() {
+export function getCurrentBranch() {
   const selectedBranchButtonSelector = '.repository-content .branch-select-menu summary'
   const branchButtonElement: HTMLElement = $(selectedBranchButtonSelector)
   if (branchButtonElement) {
@@ -95,7 +95,7 @@ function getCurrentBranch() {
 /**
  * add the logo element into DOM
  */
-function insertLogoMountPoint() {
+export function insertLogoMountPoint() {
   const logoSelector = '.gitako .gitako-logo'
   return $(logoSelector) || createLogoMountPoint()
 }
@@ -111,7 +111,7 @@ function createLogoMountPoint() {
  * content above the file navigation bar is same for all pages of the repo
  * use this function to scroll down a bit to hide them
  */
-function scrollToRepoContent() {
+export function scrollToRepoContent() {
   const repositoryContentSelector = '.repository-content'
   // do NOT use behavior: smooth here as it will scroll horizontally
   $(repositoryContentSelector, repositoryContentElement =>
@@ -128,7 +128,7 @@ const pjax = new PJAX({
   forceCache: true, // TODO: merge namespace, add forceCache
 })
 
-function loadWithPJAX(URL: string) {
+export function loadWithPJAX(URL: string) {
   NProgress.start()
   pjax.loadUrl(URL, { scrollTo: 0 })
 }
@@ -154,7 +154,7 @@ const PAGE_TYPES = {
  *
  * TODO: distinguish type 'preview'
  */
-function getCurrentPageType() {
+export function getCurrentPageType() {
   const blobWrapperSelector = '.repository-content .blob-wrapper table'
   const readmeSelector = '.repository-content .readme'
   return (
@@ -166,7 +166,7 @@ function getCurrentPageType() {
 
 export const REPO_TYPE_PRIVATE = 'private'
 export const REPO_TYPE_PUBLIC = 'public'
-function getRepoPageType() {
+export function getRepoPageType() {
   const headerSelector = `#js-repo-pjax-container .pagehead.repohead h1`
   return $(headerSelector, header => {
     const repoPageTypes = [REPO_TYPE_PRIVATE, REPO_TYPE_PUBLIC]
@@ -182,7 +182,7 @@ function getRepoPageType() {
 /**
  * get text content of raw text content
  */
-function getCodeElement() {
+export function getCodeElement() {
   if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
     const codeContentSelector = '.repository-content .data table'
     const codeContentElement = $(codeContentSelector)
@@ -197,9 +197,9 @@ function getCodeElement() {
  * add copy file content buttons to button groups
  * click these buttons will copy file content to clipboard
  */
-function attachCopyFileBtn() {
+export function attachCopyFileBtn() {
   if (getCurrentPageType() === PAGE_TYPES.RAW_TEXT) {
-      // the button group in file content header
+    // the button group in file content header
     const buttonGroupSelector = '.repository-content > .Box > .Box-header .BtnGroup'
     const buttonGroups = document.querySelectorAll(buttonGroupSelector)
 
@@ -224,7 +224,7 @@ function attachCopyFileBtn() {
  * @param {element} element
  * @returns {boolean} whether copy is successful
  */
-function copyElementContent(element: Element) {
+export function copyElementContent(element: Element) {
   let selection = window.getSelection()
   if (selection) selection.removeAllRanges()
   const range = document.createRange()
@@ -285,7 +285,7 @@ function createClippy() {
 const clippy = createClippy()
 
 let currentCodeSnippetElement: Element
-function attachCopySnippet() {
+export function attachCopySnippet() {
   const readmeSelector = '.repository-content div#readme'
   return $(readmeSelector, () => {
     const readmeArticleSelector = '.repository-content div#readme article'
@@ -325,14 +325,14 @@ function attachCopySnippet() {
 /**
  * focus to side bar, user will be able to manipulate it with keyboard
  */
-function focusFileExplorer() {
+export function focusFileExplorer() {
   const sideBarContentSelector = '.gitako-side-bar .file-explorer'
   $(sideBarContentSelector, sideBarElement => {
     if (sideBarElement instanceof HTMLElement) sideBarElement.focus()
   })
 }
 
-function focusSearchInput() {
+export function focusSearchInput() {
   const searchInputSelector = '.search-input'
   $(searchInputSelector, searchInputElement => {
     if (
@@ -347,7 +347,7 @@ function focusSearchInput() {
 /**
  * a combination of few above functions
  */
-function decorateGitHubPageContent({
+export function decorateGitHubPageContent({
   copyFileButton,
   copySnippetButton,
 }: {
@@ -358,32 +358,10 @@ function decorateGitHubPageContent({
   if (copySnippetButton) attachCopySnippet()
 }
 
-function mountTopProgressBar() {
+export function mountTopProgressBar() {
   NProgress.start()
 }
 
-function unmountTopProgressBar() {
+export function unmountTopProgressBar() {
   NProgress.done()
 }
-
-export default {
-  loadWithPJAX,
-  attachCopyFileBtn,
-  attachCopySnippet,
-  copyElementContent,
-  decorateGitHubPageContent,
-  focusSearchInput,
-  focusFileExplorer,
-  getCodeElement,
-  getCurrentPageType,
-  getRepoPageType,
-  insertLogoMountPoint,
-  markGitakoReadyState,
-  setBodyIndent,
-  scrollToRepoContent,
-  mountTopProgressBar,
-  unmountTopProgressBar,
-  isInCodePage,
-  getBranches,
-  getCurrentBranch,
-}

From 8ed78e2a98349feff9dd3d4d5450df41bfad2230 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 01:38:02 +0800
Subject: [PATCH 06/29] refactor: abandon default export

---
 src/components/FileExplorer.tsx     | 20 +++----
 src/components/Gitako.tsx           |  4 +-
 src/components/Icon.tsx             |  6 +--
 src/components/LoadingIndicator.tsx |  4 +-
 src/components/MetaBar.tsx          |  4 +-
 src/components/Node.tsx             |  6 +--
 src/components/PJAXLink.tsx         |  2 +-
 src/components/Portal.tsx           |  4 +-
 src/components/Resizable.tsx        | 16 +++---
 src/components/ResizeHandler.tsx    |  4 +-
 src/components/SearchBar.tsx        |  4 +-
 src/components/SettingsBar.tsx      | 18 +++----
 src/components/SideBar.tsx          | 22 ++++----
 src/components/SizeObserver.tsx     |  2 +-
 src/components/ToggleShowButton.tsx |  7 +--
 src/content.tsx                     |  2 +-
 src/driver/connect.ts               |  2 +-
 src/driver/core/FileExplorer.ts     | 55 ++++++++-----------
 src/driver/core/SideBar.ts          | 84 ++++++++++-------------------
 src/driver/core/index.ts            |  7 ++-
 src/utils/GitHubHelper.ts           | 19 +++----
 src/utils/URLHelper.ts              | 18 ++-----
 src/utils/configHelper.ts           | 17 ++----
 src/utils/cx.ts                     |  2 +-
 src/utils/keyHelper.ts              |  6 +--
 src/utils/storageHelper.ts          |  9 +---
 src/utils/treeParser.ts             | 10 ++--
 src/utils/visibleNodesGenerator.ts  |  2 +-
 28 files changed, 142 insertions(+), 214 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 0caa9ec..a7b606e 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -1,17 +1,17 @@
-import LoadingIndicator from 'components/LoadingIndicator'
-import Node from 'components/Node'
-import SearchBar from 'components/SearchBar'
-import connect from 'driver/connect'
-import { FileExplorer as FileExplorerCore } from 'driver/core'
+import { LoadingIndicator } from 'components/LoadingIndicator'
+import { Node } from 'components/Node'
+import { SearchBar } from 'components/SearchBar'
+import { connect } from 'driver/connect'
+import { FileExplorerCore } from 'driver/core'
 import { ConnectorState } from 'driver/core/FileExplorer'
 import * as React from 'react'
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 import { MetaData, TreeData } from 'utils/GitHubHelper'
 import { usePrevious } from 'utils/hooks'
 import { TreeNode, VisibleNodes } from 'utils/VisibleNodesGenerator'
-import Icon from './Icon'
-import SizeObserver from './SizeObserver'
+import { Icon } from './Icon'
+import { SizeObserver } from './SizeObserver'
 
 export type Props = {
   treeData?: TreeData
@@ -22,7 +22,7 @@ export type Props = {
   toggleShowSettings: React.MouseEventHandler
 }
 
-class FileExplorer extends React.Component<Props & ConnectorState> {
+class RawFileExplorer extends React.Component<Props & ConnectorState> {
   static defaultProps: Partial<Props & ConnectorState> = {
     freeze: false,
     searchKey: '',
@@ -183,4 +183,4 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
   }
 }
 
-export default connect<Props, ConnectorState>(FileExplorerCore)(FileExplorer)
+export const FileExplorer = connect<Props, ConnectorState>(FileExplorerCore)(RawFileExplorer)
diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 5a889b2..16ba16a 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,8 +1,8 @@
 import { raiseError } from 'analytics'
-import SideBar from 'components/SideBar'
+import { SideBar } from 'components/SideBar'
 import * as React from 'react'
 
-export default class Gitako extends React.PureComponent {
+export class Gitako extends React.PureComponent {
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     raiseError(error, errorInfo)
   }
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index a128ed5..5ffd0e4 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -16,7 +16,7 @@ import Octicon, {
   X,
 } from '@primer/octicons-react'
 import * as React from 'react'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 
 function getSVGIconComponent(
   type: string,
@@ -123,7 +123,7 @@ type Props = {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void
 }
 
-const Icon: React.SFC<Props> = function Icon({ type, className = undefined, ...otherProps }) {
+export function Icon({ type, className = undefined, ...otherProps }: Props) {
   const { name, IconComponent } = getSVGIconComponent(type)
   const mergedClassName = cx('octicon', name)
   return (
@@ -135,5 +135,3 @@ const Icon: React.SFC<Props> = function Icon({ type, className = undefined, ...o
     </div>
   )
 }
-
-export default Icon
diff --git a/src/components/LoadingIndicator.tsx b/src/components/LoadingIndicator.tsx
index 20e8f5a..86bc16f 100644
--- a/src/components/LoadingIndicator.tsx
+++ b/src/components/LoadingIndicator.tsx
@@ -1,10 +1,10 @@
-import Icon from 'components/Icon'
+import { Icon } from 'components/Icon'
 import * as React from 'react'
 
 type Props = {
   text: React.ReactNode
 }
-export default function LoadingIndicator({ text }: Props) {
+export function LoadingIndicator({ text }: Props) {
   return (
     <div className={'loading-indicator-container'}>
       <div className={'loading-indicator'}>
diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index 7175272..2808240 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { MetaData } from 'utils/GitHubHelper'
 import { safeTouch } from 'safe-touch'
+import { MetaData } from 'utils/GitHubHelper'
 
 type Props = {
   metaData: MetaData
 }
 
-export default function MetaBar({ metaData }: Props) {
+export function MetaBar({ metaData }: Props) {
   const userUrl = safeTouch(metaData).api.owner.html_url()
   const repoUrl = safeTouch(metaData).api.html_url()
   return (
diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index 4641c50..70947d9 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -1,6 +1,6 @@
-import Icon from 'components/Icon'
+import { Icon } from 'components/Icon'
 import * as React from 'react'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 import { OperatingSystems, os } from 'utils/general'
 import { TreeNode } from 'utils/VisibleNodesGenerator'
 
@@ -24,7 +24,7 @@ type Props = {
   renderActions?(node: TreeNode): React.ReactNode
   style?: React.CSSProperties
 }
-export default class Node extends React.PureComponent<Props> {
+export class Node extends React.PureComponent<Props> {
   onClick: React.MouseEventHandler = event => {
     if (
       (os === OperatingSystems.macOS && event.metaKey) ||
diff --git a/src/components/PJAXLink.tsx b/src/components/PJAXLink.tsx
index 1b78927..680214e 100644
--- a/src/components/PJAXLink.tsx
+++ b/src/components/PJAXLink.tsx
@@ -6,7 +6,7 @@ type Props<P> = {
   children: React.ReactElement<P>
 }
 
-export default function PJAXLink<P>({ to, children }: Props<P>) {
+export function PJAXLink<P>({ to, children }: Props<P>) {
   return React.cloneElement(children, {
     ...children.props,
     onClick: () => DOMHelper.loadWithPJAX(to),
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 04ebd72..3a8cd3e 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -5,12 +5,10 @@ type Props = {
   into: Element | null
 }
 
-class Portal extends React.PureComponent<Props> {
+export class Portal extends React.PureComponent<Props> {
   render() {
     const { into, children } = this.props
     if (!(into instanceof Element)) return null
     return ReactDOM.createPortal(children, into)
   }
 }
-
-export default Portal
diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index 39133fb..b14f40a 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -1,10 +1,10 @@
+import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import * as React from 'react'
-import HorizontalResizeHandler from 'components/ResizeHandler'
-import cx from 'utils/cx'
-import { useWindowSize, useMediaStyleSheet } from 'utils/hooks'
+import { configKeys, setOne } from 'utils/configHelper'
+import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
-import configHelper, { configKeys } from 'utils/configHelper'
 import * as features from 'utils/features'
+import { useMediaStyleSheet, useWindowSize } from 'utils/hooks'
 
 export type Size = number
 type Props = {
@@ -15,11 +15,7 @@ type Props = {
 const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
 const GITHUB_WIDTH = 1020
 
-export default function Resizable({
-  baseSize,
-  className,
-  children,
-}: React.PropsWithChildren<Props>) {
+export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
 
   React.useEffect(() => {
@@ -36,7 +32,7 @@ export default function Resizable({
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
-    configHelper.setOne(configKeys.sideBarWidth, size)
+    setOne(configKeys.sideBarWidth, size)
   }, [size])
 
   useMediaStyleSheet(
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index 9886d13..d49e562 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import { Icon } from 'components/Icon'
 import * as React from 'react'
 import { Size } from './Resizable'
 
@@ -8,7 +8,7 @@ type Props = {
   style?: React.CSSProperties
 }
 
-export default class HorizontalResizeHandler extends React.PureComponent<Props> {
+export class HorizontalResizeHandler extends React.PureComponent<Props> {
   pointerDown = false
   startX = 0
   baseSize = this.props.size
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 252b63a..f69895d 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 
 type Props = {
   onSearch: (searchKey: string) => void
@@ -7,7 +7,7 @@ type Props = {
   searchKey: string
 }
 
-export default function SearchBar({ onSearch, onFocus, searchKey }: Props) {
+export function SearchBar({ onSearch, onFocus, searchKey }: Props) {
   return (
     <div className={'search-input-wrapper'}>
       <input
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 1aa686d..8f8a57d 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -1,10 +1,10 @@
 import { raiseError } from 'analytics'
-import Icon from 'components/Icon'
+import { Icon } from 'components/Icon'
 import { oauth } from 'env'
 import * as React from 'react'
-import configHelper, { Config, configKeys } from 'utils/configHelper'
+import { Config, configKeys, setOne } from 'utils/configHelper'
 import { friendlyFormatShortcut, JSONRequest, parseURLSearch } from 'utils/general'
-import keyHelper from 'utils/keyHelper'
+import * as keyHelper from 'utils/keyHelper'
 import { version } from '../../package.json'
 
 const WIKI_HOME_LINK = 'https://github.com/EnixCoda/Gitako/wiki'
@@ -50,7 +50,7 @@ type State = {
   }[]
 }
 
-export default class SettingsBar extends React.PureComponent<Props, State> {
+export class SettingsBar extends React.PureComponent<Props, State> {
   state = {
     accessToken: '',
     accessTokenHint: '',
@@ -91,7 +91,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
         onChange: async (e: React.FormEvent<HTMLInputElement>) => {
           const { checked } = e.currentTarget
           const intelligentToggle = checked ? null : true
-          await configHelper.setOne(configKeys.intelligentToggle, intelligentToggle)
+          await setOne(configKeys.intelligentToggle, intelligentToggle)
           this.props.setIntelligentToggle(intelligentToggle)
         },
         getValue: () => this.props.intelligentToggle === null,
@@ -159,7 +159,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
     const { onAccessTokenChange } = this.props
     const { accessToken } = this.state
     if (accessToken) {
-      await configHelper.setOne(configKeys.accessToken, accessToken)
+      await setOne(configKeys.accessToken, accessToken)
       onAccessTokenChange(accessToken)
       this.setState({
         accessToken: '',
@@ -170,7 +170,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
 
   clearToken = async () => {
     const { onAccessTokenChange } = this.props
-    await configHelper.setOne(configKeys.accessToken, '')
+    await setOne(configKeys.accessToken, '')
     onAccessTokenChange('')
     this.setState({ accessToken: '' })
   }
@@ -178,7 +178,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
   saveShortcut = async () => {
     const { onShortcutChange } = this.props
     const { toggleShowSideBarShortcut } = this.state
-    await configHelper.setOne(configKeys.shortcut, toggleShowSideBarShortcut)
+    await setOne(configKeys.shortcut, toggleShowSideBarShortcut)
     if (typeof toggleShowSideBarShortcut === 'string') {
       onShortcutChange(toggleShowSideBarShortcut)
       this.setState({
@@ -214,7 +214,7 @@ export default class SettingsBar extends React.PureComponent<Props, State> {
   ): (e: React.FormEvent<HTMLInputElement>) => Promise<void> {
     return async e => {
       const enabled = e.currentTarget.checked
-      await configHelper.setOne(configKey, enabled)
+      await setOne(configKey, enabled)
       set(enabled)
       this.showReloadHint()
     }
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 781ac8d..b39ac59 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,18 +1,18 @@
-import FileExplorer from 'components/FileExplorer'
-import MetaBar from 'components/MetaBar'
-import Portal from 'components/Portal'
-import Resizable from 'components/Resizable'
-import SettingsBar from 'components/SettingsBar'
-import ToggleShowButton from 'components/ToggleShowButton'
-import connect from 'driver/connect'
-import { SideBar as SideBarCore } from 'driver/core'
+import { FileExplorer } from 'components/FileExplorer'
+import { MetaBar } from 'components/MetaBar'
+import { Portal } from 'components/Portal'
+import { Resizable } from 'components/Resizable'
+import { SettingsBar } from 'components/SettingsBar'
+import { ToggleShowButton } from 'components/ToggleShowButton'
+import { connect } from 'driver/connect'
+import { SideBarCore } from 'driver/core'
 import { ConnectorState } from 'driver/core/SideBar'
 import * as React from 'react'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 
 export type Props = {}
 
-class Gitako extends React.PureComponent<Props & ConnectorState> {
+class RawGitako extends React.PureComponent<Props & ConnectorState> {
   static defaultProps: Partial<Props & ConnectorState> = {
     baseSize: 260,
     shouldShow: false,
@@ -147,4 +147,4 @@ class Gitako extends React.PureComponent<Props & ConnectorState> {
   }
 }
 
-export default connect<Props, ConnectorState>(SideBarCore)(Gitako)
+export const SideBar = connect<Props, ConnectorState>(SideBarCore)(RawGitako)
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index c3c443c..4b394c4 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -11,7 +11,7 @@ type Props = {
   children(size: Partial<Size>): React.ReactNode
 } & React.HTMLAttributes<HTMLElement>
 
-export default function SizeObserver({ type = 'div', children, ...rest }: Props) {
+export function SizeObserver({ type = 'div', children, ...rest }: Props) {
   const ref = React.useRef<any>()
 
   const [size, setSize] = React.useState<Partial<Size>>({
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index fa45455..219b06d 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -1,13 +1,14 @@
+import { Icon } from 'components/Icon'
 import * as React from 'react'
-import Icon from 'components/Icon'
-import cx from 'utils/cx'
+import { cx } from 'utils/cx'
 
 type Props = {
   error?: string
   shouldShow: boolean
   toggleShowSideBar: React.MouseEventHandler
 }
-export default function Logo({ error, shouldShow, toggleShowSideBar }: Props) {
+
+export function ToggleShowButton({ error, shouldShow, toggleShowSideBar }: Props) {
   return (
     <div
       className={cx('gitako-toggle-show-button-wrapper', {
diff --git a/src/content.tsx b/src/content.tsx
index 3ba5177..c9eb923 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,5 +1,5 @@
 import { withErrorLog } from 'analytics'
-import Gitako from 'components/Gitako'
+import { Gitako } from 'components/Gitako'
 import { addMiddleware } from 'driver/connect'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
diff --git a/src/driver/connect.ts b/src/driver/connect.ts
index 7eec449..e73308a 100644
--- a/src/driver/connect.ts
+++ b/src/driver/connect.ts
@@ -93,7 +93,7 @@ function link<P, S>(instance: React.Component<P, S>, sources: Sources<P, S>): Wr
   return wrappedMethods
 }
 
-export default function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>) {
+export function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>) {
   return function linkComponent<S>(
     ComponentClass: React.ComponentClass<BaseP & ExtraP, S>,
   ): React.ComponentClass<BaseP, ExtraP> {
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index 60489cb..ba82b9d 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -4,10 +4,11 @@ import * as ini from 'ini'
 import { Base64 } from 'js-base64'
 import * as DOMHelper from 'utils/DOMHelper'
 import { findNode, searchKeyToRegexps } from 'utils/general'
-import GitHubHelper, { BlobData } from 'utils/GitHubHelper'
-import treeParser from 'utils/treeParser'
-import URLHelper from 'utils/URLHelper'
-import VisibleNodesGenerator, { TreeNode, VisibleNodes } from 'utils/VisibleNodesGenerator'
+import * as GitHubHelper from 'utils/GitHubHelper'
+import { BlobData } from 'utils/GitHubHelper'
+import * as treeParser from 'utils/treeParser'
+import * as URLHelper from 'utils/URLHelper'
+import { TreeNode, VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
 export type ConnectorState = {
   stateText: string
@@ -49,7 +50,7 @@ let visibleNodesGenerator: VisibleNodesGenerator
 
 type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
 
-const init: BoundMethodCreator = dispatch => () =>
+export const init: BoundMethodCreator = dispatch => () =>
   dispatch.call(setStateText, 'Fetching File List...')
 
 const githubSubModuleURLRegex = {
@@ -127,7 +128,7 @@ function handleParsed(root: TreeNode, parsed: Parsed) {
   })
 }
 
-const setUpTree: BoundMethodCreator<
+export const setUpTree: BoundMethodCreator<
   [Pick<Props, 'treeData' | 'metaData' | 'compressSingletonFolder' | 'accessToken'>]
 > = dispatch => async ({ treeData, metaData, compressSingletonFolder, accessToken }) => {
   if (!treeData) return
@@ -158,21 +159,21 @@ const setUpTree: BoundMethodCreator<
   dispatch.call(goTo, URLHelper.getCurrentPath(metaData.branchName))
 }
 
-const execAfterRender: BoundMethodCreator = dispatch => () => {
+export const execAfterRender: BoundMethodCreator = dispatch => () => {
   for (const task of tasksAfterRender) {
     task()
   }
   tasksAfterRender.length = 0
 }
 
-const setStateText: BoundMethodCreator<[ConnectorState['stateText']]> = dispatch => (
+export const setStateText: BoundMethodCreator<[ConnectorState['stateText']]> = dispatch => (
   text: string,
 ) =>
   dispatch.set({
     stateText: text,
   })
 
-const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
+export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
   const { searched, visibleNodes } = dispatch.get()
   if (!visibleNodes) return
   const { nodes, focusedNode, expandedNodes, depths } = visibleNodes
@@ -277,16 +278,17 @@ const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => eve
   }
 }
 
-const onFocusSearchBar: BoundMethodCreator = dispatch => () => dispatch.call(focusNode, null, false)
+export const onFocusSearchBar: BoundMethodCreator = dispatch => () =>
+  dispatch.call(focusNode, null, false)
 
-const search: BoundMethodCreator<[string]> = dispatch => searchKey => {
+export const search: BoundMethodCreator<[string]> = dispatch => searchKey => {
   dispatch.set({ searchKey, searched: searchKey !== '' })
   const regexps = searchKeyToRegexps(searchKey)
   visibleNodesGenerator.search(regexps)
   dispatch.call(updateVisibleNodes)
 }
 
-const goTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => {
+export const goTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => {
   visibleNodesGenerator.search([])
   tasksAfterRender.push(() => {
     const nodeExpandedTo = visibleNodesGenerator.expandTo(currentPath.join('/'))
@@ -298,12 +300,15 @@ const goTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => {
   dispatch.set({ searchKey: '', searched: false })
 }
 
-const setExpand: BoundMethodCreator<[TreeNode, boolean]> = dispatch => (node, expand = false) => {
+export const setExpand: BoundMethodCreator<[TreeNode, boolean]> = dispatch => (
+  node,
+  expand = false,
+) => {
   visibleNodesGenerator.setExpand(node, expand)
   dispatch.call(focusNode, node, false)
 }
 
-const toggleNodeExpansion: BoundMethodCreator<[TreeNode, boolean]> = dispatch => (
+export const toggleNodeExpansion: BoundMethodCreator<[TreeNode, boolean]> = dispatch => (
   node,
   skipScrollToNode,
 ) => {
@@ -312,7 +317,7 @@ const toggleNodeExpansion: BoundMethodCreator<[TreeNode, boolean]> = dispatch =>
   tasksAfterRender.push(DOMHelper.focusFileExplorer)
 }
 
-const focusNode: BoundMethodCreator<[TreeNode | null, boolean]> = dispatch => (
+export const focusNode: BoundMethodCreator<[TreeNode | null, boolean]> = dispatch => (
   node: TreeNode | null,
   skipScroll = false,
 ) => {
@@ -322,7 +327,7 @@ const focusNode: BoundMethodCreator<[TreeNode | null, boolean]> = dispatch => (
   dispatch.call(updateVisibleNodes)
 }
 
-const onNodeClick: BoundMethodCreator<[TreeNode]> = dispatch => node => {
+export const onNodeClick: BoundMethodCreator<[TreeNode]> = dispatch => node => {
   if (node.type === 'tree') {
     dispatch.call(toggleNodeExpansion, node, true)
   } else if (node.type === 'blob') {
@@ -335,23 +340,7 @@ const onNodeClick: BoundMethodCreator<[TreeNode]> = dispatch => node => {
   }
 }
 
-const updateVisibleNodes: BoundMethodCreator = dispatch => () => {
+export const updateVisibleNodes: BoundMethodCreator = dispatch => () => {
   const { visibleNodes } = visibleNodesGenerator
   dispatch.set({ visibleNodes })
 }
-
-export default {
-  init,
-  setUpTree,
-  execAfterRender,
-  setStateText,
-  handleKeyDown,
-  onFocusSearchBar,
-  search,
-  setExpand,
-  goTo,
-  toggleNodeExpansion,
-  focusNode,
-  onNodeClick,
-  updateVisibleNodes,
-}
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 15b9ecf..93e0347 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,18 +1,12 @@
 import { Props } from 'components/SideBar'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
-import configHelper, { Config, configKeys } from 'utils/configHelper'
+import * as configHelper from 'utils/configHelper'
+import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
-import GitHubHelper, {
-  API_RATE_LIMIT,
-  BAD_CREDENTIALS,
-  BLOCKED_PROJECT,
-  EMPTY_PROJECT,
-  MetaData,
-  NOT_FOUND,
-  TreeData,
-} from 'utils/GitHubHelper'
-import keyHelper from 'utils/keyHelper'
-import URLHelper from 'utils/URLHelper'
+import * as GitHubHelper from 'utils/GitHubHelper'
+import { MetaData, TreeData } from 'utils/GitHubHelper'
+import * as keyHelper from 'utils/keyHelper'
+import * as URLHelper from 'utils/URLHelper'
 
 export type ConnectorState = {
   // error message
@@ -54,7 +48,7 @@ export type ConnectorState = {
 
 type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
 
-const init: BoundMethodCreator = dispatch => async () => {
+export const init: BoundMethodCreator = dispatch => async () => {
   const { initializingPromise } = dispatch.get()
   if (initializingPromise) await initializingPromise
 
@@ -159,15 +153,15 @@ const init: BoundMethodCreator = dispatch => async () => {
   }
 }
 
-const handleError: BoundMethodCreator<[Error]> = dispatch => async err => {
-  if (err.message === EMPTY_PROJECT) {
+export const handleError: BoundMethodCreator<[Error]> = dispatch => async err => {
+  if (err.message === GitHubHelper.EMPTY_PROJECT) {
     dispatch.call(setError, 'This project seems to be empty.')
-  } else if (err.message === BLOCKED_PROJECT) {
+  } else if (err.message === GitHubHelper.BLOCKED_PROJECT) {
     dispatch.call(setError, 'This project is blocked.')
   } else if (
-    err.message === NOT_FOUND ||
-    err.message === BAD_CREDENTIALS ||
-    err.message === API_RATE_LIMIT
+    err.message === GitHubHelper.NOT_FOUND ||
+    err.message === GitHubHelper.BAD_CREDENTIALS ||
+    err.message === GitHubHelper.API_RATE_LIMIT
   ) {
     dispatch.set({ errorDueToAuth: true })
     dispatch.call(setShowSettings, true)
@@ -179,7 +173,7 @@ const handleError: BoundMethodCreator<[Error]> = dispatch => async err => {
   }
 }
 
-const onPJAXEnd: BoundMethodCreator = dispatch => () => {
+export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
   const { metaData, copyFileButton, copySnippetButton, intelligentToggle } = dispatch.get()
   DOMHelper.unmountTopProgressBar()
   DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
@@ -191,7 +185,7 @@ const onPJAXEnd: BoundMethodCreator = dispatch => () => {
   }
 }
 
-const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
+export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
   const { toggleShowSideBarShortcut } = dispatch.get()
   if (toggleShowSideBarShortcut) {
     const keys = keyHelper.parseEvent(e)
@@ -201,7 +195,7 @@ const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
   }
 }
 
-const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
+export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
   const { intelligentToggle } = dispatch.get()
   const shouldShow = !dispatch.get().shouldShow
   dispatch.call(setShouldShow, shouldShow)
@@ -211,28 +205,28 @@ const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
   }
 }
 
-const setShouldShow: BoundMethodCreator<
+export const setShouldShow: BoundMethodCreator<
   [ConnectorState['shouldShow']]
 > = dispatch => shouldShow => {
   dispatch.set({ shouldShow }, shouldShow ? DOMHelper.focusFileExplorer : undefined)
   DOMHelper.setBodyIndent(shouldShow)
 }
 
-const setError: BoundMethodCreator<[ConnectorState['error']]> = dispatch => error => {
+export const setError: BoundMethodCreator<[ConnectorState['error']]> = dispatch => error => {
   dispatch.set({ error })
   dispatch.call(setShouldShow, false)
 }
 
-const toggleShowSettings: BoundMethodCreator = dispatch => () =>
+export const toggleShowSettings: BoundMethodCreator = dispatch => () =>
   dispatch.set(({ showSettings }) => ({
     showSettings: !showSettings,
   }))
 
-const setShowSettings: BoundMethodCreator<
+export const setShowSettings: BoundMethodCreator<
   [ConnectorState['showSettings']]
 > = dispatch => showSettings => dispatch.set({ showSettings })
 
-const onAccessTokenChange: BoundMethodCreator<
+export const onAccessTokenChange: BoundMethodCreator<
   [ConnectorState['accessToken']]
 > = dispatch => accessToken => {
   dispatch.set({ accessToken })
@@ -242,33 +236,33 @@ const onAccessTokenChange: BoundMethodCreator<
   }
 }
 
-const onShortcutChange: BoundMethodCreator<
+export const onShortcutChange: BoundMethodCreator<
   [ConnectorState['toggleShowSideBarShortcut']]
 > = dispatch => shortcut => dispatch.set({ toggleShowSideBarShortcut: shortcut })
 
-const setMetaData: BoundMethodCreator<[ConnectorState['metaData']]> = dispatch => metaData =>
+export const setMetaData: BoundMethodCreator<[ConnectorState['metaData']]> = dispatch => metaData =>
   dispatch.set({ metaData })
 
-const setCompressSingleton: BoundMethodCreator<
+export const setCompressSingleton: BoundMethodCreator<
   [ConnectorState['compressSingletonFolder']]
 > = dispatch => compressSingletonFolder => dispatch.set({ compressSingletonFolder })
 
-const setCopyFile: BoundMethodCreator<
+export const setCopyFile: BoundMethodCreator<
   [ConnectorState['copyFileButton']]
 > = dispatch => copyFileButton => dispatch.set({ copyFileButton })
 
-const setCopySnippet: BoundMethodCreator<
+export const setCopySnippet: BoundMethodCreator<
   [ConnectorState['copySnippetButton']]
 > = dispatch => copySnippetButton => dispatch.set({ copySnippetButton })
 
-const setIntelligentToggle: BoundMethodCreator<
+export const setIntelligentToggle: BoundMethodCreator<
   [ConnectorState['intelligentToggle']]
 > = dispatch => intelligentToggle => {
-  configHelper.setOne(configKeys.intelligentToggle, intelligentToggle)
+  configHelper.setOne(configHelper.configKeys.intelligentToggle, intelligentToggle)
   dispatch.set({ intelligentToggle })
 }
 
-const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
+export const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
   const $onPJAXEnd = () => dispatch.call(onPJAXEnd)
   const $onKeyDown = (e: KeyboardEvent) => dispatch.call(onKeyDown, e)
   return on => {
@@ -282,23 +276,3 @@ const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
     }
   }
 }
-
-export default {
-  init,
-  onPJAXEnd,
-  onKeyDown,
-  setShouldShow,
-  setShowSettings,
-  toggleShowSideBar,
-  toggleShowSettings,
-  onAccessTokenChange,
-  onShortcutChange,
-  setMetaData,
-  setCompressSingleton,
-  setCopyFile,
-  setCopySnippet,
-  setIntelligentToggle,
-  setError,
-  handleError,
-  useListeners,
-}
diff --git a/src/driver/core/index.ts b/src/driver/core/index.ts
index 071ab89..0ba5dda 100644
--- a/src/driver/core/index.ts
+++ b/src/driver/core/index.ts
@@ -1,2 +1,5 @@
-export { default as SideBar } from './SideBar'
-export { default as FileExplorer } from './FileExplorer'
+import * as FileExplorer from './FileExplorer'
+import * as SideBar from './SideBar'
+
+export const SideBarCore = SideBar
+export const FileExplorerCore = FileExplorer
diff --git a/src/utils/GitHubHelper.ts b/src/utils/GitHubHelper.ts
index 42cbf54..140e8b8 100644
--- a/src/utils/GitHubHelper.ts
+++ b/src/utils/GitHubHelper.ts
@@ -70,7 +70,11 @@ type RepoMetaData = {
   }
 }
 
-async function getRepoMeta({ userName, repoName, accessToken }: MetaData): Promise<RepoMetaData> {
+export async function getRepoMeta({
+  userName,
+  repoName,
+  accessToken,
+}: MetaData): Promise<RepoMetaData> {
   const url = `https://api.github.com/repos/${userName}/${repoName}`
   return await request(url, { accessToken })
 }
@@ -91,7 +95,7 @@ export type TreeData = {
   url: string
 }
 
-async function getTreeData({
+export async function getTreeData({
   userName,
   repoName,
   branchName,
@@ -109,7 +113,7 @@ export type BlobData = {
   url: string
 }
 
-async function getBlobData({
+export async function getBlobData({
   userName,
   repoName,
   accessToken,
@@ -121,17 +125,10 @@ async function getBlobData({
   return await request(url, { accessToken })
 }
 
-function getUrlForRedirect(
+export function getUrlForRedirect(
   { userName, repoName, branchName }: MetaData,
   type = 'blob',
   path?: string,
 ) {
   return `https://github.com/${userName}/${repoName}/${type}/${branchName}/${path}`
 }
-
-export default {
-  getRepoMeta,
-  getTreeData,
-  getBlobData,
-  getUrlForRedirect,
-}
diff --git a/src/utils/URLHelper.ts b/src/utils/URLHelper.ts
index 2e2cac6..6d515bb 100644
--- a/src/utils/URLHelper.ts
+++ b/src/utils/URLHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { MetaData } from './GitHubHelper'
 
-function parse(): MetaData & { path: string[] } {
+export function parse(): MetaData & { path: string[] } {
   const { pathname } = window.location
   let [
     ,
@@ -19,12 +19,12 @@ function parse(): MetaData & { path: string[] } {
   }
 }
 
-function parseSHA() {
+export function parseSHA() {
   const { type, path } = parse()
   return type === 'blob' || type === 'tree' ? path[0] : undefined
 }
 
-function isInRepoPage() {
+export function isInRepoPage() {
   const repoHeaderSelector = '.repohead'
   return Boolean(document.querySelector(repoHeaderSelector))
 }
@@ -38,7 +38,7 @@ const TYPES = {
   // TODO: record more types
 }
 
-function isInCodePage(metaData: MetaData = {}) {
+export function isInCodePage(metaData: MetaData = {}) {
   const mergedRepo = { ...parse(), ...metaData }
   const { type, branchName } = mergedRepo
   return Boolean(
@@ -57,7 +57,7 @@ function isCompleteCommitSHA(sha?: string) {
   return typeof sha === 'string' && /^[abcdef0-9]{40}$/i.test(sha)
 }
 
-function getCurrentPath(branchName = '') {
+export function getCurrentPath(branchName = '') {
   const { path, type } = parse()
   if (type === 'blob' || type === 'tree') {
     if (isCommitPath(path)) {
@@ -90,11 +90,3 @@ function getCurrentPath(branchName = '') {
   }
   return []
 }
-
-export default {
-  getCurrentPath,
-  isInRepoPage,
-  isInCodePage,
-  parse,
-  parseSHA,
-}
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index 9a84d91..9e093ac 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -1,4 +1,4 @@
-import storageHelper from 'utils/storageHelper'
+import * as storageHelper from 'utils/storageHelper'
 
 export type Config = {
   sideBarWidth: number
@@ -43,27 +43,20 @@ function applyDefaultConfigs(configs: Config) {
   )
 }
 
-async function getAll(): Promise<Config> {
+export async function getAll(): Promise<Config> {
   return applyDefaultConfigs(await storageHelper.get(configKeyArray))
 }
 
-async function getOne(key: configKeys) {
+export async function getOne(key: configKeys) {
   return (await getAll())[key]
 }
 
-async function setAll(partialConfig: Partial<Config>) {
+export async function setAll(partialConfig: Partial<Config>) {
   return await storageHelper.set(partialConfig)
 }
 
-async function setOne(key: configKeys, value: any) {
+export async function setOne(key: configKeys, value: any) {
   return await setAll({
     [key]: value,
   })
 }
-
-export default {
-  getAll,
-  getOne,
-  setAll,
-  setOne,
-}
diff --git a/src/utils/cx.ts b/src/utils/cx.ts
index be8031f..179b6d3 100644
--- a/src/utils/cx.ts
+++ b/src/utils/cx.ts
@@ -1,7 +1,7 @@
 /**
  * cx('class1', { class2: true, class3: false }) --> 'class1 class2'
  */
-export default function cx(...classNames: any[]): string {
+export function cx(...classNames: any[]): string {
   return classNames
     .filter(Boolean)
     .map(className => {
diff --git a/src/utils/keyHelper.ts b/src/utils/keyHelper.ts
index a06850c..3394516 100644
--- a/src/utils/keyHelper.ts
+++ b/src/utils/keyHelper.ts
@@ -36,7 +36,7 @@ function parseKeyCode(code: string) {
   return code.toLowerCase().replace(/^control$/, 'ctrl')
 }
 
-function parseEvent(e: KeyboardEvent | React.KeyboardEvent) {
+export function parseEvent(e: KeyboardEvent | React.KeyboardEvent) {
   const { altKey: alt, shiftKey: shift, metaKey: meta, ctrlKey: ctrl } = e
   try {
     const code = parseKeyCode(e.key)
@@ -57,7 +57,3 @@ function parseEvent(e: KeyboardEvent | React.KeyboardEvent) {
     throw new Error(`Error parse keyboard event: ${serializedKeyData}`)
   }
 }
-
-export default {
-  parseEvent,
-}
diff --git a/src/utils/storageHelper.ts b/src/utils/storageHelper.ts
index 6f62d20..8c52640 100644
--- a/src/utils/storageHelper.ts
+++ b/src/utils/storageHelper.ts
@@ -1,14 +1,9 @@
 const localStorage = browser.storage.local
 
-function get(mapping: string[] | null): Promise<any> {
+export function get(mapping: string[] | null): Promise<any> {
   return localStorage.get(mapping || undefined)
 }
 
-function set(value: any): Promise<void> {
+export function set(value: any): Promise<void> {
   return localStorage.set(value)
 }
-
-export default {
-  get,
-  set,
-}
diff --git a/src/utils/treeParser.ts b/src/utils/treeParser.ts
index 0e64998..db9dd8d 100644
--- a/src/utils/treeParser.ts
+++ b/src/utils/treeParser.ts
@@ -1,4 +1,4 @@
-import GitHubHelper, { MetaData, TreeData } from 'utils/GitHubHelper'
+import { getUrlForRedirect, MetaData, TreeData } from 'utils/GitHubHelper'
 import { TreeNode } from './VisibleNodesGenerator'
 
 interface RawItem {
@@ -36,7 +36,7 @@ function findGitModules(root: TreeNode) {
   return null
 }
 
-function parse(treeData: TreeData, metaData: MetaData) {
+export function parse(treeData: TreeData, metaData: MetaData) {
   const { tree } = treeData
 
   // nodes are created from items and put onto tree
@@ -70,7 +70,7 @@ function parse(treeData: TreeData, metaData: MetaData) {
         name: item.path && item.path.replace(/^.*\//, ''),
         url:
           item.url && item.type && item.path
-            ? GitHubHelper.getUrlForRedirect(metaData, item.type, item.path)
+            ? getUrlForRedirect(metaData, item.type, item.path)
             : null,
         contents: item.type === 'tree' ? [] : null,
       } as TreeNode
@@ -88,7 +88,3 @@ function parse(treeData: TreeData, metaData: MetaData) {
     root: sortFoldersToFront(root),
   }
 }
-
-export default {
-  parse,
-}
diff --git a/src/utils/visibleNodesGenerator.ts b/src/utils/visibleNodesGenerator.ts
index 5212889..bc8dc9e 100644
--- a/src/utils/visibleNodesGenerator.ts
+++ b/src/utils/visibleNodesGenerator.ts
@@ -202,7 +202,7 @@ type Options = {
   compress?: boolean
 }
 
-export default class VisibleNodesGenerator {
+export class VisibleNodesGenerator {
   l1: L1
   l2: L2
   l3: L3

From 570ab3915eab9d69380d0c71b08fe4e0b0e52c4c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 13:28:51 +0800
Subject: [PATCH 07/29] refactor: move Props

---
 src/components/FileExplorer.tsx | 14 ++------------
 src/components/SideBar.tsx      |  6 ++----
 src/driver/connect.ts           |  2 +-
 src/driver/core/FileExplorer.ts | 10 +++++++++-
 src/driver/core/SideBar.ts      |  3 ++-
 src/driver/core/index.ts        | 10 ++++++++--
 6 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index a7b606e..e0e2b35 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -3,25 +3,15 @@ import { Node } from 'components/Node'
 import { SearchBar } from 'components/SearchBar'
 import { connect } from 'driver/connect'
 import { FileExplorerCore } from 'driver/core'
-import { ConnectorState } from 'driver/core/FileExplorer'
+import { ConnectorState, Props } from 'driver/core/FileExplorer'
 import * as React from 'react'
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
 import { cx } from 'utils/cx'
-import { MetaData, TreeData } from 'utils/GitHubHelper'
 import { usePrevious } from 'utils/hooks'
 import { TreeNode, VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { Icon } from './Icon'
 import { SizeObserver } from './SizeObserver'
 
-export type Props = {
-  treeData?: TreeData
-  metaData: MetaData
-  freeze: boolean
-  compressSingletonFolder: boolean
-  accessToken: string | undefined
-  toggleShowSettings: React.MouseEventHandler
-}
-
 class RawFileExplorer extends React.Component<Props & ConnectorState> {
   static defaultProps: Partial<Props & ConnectorState> = {
     freeze: false,
@@ -183,4 +173,4 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
   }
 }
 
-export const FileExplorer = connect<Props, ConnectorState>(FileExplorerCore)(RawFileExplorer)
+export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index b39ac59..f7f16e7 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -6,12 +6,10 @@ import { SettingsBar } from 'components/SettingsBar'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { connect } from 'driver/connect'
 import { SideBarCore } from 'driver/core'
-import { ConnectorState } from 'driver/core/SideBar'
+import { ConnectorState, Props } from 'driver/core/SideBar'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 
-export type Props = {}
-
 class RawGitako extends React.PureComponent<Props & ConnectorState> {
   static defaultProps: Partial<Props & ConnectorState> = {
     baseSize: 260,
@@ -147,4 +145,4 @@ class RawGitako extends React.PureComponent<Props & ConnectorState> {
   }
 }
 
-export const SideBar = connect<Props, ConnectorState>(SideBarCore)(RawGitako)
+export const SideBar = connect(SideBarCore)(RawGitako)
diff --git a/src/driver/connect.ts b/src/driver/connect.ts
index e73308a..66933a3 100644
--- a/src/driver/connect.ts
+++ b/src/driver/connect.ts
@@ -47,7 +47,7 @@ export type MethodCreator<Props, State, Args extends any[] = []> = (
   dispatch: Dispatch<Props, State>,
 ) => Method<Args>
 
-type Sources<P, S> = {
+export type Sources<P, S> = {
   [key: string]: MethodCreator<P, S, any>
 }
 type WrappedMethods = {
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index ba82b9d..307a494 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -1,4 +1,3 @@
-import { Props } from 'components/FileExplorer'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import * as ini from 'ini'
 import { Base64 } from 'js-base64'
@@ -10,6 +9,15 @@ import * as treeParser from 'utils/treeParser'
 import * as URLHelper from 'utils/URLHelper'
 import { TreeNode, VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
+export type Props = {
+  treeData?: GitHubHelper.TreeData
+  metaData: GitHubHelper.MetaData
+  freeze: boolean
+  compressSingletonFolder: boolean
+  accessToken: string | undefined
+  toggleShowSettings: React.MouseEventHandler
+}
+
 export type ConnectorState = {
   stateText: string
   visibleNodes: VisibleNodes | null
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 93e0347..410e86a 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,4 +1,3 @@
-import { Props } from 'components/SideBar'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import * as configHelper from 'utils/configHelper'
 import { Config } from 'utils/configHelper'
@@ -8,6 +7,8 @@ import { MetaData, TreeData } from 'utils/GitHubHelper'
 import * as keyHelper from 'utils/keyHelper'
 import * as URLHelper from 'utils/URLHelper'
 
+export type Props = {}
+
 export type ConnectorState = {
   // error message
   error?: string
diff --git a/src/driver/core/index.ts b/src/driver/core/index.ts
index 0ba5dda..4eb403b 100644
--- a/src/driver/core/index.ts
+++ b/src/driver/core/index.ts
@@ -1,5 +1,11 @@
+import { Sources } from 'driver/connect'
 import * as FileExplorer from './FileExplorer'
+import {
+  ConnectorState as FileExplorerConnectorState,
+  Props as FileExplorerProps,
+} from './FileExplorer'
 import * as SideBar from './SideBar'
+import { ConnectorState as SideBarConnectorState, Props as SideBarProps } from './SideBar'
 
-export const SideBarCore = SideBar
-export const FileExplorerCore = FileExplorer
+export const FileExplorerCore: Sources<FileExplorerProps, FileExplorerConnectorState> = FileExplorer
+export const SideBarCore: Sources<SideBarProps, SideBarConnectorState> = SideBar

From 9f4e2b51e0a9d85e3785757a757057ba08fbba01 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 9 Nov 2019 13:59:20 +0800
Subject: [PATCH 08/29] refactor: enhance connect

---
 src/driver/connect.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/driver/connect.ts b/src/driver/connect.ts
index 66933a3..b061f31 100644
--- a/src/driver/connect.ts
+++ b/src/driver/connect.ts
@@ -94,19 +94,20 @@ function link<P, S>(instance: React.Component<P, S>, sources: Sources<P, S>): Wr
 }
 
 export function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>) {
-  return function linkComponent<S>(
-    ComponentClass: React.ComponentClass<BaseP & ExtraP, S>,
-  ): React.ComponentClass<BaseP, ExtraP> {
-    return class AwesomeApp extends React.PureComponent<BaseP, ExtraP> {
-      static displayName = `Connected(${ComponentClass.displayName || ComponentClass.name})`
-      static defaultProps = ComponentClass.defaultProps
+  return function linkComponent<
+    State,
+    ComponentClass extends React.ComponentClass<BaseP & ExtraP, State>
+  >(Component: ComponentClass) {
+    return class ConnectedComponent extends React.PureComponent<BaseP, ExtraP, State> {
+      static displayName = `Connected(${Component.displayName || Component.name})`
+      static defaultProps = Component.defaultProps
 
-      state = {} as ExtraP
-      connectedMethods = link<BaseP, ExtraP>(this, mapping) as WrappedMethods
+      state: ExtraP = {} as ExtraP
+      connectedMethods: WrappedMethods = link<BaseP, ExtraP>(this, mapping)
 
       render() {
         const props = Object.assign({}, this.props, this.connectedMethods, this.state)
-        return React.createElement(ComponentClass, props)
+        return React.createElement(Component, props)
       }
     }
   }

From 79c1c82b65e5f539d2c37749d0865d074a529809 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 15:06:53 +0800
Subject: [PATCH 09/29] refactor: remove warnings

---
 src/components/FileExplorer.tsx  | 16 ++-----
 src/components/Node.tsx          | 72 ++++++++++++++--------------
 src/components/Portal.tsx        | 10 ++--
 src/components/ResizeHandler.tsx | 81 +++++++++++++++-----------------
 src/components/SettingsBar.tsx   |  4 +-
 src/components/SideBar.tsx       |  8 +---
 src/components/SizeObserver.tsx  | 20 ++++----
 src/utils/DOMHelper.ts           |  2 +-
 8 files changed, 98 insertions(+), 115 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index e0e2b35..8f4bb73 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -19,25 +19,19 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
     visibleNodes: null,
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { init, setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
     init()
     setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
-  }
-
-  componentDidMount() {
     const { execAfterRender } = this.props
     execAfterRender()
   }
 
-  componentWillReceiveProps(nextProps: Props & ConnectorState) {
-    if (nextProps.treeData !== this.props.treeData) {
-      const { setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = nextProps
+  componentDidUpdate(prevProps: Props & ConnectorState) {
+    if (this.props.treeData !== prevProps.treeData) {
+      const { setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
       setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
     }
-  }
-
-  componentDidUpdate() {
     const { execAfterRender } = this.props
     execAfterRender()
   }
@@ -114,7 +108,7 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
     )
   })
 
-  private renderActions: Node['props']['renderActions'] = node => {
+  private renderActions: React.ComponentProps<typeof Node>['renderActions'] = node => {
     const { searchKey, goTo } = this.props
     return (
       searchKey && (
diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index 70947d9..943e9bc 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -24,42 +24,42 @@ type Props = {
   renderActions?(node: TreeNode): React.ReactNode
   style?: React.CSSProperties
 }
-export class Node extends React.PureComponent<Props> {
-  onClick: React.MouseEventHandler = event => {
-    if (
-      (os === OperatingSystems.macOS && event.metaKey) ||
-      (os === OperatingSystems.Windows && event.ctrlKey)
-    ) {
-      // Open in new tab
-      return
-    }
-    event.preventDefault()
-    const { node, onClick } = this.props
-    onClick(node)
-  }
+export function Node({ node, depth, expanded, focused, renderActions, style, onClick }: Props) {
+  const onClickNode: React.MouseEventHandler = React.useCallback(
+    event => {
+      if (
+        (os === OperatingSystems.macOS && event.metaKey) ||
+        (os === OperatingSystems.Windows && event.ctrlKey)
+      ) {
+        // The default behavior, open in new tab
+        return
+      }
+      event.preventDefault()
 
-  render() {
-    const { node, depth, expanded, focused, renderActions, style } = this.props
-    const { name, path } = node
-    return (
-      <div
-        className={cx(`node-item-row`, { focused, disabled: node.accessDenied })}
-        style={style}
-        title={path}
-      >
-        <a href={node.url} onClick={this.onClick}>
-          <div
-            className={cx('node-item', { expanded })}
-            style={{ paddingLeft: `${10 + 20 * depth}px` }}
-          >
-            <div className={'node-item-label'}>
-              <Icon type={getIconType(node)} />
-              <span className={'node-item-name'}>{name}</span>
-            </div>
-            {renderActions && <div>{renderActions(node)}</div>}
+      onClick(node)
+    },
+    [node, onClick],
+  )
+
+  const { name, path } = node
+  return (
+    <div
+      className={cx(`node-item-row`, { focused, disabled: node.accessDenied })}
+      style={style}
+      title={path}
+    >
+      <a href={node.url} onClick={onClickNode}>
+        <div
+          className={cx('node-item', { expanded })}
+          style={{ paddingLeft: `${10 + 20 * depth}px` }}
+        >
+          <div className={'node-item-label'}>
+            <Icon type={getIconType(node)} />
+            <span className={'node-item-name'}>{name}</span>
           </div>
-        </a>
-      </div>
-    )
-  }
+          {renderActions && <div>{renderActions(node)}</div>}
+        </div>
+      </a>
+    </div>
+  )
 }
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 3a8cd3e..2497954 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -5,10 +5,8 @@ type Props = {
   into: Element | null
 }
 
-export class Portal extends React.PureComponent<Props> {
-  render() {
-    const { into, children } = this.props
-    if (!(into instanceof Element)) return null
-    return ReactDOM.createPortal(children, into)
-  }
+export function Portal(props: React.PropsWithChildren<Props>) {
+  const { into, children } = props
+  if (!(into instanceof Element)) return null
+  return ReactDOM.createPortal(children, into)
 }
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index d49e562..a3b9fd8 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -8,51 +8,46 @@ type Props = {
   style?: React.CSSProperties
 }
 
-export class HorizontalResizeHandler extends React.PureComponent<Props> {
-  pointerDown = false
-  startX = 0
-  baseSize = this.props.size
+export function HorizontalResizeHandler({ onResize, size, style }: Props) {
+  const pointerDown = React.useRef(false)
+  const startX = React.useRef(0)
+  const baseSize = React.useRef(size)
+  const latestPropSize = React.useRef(size)
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (!this.pointerDown) {
-      // update baseSize when not resizing
-      this.baseSize = nextProps.size
+  React.useEffect(() => {
+    latestPropSize.current = size
+  }, [size])
+
+  const onPointerDown = React.useCallback(({ clientX }: React.MouseEvent) => {
+    startX.current = clientX
+    pointerDown.current = true
+    baseSize.current = latestPropSize.current
+  }, [])
+
+  React.useEffect(() => {
+    const onPointerMove = ({ clientX }: MouseEvent) => {
+      if (!pointerDown.current) return
+      const shift = clientX - startX.current
+      onResize(baseSize.current + shift)
     }
-  }
+    window.addEventListener('mousemove', onPointerMove)
+    return () => window.removeEventListener('mousemove', onPointerMove)
+  }, [onResize])
 
-  subscribeEvents = () => {
-    window.addEventListener('mousemove', this.onPointerMove)
-    window.addEventListener('mouseup', this.onPointerUp)
-  }
+  React.useEffect(() => {
+    const onPointerUp = () => {
+      if (pointerDown.current) {
+        pointerDown.current = false
+        baseSize.current = latestPropSize.current
+      }
+    }
+    window.addEventListener('mouseup', onPointerUp)
+    return () => window.removeEventListener('mouseup', onPointerUp)
+  }, [])
 
-  unsubscribeEvents = () => {
-    window.removeEventListener('mousemove', this.onPointerMove)
-    window.removeEventListener('mouseup', this.onPointerUp)
-  }
-
-  onPointerDown = ({ clientX }: React.MouseEvent) => {
-    this.startX = clientX
-    this.pointerDown = true
-    this.subscribeEvents()
-  }
-
-  onPointerMove = ({ clientX }: MouseEvent) => {
-    if (!this.pointerDown) return
-    this.props.onResize(clientX - this.startX + this.baseSize)
-  }
-
-  onPointerUp = () => {
-    this.pointerDown = false
-    this.baseSize = this.props.size
-    this.unsubscribeEvents()
-  }
-
-  render() {
-    const { style } = this.props
-    return (
-      <div className={'gitako-resize-handler'} onMouseDown={this.onPointerDown} style={style}>
-        <Icon type={'grabber'} className={'grabber-icon'} />
-      </div>
-    )
-  }
+  return (
+    <div className={'gitako-resize-handler'} onMouseDown={onPointerDown} style={style}>
+      <Icon type={'grabber'} className={'grabber-icon'} />
+    </div>
+  )
 }
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 8f8a57d..85a6087 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -104,9 +104,9 @@ export class SettingsBar extends React.PureComponent<Props, State> {
     if (!this.props.accessToken) this.trySetUpAccessTokenWithCode()
   }
 
-  componentWillReceiveProps({ toggleShowSideBarShortcut }: Props) {
+  componentDidUpdate({ toggleShowSideBarShortcut }: Props) {
     if (toggleShowSideBarShortcut !== this.props.toggleShowSideBarShortcut) {
-      this.setState({ toggleShowSideBarShortcut })
+      this.setState({ toggleShowSideBarShortcut: this.props.toggleShowSideBarShortcut })
     }
   }
 
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f7f16e7..6b4cbbe 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -24,13 +24,9 @@ class RawGitako extends React.PureComponent<Props & ConnectorState> {
     disabled: false,
   }
 
-  componentWillMount() {
-    const { init } = this.props
-    init()
-  }
-
   componentDidMount() {
-    const { useListeners } = this.props
+    const { init, useListeners } = this.props
+    init()
     useListeners(true)
   }
 
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index 4b394c4..ca64c30 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -19,6 +19,16 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
     height: undefined,
   })
 
+  const safeSetSize = React.useCallback(function safeSetSize(rect: DOMRectReadOnly) {
+    // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
+    requestAnimationFrame(() =>
+      setSize({
+        width: rect.width,
+        height: rect.height,
+      }),
+    )
+  }, [])
+
   React.useLayoutEffect(() => {
     if (features.resize) {
       const observer = new window.ResizeObserver(entries => {
@@ -43,14 +53,4 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
   const props: any = { ...rest, ref } // :)
 
   return React.createElement(type, props, children(size))
-
-  function safeSetSize(rect: DOMRectReadOnly) {
-    // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
-    requestAnimationFrame(() =>
-      setSize({
-        width: rect.width,
-        height: rect.height,
-      }),
-    )
-  }
 }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 0917b96..19dab59 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -102,7 +102,7 @@ export function insertLogoMountPoint() {
 
 function createLogoMountPoint() {
   const logoMountElement = document.createElement('div')
-  logoMountElement.setAttribute('class', 'gitako-logo-mount-point')
+  logoMountElement.classList.add('gitako-logo-mount-point')
   document.body.appendChild(logoMountElement)
   return logoMountElement
 }

From db23b69d7f97c389efca022840b74799b746ca4b Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 17:36:43 +0800
Subject: [PATCH 10/29] feat: configs context

---
 src/components/Gitako.tsx         |  7 +++++-
 src/components/Resizable.tsx      |  6 +++--
 src/containers/ConfigsContext.tsx | 38 +++++++++++++++++++++++++++++++
 src/global.d.ts                   |  9 ++++++++
 src/utils/configHelper.ts         |  2 +-
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/ConfigsContext.tsx
 create mode 100644 src/global.d.ts

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 16ba16a..4088a27 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,5 +1,6 @@
 import { raiseError } from 'analytics'
 import { SideBar } from 'components/SideBar'
+import { ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
 
 export class Gitako extends React.PureComponent {
@@ -8,6 +9,10 @@ export class Gitako extends React.PureComponent {
   }
 
   render() {
-    return <SideBar />
+    return (
+      <ConfigsContextWrapper>
+        <SideBar />
+      </ConfigsContextWrapper>
+    )
   }
 }
diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index b14f40a..2cba2fa 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -1,6 +1,7 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
+import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { configKeys, setOne } from 'utils/configHelper'
+import { configKeys } from 'utils/configHelper'
 import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
@@ -17,6 +18,7 @@ const GITHUB_WIDTH = 1020
 
 export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
+  const configContext = useConfigs()
 
   React.useEffect(() => {
     setSize(baseSize)
@@ -32,7 +34,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
-    setOne(configKeys.sideBarWidth, size)
+    configContext.set({ [configKeys.sideBarWidth]: size })
   }, [size])
 
   useMediaStyleSheet(
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
new file mode 100644
index 0000000..1be1551
--- /dev/null
+++ b/src/containers/ConfigsContext.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Config, getAll, setAll } from 'utils/configHelper'
+
+type Props = {}
+
+type ContextShape = PartialValSet<Config>
+
+const ConfigsContext = React.createContext<ContextShape | null>(null)
+
+export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
+  const [configs, setConfigs] = React.useState<Config | null>(null)
+  React.useEffect(() => {
+    getAll().then(setConfigs)
+  }, [])
+  const set = React.useCallback(
+    () => (configs: Config) => {
+      setAll(configs)
+      setConfigs(configs)
+    },
+    [setConfigs],
+  )
+  if (configs === null) return null
+  return (
+    <ConfigsContext.Provider value={{ val: configs, set }}>
+      {props.children}
+    </ConfigsContext.Provider>
+  )
+}
+
+export const useConfigs = useNonNullContext(ConfigsContext)
+
+function useNonNullContext<T, R extends Exclude<T, null>>(theContext: React.Context<T>): () => R {
+  return () => {
+    const context = React.useContext(theContext)
+    if (context === null) throw new Error(`Empty context`)
+    return context as R
+  }
+}
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..fac9ed3
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,9 @@
+type ValSet<T> = {
+  val: T
+  set: (val: T) => void
+}
+
+type PartialValSet<T> = {
+  val: T
+  set: (val: Partial<T>) => void
+}
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index 9e093ac..f00dae7 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -20,7 +20,7 @@ export enum configKeys {
   intelligentToggle = 'intelligentToggle',
 }
 
-const defaultConfigs: Config = {
+export const defaultConfigs: Config = {
   sideBarWidth: 260,
   shortcut: undefined,
   access_token: undefined,

From 8141dfa3b4edc3cb001b8080f2f73fe0b067c139 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 17:37:51 +0800
Subject: [PATCH 11/29] feat: expose props when get

---
 src/driver/connect.ts           |  6 +++---
 src/driver/core/FileExplorer.ts |  5 ++---
 src/driver/core/SideBar.ts      | 13 ++++++-------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/driver/connect.ts b/src/driver/connect.ts
index b061f31..6f6165b 100644
--- a/src/driver/connect.ts
+++ b/src/driver/connect.ts
@@ -31,7 +31,7 @@ function run<M extends Method>([method, args]: [M, Parameters<M>]) {
 }
 
 export type DispatchState<Props, State> = React.Component<Props, State>['setState']
-export type GetState<State> = () => State
+export type GetState<Props, State> = () => [State, Props]
 export type TriggerOtherMethod<Props, State> = <Args extends any[]>(
   methodCreator: MethodCreator<Props, State, Args>,
   ...args: Parameters<ReturnType<MethodCreator<Props, State, Args>>>
@@ -39,7 +39,7 @@ export type TriggerOtherMethod<Props, State> = <Args extends any[]>(
 
 export type Dispatch<Props, State> = {
   set: DispatchState<Props, State>
-  get: GetState<State>
+  get: GetState<Props, State>
   call: TriggerOtherMethod<Props, State>
 }
 
@@ -75,7 +75,7 @@ function link<P, S>(instance: React.Component<P, S>, sources: Sources<P, S>): Wr
   const dispatchState: DispatchState<P, S> = (updater, callback) => {
     instance.setState(updater, callback)
   }
-  const prepareState: GetState<S> = () => instance.state
+  const prepareState: GetState<P, S> = () => [instance.state, instance.props]
   const dispatch: Dispatch<P, S> = {
     call: dispatchCall,
     get: prepareState,
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index 307a494..4d5a4d4 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -182,7 +182,7 @@ export const setStateText: BoundMethodCreator<[ConnectorState['stateText']]> = d
   })
 
 export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
-  const { searched, visibleNodes } = dispatch.get()
+  const [{ searched, visibleNodes }] = dispatch.get()
   if (!visibleNodes) return
   const { nodes, focusedNode, expandedNodes, depths } = visibleNodes
   function handleVerticalMove(index: number) {
@@ -327,9 +327,8 @@ export const toggleNodeExpansion: BoundMethodCreator<[TreeNode, boolean]> = disp
 
 export const focusNode: BoundMethodCreator<[TreeNode | null, boolean]> = dispatch => (
   node: TreeNode | null,
-  skipScroll = false,
 ) => {
-  const { visibleNodes } = dispatch.get()
+  const [{ visibleNodes }] = dispatch.get()
   if (!visibleNodes) return
   visibleNodesGenerator.focusNode(node)
   dispatch.call(updateVisibleNodes)
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 410e86a..f3c797a 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -50,7 +50,7 @@ export type ConnectorState = {
 type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
 
 export const init: BoundMethodCreator = dispatch => async () => {
-  const { initializingPromise } = dispatch.get()
+  const [{ initializingPromise }] = dispatch.get()
   if (initializingPromise) await initializingPromise
 
   let done: any = null // cannot use type `(() => void) | null` here
@@ -175,7 +175,7 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err =>
 }
 
 export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
-  const { metaData, copyFileButton, copySnippetButton, intelligentToggle } = dispatch.get()
+  const [{ metaData, copyFileButton, copySnippetButton, intelligentToggle }] = dispatch.get()
   DOMHelper.unmountTopProgressBar()
   DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
   const mergedMetaData = { ...metaData, ...URLHelper.parse() }
@@ -187,7 +187,7 @@ export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
 }
 
 export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
-  const { toggleShowSideBarShortcut } = dispatch.get()
+  const [{ toggleShowSideBarShortcut }] = dispatch.get()
   if (toggleShowSideBarShortcut) {
     const keys = keyHelper.parseEvent(e)
     if (keys === toggleShowSideBarShortcut) {
@@ -197,9 +197,8 @@ export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
 }
 
 export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
-  const { intelligentToggle } = dispatch.get()
-  const shouldShow = !dispatch.get().shouldShow
-  dispatch.call(setShouldShow, shouldShow)
+  const [{ intelligentToggle, shouldShow }] = dispatch.get()
+  dispatch.call(setShouldShow, !shouldShow)
 
   if (intelligentToggle !== null) {
     dispatch.call(setIntelligentToggle, shouldShow)
@@ -267,7 +266,7 @@ export const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
   const $onPJAXEnd = () => dispatch.call(onPJAXEnd)
   const $onKeyDown = (e: KeyboardEvent) => dispatch.call(onKeyDown, e)
   return on => {
-    const { disabled } = dispatch.get()
+    const [{ disabled }] = dispatch.get()
     if (on && !disabled) {
       window.addEventListener('pjax:complete', $onPJAXEnd)
       window.addEventListener('keydown', $onKeyDown)

From f677d7df5a594f681cc0f8d91388bb58440a7bbd Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 20:25:51 +0800
Subject: [PATCH 12/29] refactor: use more config

---
 src/components/Gitako.tsx         |  6 ++++--
 src/components/Resizable.tsx      |  3 +--
 src/containers/ConfigsContext.tsx | 10 ++++++----
 src/driver/core/SideBar.ts        | 12 ++++++++----
 src/utils/configHelper.ts         | 14 ++------------
 src/utils/hooks.ts                |  7 +++++++
 6 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 4088a27..28ace02 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,6 +1,6 @@
 import { raiseError } from 'analytics'
 import { SideBar } from 'components/SideBar'
-import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
 
 export class Gitako extends React.PureComponent {
@@ -11,7 +11,9 @@ export class Gitako extends React.PureComponent {
   render() {
     return (
       <ConfigsContextWrapper>
-        <SideBar />
+        <ConfigsContext.Consumer>
+          {configContext => configContext && <SideBar configContext={configContext} />}
+        </ConfigsContext.Consumer>
       </ConfigsContextWrapper>
     )
   }
diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index 2cba2fa..8a8fc0d 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -1,7 +1,6 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { configKeys } from 'utils/configHelper'
 import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
@@ -34,7 +33,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
-    configContext.set({ [configKeys.sideBarWidth]: size })
+    configContext.set({ sideBarWidth: size })
   }, [size])
 
   useMediaStyleSheet(
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
index 1be1551..9bfb22f 100644
--- a/src/containers/ConfigsContext.tsx
+++ b/src/containers/ConfigsContext.tsx
@@ -1,20 +1,22 @@
 import * as React from 'react'
-import { Config, getAll, setAll } from 'utils/configHelper'
+import * as configsHelper from 'utils/configHelper'
+import { Config } from 'utils/configHelper'
 
 type Props = {}
 
 type ContextShape = PartialValSet<Config>
+export type ConfigsContextShape = ContextShape
 
-const ConfigsContext = React.createContext<ContextShape | null>(null)
+export const ConfigsContext = React.createContext<ContextShape | null>(null)
 
 export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
   const [configs, setConfigs] = React.useState<Config | null>(null)
   React.useEffect(() => {
-    getAll().then(setConfigs)
+    configsHelper.get().then(setConfigs)
   }, [])
   const set = React.useCallback(
     () => (configs: Config) => {
-      setAll(configs)
+      configsHelper.set(configs)
       setConfigs(configs)
     },
     [setConfigs],
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index f3c797a..4695afb 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,5 +1,5 @@
+import { ConfigsContextShape } from 'containers/ConfigsContext'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
-import * as configHelper from 'utils/configHelper'
 import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
 import * as GitHubHelper from 'utils/GitHubHelper'
@@ -7,7 +7,9 @@ import { MetaData, TreeData } from 'utils/GitHubHelper'
 import * as keyHelper from 'utils/keyHelper'
 import * as URLHelper from 'utils/URLHelper'
 
-export type Props = {}
+export type Props = {
+  configContext: ConfigsContextShape
+}
 
 export type ConnectorState = {
   // error message
@@ -77,6 +79,7 @@ export const init: BoundMethodCreator = dispatch => async () => {
     }
     metaData.branchName = detectedBranchName || 'master'
     dispatch.call(setMetaData, metaData)
+    const [, { configContext }] = dispatch.get()
     const {
       sideBarWidth,
       access_token: accessToken,
@@ -85,7 +88,7 @@ export const init: BoundMethodCreator = dispatch => async () => {
       copyFileButton,
       copySnippetButton,
       intelligentToggle,
-    } = await configHelper.getAll()
+    } = configContext.val
     DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
     dispatch.set({
       baseSize: sideBarWidth,
@@ -258,7 +261,8 @@ export const setCopySnippet: BoundMethodCreator<
 export const setIntelligentToggle: BoundMethodCreator<
   [ConnectorState['intelligentToggle']]
 > = dispatch => intelligentToggle => {
-  configHelper.setOne(configHelper.configKeys.intelligentToggle, intelligentToggle)
+  const [, { configContext }] = dispatch.get()
+  configContext.set({ intelligentToggle })
   dispatch.set({ intelligentToggle })
 }
 
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index f00dae7..470a005 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -43,20 +43,10 @@ function applyDefaultConfigs(configs: Config) {
   )
 }
 
-export async function getAll(): Promise<Config> {
+export async function get(): Promise<Config> {
   return applyDefaultConfigs(await storageHelper.get(configKeyArray))
 }
 
-export async function getOne(key: configKeys) {
-  return (await getAll())[key]
-}
-
-export async function setAll(partialConfig: Partial<Config>) {
+export async function set(partialConfig: Partial<Config>) {
   return await storageHelper.set(partialConfig)
 }
-
-export async function setOne(key: configKeys, value: any) {
-  return await setAll({
-    [key]: value,
-  })
-}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 578ae1f..258481d 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -47,3 +47,10 @@ export function usePrevious<T>(newValue: T) {
   })
   return previousRef.current
 }
+
+export function useStates<S>(
+  initialState: S | (() => S),
+): { val: S; set: React.Dispatch<React.SetStateAction<S>> } {
+  const [val, set] = React.useState(initialState)
+  return { val, set }
+}

From ddb86fa4efc1e2d60569ce875ff4cc2267aed673 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 11 Nov 2019 23:56:20 +0800
Subject: [PATCH 13/29] changes are out of control

---
 src/components/FileExplorer.tsx   | 282 +++++++++-------
 src/components/MoreOption.tsx     |  52 +++
 src/components/SettingsBar.tsx    | 542 +++++++++++++-----------------
 src/components/SideBar.tsx        | 205 +++++------
 src/containers/ConfigsContext.tsx |   9 +-
 src/content.less                  |   2 +-
 src/driver/connect.ts             |   7 +-
 src/driver/core/FileExplorer.ts   |   4 +-
 src/driver/core/SideBar.ts        |  84 ++---
 src/utils/hooks.ts                |  14 +
 tsconfig.json                     |   1 -
 11 files changed, 569 insertions(+), 633 deletions(-)
 create mode 100644 src/components/MoreOption.tsx

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 8f4bb73..60e95ab 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -1,129 +1,91 @@
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { Node } from 'components/Node'
 import { SearchBar } from 'components/SearchBar'
+import { useConfigs } from 'containers/ConfigsContext'
 import { connect } from 'driver/connect'
 import { FileExplorerCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/FileExplorer'
 import * as React from 'react'
-import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
+import { FixedSizeList as List, ListChildComponentProps, ListProps } from 'react-window'
 import { cx } from 'utils/cx'
 import { usePrevious } from 'utils/hooks'
 import { TreeNode, VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { Icon } from './Icon'
 import { SizeObserver } from './SizeObserver'
 
-class RawFileExplorer extends React.Component<Props & ConnectorState> {
-  static defaultProps: Partial<Props & ConnectorState> = {
-    freeze: false,
-    searchKey: '',
-    visibleNodes: null,
-  }
+const VisibleNodesContext = React.createContext<VisibleNodes | null>(null)
 
-  componentDidMount() {
-    const { init, setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
+const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer(props) {
+  const { visibleNodes, freeze, onNodeClick, searchKey } = props
+  const {
+    val: { access_token: accessToken, compressSingletonFolder },
+  } = useConfigs()
+
+  React.useEffect(() => {
+    const { init } = props
     init()
+  }, [])
+
+  React.useEffect(() => {
+    const { setUpTree, treeData, metaData } = props
     setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
-    const { execAfterRender } = this.props
+  }, [props.setUpTree, props.treeData, props.metaData, compressSingletonFolder, accessToken])
+
+  React.useEffect(() => {
+    const { execAfterRender } = props
     execAfterRender()
-  }
-
-  componentDidUpdate(prevProps: Props & ConnectorState) {
-    if (this.props.treeData !== prevProps.treeData) {
-      const { setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
-      setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
-    }
-    const { execAfterRender } = this.props
-    execAfterRender()
-  }
-
-  renderFiles(visibleNodes: VisibleNodes) {
-    const { nodes, focusedNode } = visibleNodes
-    const { searchKey } = this.props
-    const inSearch = searchKey !== ''
-    if (inSearch && nodes.length === 0) {
-      return <label className={'no-results'}>No results found.</label>
-    }
-    return (
-      <SizeObserver className={'files'}>
-        {({ width = 0, height = 0 }) => (
-          <this.ListV focusedNode={focusedNode} nodes={nodes} height={height} width={width} />
-        )}
-      </SizeObserver>
-    )
-  }
-
-  ListV = React.memo<{
-    nodes: TreeNode[]
-    height: number
-    width: number
-    focusedNode: TreeNode | null
-  }>(({ nodes, width, height, focusedNode }) => {
-    const listRef = React.useRef<List>(null)
-    React.useEffect(() => {
-      if (focusedNode && listRef.current) {
-        listRef.current.scrollToItem(nodes.indexOf(focusedNode), 'smart')
-      }
-    }, [listRef.current, focusedNode])
-
-    const lastNodeLength = usePrevious(nodes.length)
-    React.useEffect(() => {
-      if (listRef.current && !focusedNode && lastNodeLength !== nodes.length) {
-        listRef.current.scrollTo(0)
-      }
-    }, [listRef.current, focusedNode, nodes.length])
-    return (
-      <List
-        ref={listRef}
-        itemKey={(index, { nodes }) => {
-          const node = nodes[index]
-          return node && node.path
-        }}
-        itemData={{ nodes }}
-        itemCount={nodes.length}
-        itemSize={35}
-        height={height}
-        width={width}
-      >
-        {this.VirtualNode}
-      </List>
-    )
   })
 
-  VirtualNode = React.memo<ListChildComponentProps>(({ index, style }) => {
-    const { visibleNodes, onNodeClick } = this.props
-    if (!visibleNodes) return null
-    const { nodes, depths, focusedNode, expandedNodes } = visibleNodes
-    const node = nodes[index]
-    return (
-      <Node
-        style={style}
-        key={node.path}
-        node={node}
-        depth={depths.get(node) || 0}
-        focused={focusedNode === node}
-        expanded={expandedNodes.has(node)}
-        onClick={onNodeClick}
-        renderActions={this.renderActions}
-      />
-    )
-  })
-
-  private renderActions: React.ComponentProps<typeof Node>['renderActions'] = node => {
-    const { searchKey, goTo } = this.props
-    return (
-      searchKey && (
+  const renderActions: React.ComponentProps<typeof Node>['renderActions'] = React.useCallback(
+    node =>
+      searchKey ? (
         <button
           title={'Reveal in file tree'}
           className={'go-to-button'}
-          onClick={this.revealNode(goTo, node)}
+          onClick={revealNode(props.goTo, node)}
         >
           <Icon type="go-to" />
         </button>
-      )
-    )
-  }
+      ) : null,
+    [searchKey, props.goTo],
+  )
 
-  revealNode(
+  const renderNode = React.useCallback(
+    ({ index, style }: ListChildComponentProps) => (
+      <VirtualNode
+        index={index}
+        style={style}
+        onNodeClick={onNodeClick}
+        renderActions={renderActions}
+      />
+    ),
+    [renderActions, onNodeClick],
+  )
+
+  const renderFiles = React.useCallback(
+    ({ nodes, focusedNode }: VisibleNodes) => {
+      const inSearch = searchKey !== ''
+      if (inSearch && nodes.length === 0) {
+        return <label className={'no-results'}>No results found.</label>
+      }
+      return (
+        <SizeObserver className={'files'}>
+          {({ width = 0, height = 0 }) => (
+            <ListView
+              renderNode={renderNode}
+              focusedNode={focusedNode}
+              nodes={nodes}
+              height={height}
+              width={width}
+            />
+          )}
+        </SizeObserver>
+      )
+    },
+    [searchKey, ListView, renderNode],
+  )
+
+  const revealNode = React.useCallback(function revealNode(
     goTo: (path: string[]) => void,
     node: TreeNode,
   ): (event: React.MouseEvent<HTMLElement, MouseEvent>) => void {
@@ -132,39 +94,113 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
       e.preventDefault()
       goTo(node.path.split('/'))
     }
-  }
+  },
+  [])
 
-  render() {
-    const {
-      stateText,
-      visibleNodes,
-      freeze,
-      handleKeyDown,
-      search,
-      toggleShowSettings,
-      onFocusSearchBar,
-      searchKey,
-    } = this.props
-    return (
+  return (
+    <VisibleNodesContext.Provider value={visibleNodes}>
       <div
         className={cx(`file-explorer`, { freeze })}
         tabIndex={-1}
-        onKeyDown={handleKeyDown}
-        onClick={freeze ? toggleShowSettings : undefined}
+        onKeyDown={props.handleKeyDown}
+        onClick={freeze ? props.toggleShowSettings : undefined}
       >
-        {stateText ? (
-          <LoadingIndicator text={stateText} />
+        {props.stateText ? (
+          <LoadingIndicator text={props.stateText} />
         ) : (
           visibleNodes && (
-            <React.Fragment>
-              <SearchBar searchKey={searchKey} onSearch={search} onFocus={onFocusSearchBar} />
-              {this.renderFiles(visibleNodes)}
-            </React.Fragment>
+            <>
+              <SearchBar
+                searchKey={searchKey}
+                onSearch={props.search}
+                onFocus={props.onFocusSearchBar}
+              />
+              {renderFiles(visibleNodes)}
+            </>
           )
         )}
       </div>
-    )
-  }
+    </VisibleNodesContext.Provider>
+  )
+}
+
+RawFileExplorer.defaultProps = {
+  freeze: false,
+  searchKey: '',
+  visibleNodes: null,
 }
 
 export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
+
+function VirtualNode({
+  index,
+  style,
+  onNodeClick,
+  renderActions,
+}: {
+  index: number
+  style: React.CSSProperties
+  onNodeClick: (treeNode: TreeNode) => void
+  renderActions: ((node: TreeNode) => React.ReactNode) | undefined
+}) {
+  const visibleNodes = React.useContext(VisibleNodesContext)
+  if (!visibleNodes) return null
+  const { nodes, depths, focusedNode, expandedNodes } = visibleNodes
+  const node = nodes[index]
+  return (
+    <Node
+      style={style}
+      key={node.path}
+      node={node}
+      depth={depths.get(node) || 0}
+      focused={focusedNode === node}
+      expanded={expandedNodes.has(node)}
+      onClick={onNodeClick}
+      renderActions={renderActions}
+    />
+  )
+}
+
+function ListView({
+  nodes,
+  width,
+  height,
+  focusedNode,
+  renderNode,
+}: {
+  nodes: TreeNode[]
+  height: number
+  width: number
+  focusedNode: TreeNode | null
+  renderNode: ListProps['children']
+}) {
+  const listRef = React.useRef<List>(null)
+  React.useEffect(() => {
+    if (focusedNode && listRef.current) {
+      listRef.current.scrollToItem(nodes.indexOf(focusedNode), 'smart')
+    }
+  }, [listRef.current, focusedNode])
+
+  const lastNodeLength = usePrevious(nodes.length)
+  React.useEffect(() => {
+    if (listRef.current && !focusedNode && lastNodeLength !== nodes.length) {
+      listRef.current.scrollTo(0)
+    }
+  }, [listRef.current, focusedNode, nodes.length])
+  return (
+    <List
+      ref={listRef}
+      itemKey={(index, { nodes }) => {
+        const node = nodes[index]
+        return node && node.path
+      }}
+      itemData={{ nodes }}
+      itemCount={nodes.length}
+      itemSize={35}
+      height={height}
+      width={width}
+    >
+      {renderNode}
+    </List>
+  )
+}
diff --git a/src/components/MoreOption.tsx b/src/components/MoreOption.tsx
new file mode 100644
index 0000000..65a9d66
--- /dev/null
+++ b/src/components/MoreOption.tsx
@@ -0,0 +1,52 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { Config } from 'utils/configHelper'
+
+export type SimpleField = {
+  key: keyof Config
+  label: string
+  wikiLink?: string
+  description?: string
+  overwrite?: Props['overwrite']
+}
+
+type Props = {
+  field: SimpleField
+  onChange?(): void
+  overwrite?: {
+    value: <T>(value: T) => boolean
+    onChange: (checked: boolean) => any
+  }
+}
+
+export function SimpleFieldInput({ field, overwrite, onChange }: Props) {
+  const configContext = useConfigs()
+  const value = configContext.val[field.key]
+  return (
+    <label htmlFor={field.key}>
+      <input
+        id={field.key}
+        name={field.key}
+        type={'checkbox'}
+        onChange={async e => {
+          const enabled = e.currentTarget.checked
+          configContext.set({ [field.key]: overwrite ? overwrite.onChange(enabled) : enabled })
+          if (onChange) onChange()
+        }}
+        checked={overwrite ? overwrite.value(value) : Boolean(value)}
+      />
+      &nbsp;{field.label}&nbsp;
+      {field.wikiLink ? (
+        <a href={field.wikiLink} target={'_blank'}>
+          (?)
+        </a>
+      ) : (
+        field.description && (
+          <span className={'description'} title={field.description}>
+            (?)
+          </span>
+        )
+      )}
+    </label>
+  )
+}
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index f5fa77e..98ac7e1 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -1,10 +1,12 @@
 import { raiseError } from 'analytics'
 import { Icon } from 'components/Icon'
+import { useConfigs } from 'containers/ConfigsContext'
 import { oauth, VERSION } from 'env'
 import * as React from 'react'
-import { Config, configKeys, setOne } from 'utils/configHelper'
 import { friendlyFormatShortcut, JSONRequest, parseURLSearch } from 'utils/general'
+import { useStates } from 'utils/hooks'
 import * as keyHelper from 'utils/keyHelper'
+import { SimpleField, SimpleFieldInput } from './MoreOption'
 
 const WIKI_HOME_LINK = 'https://github.com/EnixCoda/Gitako/wiki'
 const wikiLinks = {
@@ -18,348 +20,268 @@ const wikiLinks = {
 const ACCESS_TOKEN_REGEXP = /^[0-9a-f]{40}$/
 
 type Props = {
-  accessToken?: string
   activated: boolean
-  onAccessTokenChange: (accessToken: string) => void
-  onShortcutChange: (shortcut: string) => void
-  setCopyFile: (copyFileButton: Props['copyFileButton']) => void
-  setCopySnippet: (copySnippetButton: Props['copySnippetButton']) => void
-  setCompressSingleton: (compressSingletonFolder: Props['compressSingletonFolder']) => void
-  setIntelligentToggle: (intelligentToggle: Props['intelligentToggle']) => void
   toggleShowSettings: () => void
-  toggleShowSideBarShortcut?: string
-} & Pick<
-  Config,
-  'compressSingletonFolder' | 'copyFileButton' | 'copySnippetButton' | 'intelligentToggle'
->
-
-type State = {
-  accessToken?: string
-  accessTokenHint: React.ReactNode
-  shortcutHint: string
-  toggleShowSideBarShortcut?: string
-  reloadHint: React.ReactNode
-  varyOptions: {
-    key: string
-    label: string
-    onChange: (e: React.FormEvent<HTMLInputElement>) => Promise<void> | void
-    getValue: () => boolean
-    wikiLink?: string
-    description?: string
-  }[]
 }
 
-export class SettingsBar extends React.PureComponent<Props, State> {
-  state = {
-    accessToken: '',
-    accessTokenHint: '',
-    shortcutHint: '',
-    toggleShowSideBarShortcut: this.props.toggleShowSideBarShortcut,
-    reloadHint: '',
-    varyOptions: [
-      {
-        key: 'compress-singleton',
-        label: 'Compress singleton folder',
-        onChange: this.createOnToggleChecked(
-          configKeys.compressSingletonFolder,
-          this.props.setCompressSingleton,
-        ),
-        getValue: () => this.props.compressSingletonFolder,
-        wikiLink: wikiLinks.compressSingletonFolder,
-      },
-      {
-        key: 'copy-file',
-        label: 'Copy File Shortcut',
-        onChange: this.createOnToggleChecked(configKeys.copyFileButton, this.props.setCopyFile),
-        getValue: () => this.props.copyFileButton,
-        wikiLink: wikiLinks.copyFileButton,
-      },
-      {
-        key: 'copy-snippet',
-        label: 'Copy Snippet Shortcut',
-        onChange: this.createOnToggleChecked(
-          configKeys.copySnippetButton,
-          this.props.setCopySnippet,
-        ),
-        getValue: () => this.props.copySnippetButton,
-        wikiLink: wikiLinks.copySnippet,
-      },
-      {
-        key: 'intelligent-toggle',
-        label: 'Intelligent Toggle',
-        onChange: async (e: React.FormEvent<HTMLInputElement>) => {
-          const { checked } = e.currentTarget
-          const intelligentToggle = checked ? null : true
-          await setOne(configKeys.intelligentToggle, intelligentToggle)
-          this.props.setIntelligentToggle(intelligentToggle)
-        },
-        getValue: () => this.props.intelligentToggle === null,
-        description: `Gitako will open/close automatically according to page content when this is enabled.`,
-      },
-    ],
-  }
+const moreFields: SimpleField[] = [
+  {
+    key: 'compressSingletonFolder',
+    label: 'Compress singleton folder',
+    wikiLink: wikiLinks.compressSingletonFolder,
+  },
+  {
+    key: 'copyFileButton',
+    label: 'Copy File Shortcut',
+    wikiLink: wikiLinks.copyFileButton,
+  },
+  {
+    key: 'copySnippetButton',
+    label: 'Copy Snippet Shortcut',
+    wikiLink: wikiLinks.copySnippet,
+  },
+  {
+    key: 'intelligentToggle',
+    label: 'Intelligent Toggle',
+    description: `Gitako will open/close automatically according to page content when this is enabled.`,
+    overwrite: {
+      value: enabled => enabled === null,
+      onChange: checked => (checked ? null : true),
+    },
+  },
+]
 
-  componentDidMount() {
-    if (!this.props.accessToken) this.trySetUpAccessTokenWithCode()
-  }
+function SettingsBarContent() {
+  const configContext = useConfigs()
+  const hasAccessToken = Boolean(configContext.val.access_token)
+  const useAccessToken = useStates('')
+  const useAccessTokenHint = useStates<React.ReactNode>('')
+  const useShortcutHint = useStates('')
+  const useToggleShowSideBarShortcut = useStates(configContext.val.shortcut)
+  const useReloadHint = useStates<React.ReactNode>('')
 
-  componentDidUpdate({ toggleShowSideBarShortcut }: Props) {
-    if (toggleShowSideBarShortcut !== this.props.toggleShowSideBarShortcut) {
-      this.setState({ toggleShowSideBarShortcut: this.props.toggleShowSideBarShortcut })
+  React.useEffect(() => {
+    if (!configContext.val.access_token) {
+      trySetUpAccessTokenWithCode().then(accessToken => {
+        useAccessToken.set(accessToken)
+        saveToken('')
+      })
     }
-  }
+  }, [])
 
-  private async trySetUpAccessTokenWithCode() {
-    try {
-      const search = parseURLSearch()
-      if ('code' in search) {
-        const res = await JSONRequest('https://github.com/login/oauth/access_token', {
-          code: search.code,
-          client_id: oauth.clientId,
-          client_secret: oauth.clientSecret,
-        })
-        const { access_token: accessToken, scope } = res
-        if (scope !== 'repo' || !accessToken) {
-          throw new Error(`Cannot resolve token response: '${JSON.stringify(res)}'`)
-        }
-        window.history.pushState({}, 'removed code', window.location.pathname.replace(/#.*$/, ''))
-        this.setState({ accessToken }, () => this.saveToken(''))
-      }
-    } catch (err) {
-      raiseError(err)
-    }
-  }
+  React.useEffect(() => {
+    useToggleShowSideBarShortcut.set(configContext.val.shortcut)
+  }, [configContext.val.shortcut])
 
-  onInputAccessToken = (event: React.FormEvent<HTMLInputElement>) => {
-    const { value } = event.currentTarget
-    this.setState({
-      accessToken: value,
-      accessTokenHint: ACCESS_TOKEN_REGEXP.test(value) ? '' : 'This token is in unknown format.',
-    })
-  }
+  const onInputAccessToken = React.useCallback(
+    ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
+      useAccessToken.set(value)
+      useAccessTokenHint.set(
+        ACCESS_TOKEN_REGEXP.test(value) ? '' : 'This token is in unknown format.',
+      )
+    },
+    [],
+  )
 
-  onPressAccessToken = (event: React.KeyboardEvent) => {
-    const { key } = event
-    if (key === 'Enter') {
-      this.saveToken()
-    }
-  }
+  const onPressAccessToken = React.useCallback(({ key }: React.KeyboardEvent) => {
+    if (key === 'Enter') saveToken()
+  }, [])
 
-  saveToken = async (
-    hint: State['accessTokenHint'] = (
-      <span>
-        <a href="#" onClick={() => window.location.reload()}>
-          Reload
-        </a>{' '}
-        to activate!
-      </span>
-    ),
-  ) => {
-    const { onAccessTokenChange } = this.props
-    const { accessToken } = this.state
+  const saveToken = React.useCallback(async (hint?: typeof useAccessTokenHint.val) => {
+    const { val: accessToken } = useAccessToken
     if (accessToken) {
-      await setOne(configKeys.accessToken, accessToken)
-      onAccessTokenChange(accessToken)
-      this.setState({
-        accessToken: '',
-        accessTokenHint: hint,
-      })
+      configContext.set({ access_token: accessToken })
+      useAccessToken.set('')
+      useAccessTokenHint.set(
+        hint || (
+          <span>
+            <a href="#" onClick={() => window.location.reload()}>
+              Reload
+            </a>{' '}
+            to activate!
+          </span>
+        ),
+      )
     }
-  }
+  }, [])
 
-  clearToken = async () => {
-    const { onAccessTokenChange } = this.props
-    await setOne(configKeys.accessToken, '')
-    onAccessTokenChange('')
-    this.setState({ accessToken: '' })
-  }
+  const clearToken = React.useCallback(async () => {
+    configContext.set({ access_token: '' })
+    useAccessToken.set('')
+  }, [])
 
-  saveShortcut = async () => {
-    const { onShortcutChange } = this.props
-    const { toggleShowSideBarShortcut } = this.state
-    await setOne(configKeys.shortcut, toggleShowSideBarShortcut)
+  const saveShortcut = React.useCallback(async () => {
+    const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+    configContext.set({ shortcut: toggleShowSideBarShortcut })
     if (typeof toggleShowSideBarShortcut === 'string') {
-      onShortcutChange(toggleShowSideBarShortcut)
-      this.setState({
-        shortcutHint: 'Shortcut is saved!',
-      })
+      useShortcutHint.set('Shortcut is saved!')
     }
-  }
+  }, [useToggleShowSideBarShortcut.val])
 
-  onShortCutInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const onShortCutInputKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     e.preventDefault()
+    e.stopPropagation()
     // Clear shortcut with backspace
     const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
-    this.setState({ toggleShowSideBarShortcut: shortcut })
-  }
+    useToggleShowSideBarShortcut.set(shortcut)
+  }, [])
 
-  showReloadHint = () => {
-    this.setState({
-      reloadHint: (
+  const showReloadHint = React.useCallback(
+    () =>
+      useReloadHint.set(
         <span>
           Saved,{' '}
           <a href="#" onClick={() => window.location.reload()}>
             reload
           </a>{' '}
           to apply.
-        </span>
+        </span>,
       ),
-    })
-  }
+    [],
+  )
 
-  createOnToggleChecked(
-    configKey: configKeys,
-    set: (value: boolean) => void,
-  ): (e: React.FormEvent<HTMLInputElement>) => Promise<void> {
-    return async e => {
-      const enabled = e.currentTarget.checked
-      await setOne(configKey, enabled)
-      set(enabled)
-      this.showReloadHint()
-    }
-  }
+  const { val: accessTokenHint } = useAccessTokenHint
+  const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+  const { val: shortcutHint } = useShortcutHint
+  const { val: accessToken } = useAccessToken
+  const { val: reloadHint } = useReloadHint
 
-  render() {
-    const {
-      accessTokenHint,
-      toggleShowSideBarShortcut,
-      shortcutHint,
-      accessToken,
-      reloadHint,
-      varyOptions,
-    } = this.state
-    const { toggleShowSettings, activated } = this.props
-    const hasAccessToken = Boolean(this.props.accessToken)
-    return (
-      <div className={'gitako-settings-bar'}>
-        {activated && (
-          <React.Fragment>
-            <h3 className={'gitako-settings-bar-title'}>Settings</h3>
-            <div className={'gitako-settings-bar-content'}>
-              <div className={'shadow-shelter'} />
-              <div className={'gitako-settings-bar-content-section access-token'}>
-                <h4>
-                  Access Token
-                  <a href={wikiLinks.createAccessToken} target="_blank">
-                    &nbsp;(?)
-                  </a>
-                </h4>
-                {!hasAccessToken && (
-                  <a
-                    href="#"
-                    onClick={() => {
-                      // use js here to make sure redirect_uri is latest url
-                      const url = `https://github.com/login/oauth/authorize?client_id=${
-                        oauth.clientId
-                      }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`
-                      window.location.href = url
-                    }}
-                  >
-                    Create with OAuth (recommended)
-                  </a>
-                )}
-                <div className={'access-token-input-control'}>
-                  <input
-                    className={'access-token-input form-control'}
-                    disabled={hasAccessToken}
-                    placeholder={hasAccessToken ? 'Your token is saved' : 'Or input here manually'}
-                    value={accessToken}
-                    onChange={this.onInputAccessToken}
-                    onKeyPress={this.onPressAccessToken}
-                  />
-                  {hasAccessToken && !accessToken ? (
-                    <button className={'btn'} onClick={this.clearToken}>
-                      Clear
-                    </button>
-                  ) : (
-                    <button
-                      className={'btn'}
-                      onClick={() => this.saveToken()}
-                      disabled={!accessToken}
-                    >
-                      Save
-                    </button>
-                  )}
-                </div>
-                {accessTokenHint && <span className={'hint'}>{accessTokenHint}</span>}
-              </div>
-              <div className={'gitako-settings-bar-content-section toggle-shortcut'}>
-                <h4>Toggle Shortcut</h4>
-                <span>Set a combination of keys for toggling Gitako sidebar.</span>
-                <br />
-                <div className={'toggle-shortcut-input-control'}>
-                  <input
-                    className={'toggle-shortcut-input form-control'}
-                    placeholder={'focus here and press the shortcut keys'}
-                    value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
-                    onKeyDown={this.onShortCutInputKeyDown}
-                    readOnly
-                  />
-                  <button className={'btn'} onClick={this.saveShortcut}>
-                    Save
-                  </button>
-                </div>
-                {shortcutHint && <span className={'hint'}>{shortcutHint}</span>}
-              </div>
-              <div className={'gitako-settings-bar-content-section others'}>
-                <h4>More Options</h4>
-                {varyOptions.map(option => (
-                  <React.Fragment key={option.key}>
-                    <label htmlFor={option.key}>
-                      <input
-                        id={option.key}
-                        name={option.key}
-                        type={'checkbox'}
-                        onChange={option.onChange}
-                        checked={option.getValue()}
-                      />
-                      &nbsp;{option.label}&nbsp;
-                      {option.wikiLink ? (
-                        <a href={option.wikiLink} target={'_blank'}>
-                          (?)
-                        </a>
-                      ) : (
-                        option.description && (
-                          <span className={'description'} title={option.description}>
-                            (?)
-                          </span>
-                        )
-                      )}
-                    </label>
-                    <br />
-                  </React.Fragment>
-                ))}
-                {reloadHint && <div className={'hint'}>{reloadHint}</div>}
-              </div>
-              <div className={'gitako-settings-bar-content-section issue'}>
-                <h4>Contact</h4>
-                <a href="https://github.com/EnixCoda/Gitako/issues" target="_blank">
-                  Bug report / feature request.
-                </a>
-              </div>
-            </div>
-          </React.Fragment>
-        )}
-        <div className={'placeholder-row'}>
-          <a
-            className={'version'}
-            href={wikiLinks.changeLog}
-            target={'_blank'}
-            title={'Check out new features!'}
-          >
-            {VERSION}
-          </a>
-          {activated ? (
-            <Icon
-              type={'chevron-down'}
-              className={'hide-settings-icon'}
-              onClick={toggleShowSettings}
-            />
-          ) : (
-            <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
+  return (
+    <>
+      <h3 className={'gitako-settings-bar-title'}>Settings</h3>
+      <div className={'gitako-settings-bar-content'}>
+        <div className={'shadow-shelter'} />
+        <div className={'gitako-settings-bar-content-section access-token'}>
+          <h4>
+            Access Token{' '}
+            <a href={wikiLinks.createAccessToken} target="_blank">
+              (?)
+            </a>
+          </h4>
+          {!hasAccessToken && (
+            <a
+              href="#"
+              onClick={() => {
+                // use js here to make sure redirect_uri is latest url
+                const url = `https://github.com/login/oauth/authorize?client_id=${
+                  oauth.clientId
+                }&scope=repo&redirect_uri=${encodeURIComponent(window.location.href)}`
+                window.location.href = url
+              }}
+            >
+              Create with OAuth (recommended)
+            </a>
           )}
+          <div className={'access-token-input-control'}>
+            <input
+              className={'access-token-input form-control'}
+              disabled={hasAccessToken}
+              placeholder={hasAccessToken ? 'Your token is saved' : 'Or input here manually'}
+              value={accessToken}
+              onChange={onInputAccessToken}
+              onKeyPress={onPressAccessToken}
+            />
+            {hasAccessToken && !accessToken ? (
+              <button className={'btn'} onClick={clearToken}>
+                Clear
+              </button>
+            ) : (
+              <button className={'btn'} onClick={() => saveToken()} disabled={!accessToken}>
+                Save
+              </button>
+            )}
+          </div>
+          {accessTokenHint && <span className={'hint'}>{accessTokenHint}</span>}
+        </div>
+        <div className={'gitako-settings-bar-content-section toggle-shortcut'}>
+          <h4>Toggle Shortcut</h4>
+          <span>Set a combination of keys for toggling Gitako sidebar.</span>
+          <br />
+          <div className={'toggle-shortcut-input-control'}>
+            <input
+              className={'toggle-shortcut-input form-control'}
+              placeholder={'focus here and press the shortcut keys'}
+              value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
+              onKeyDown={onShortCutInputKeyDown}
+              readOnly
+            />
+            <button className={'btn'} onClick={saveShortcut}>
+              Save
+            </button>
+          </div>
+          {shortcutHint && <span className={'hint'}>{shortcutHint}</span>}
+        </div>
+        <div className={'gitako-settings-bar-content-section others'}>
+          <h4>More Options</h4>
+          {moreFields.map(field => (
+            <React.Fragment key={field.key}>
+              <SimpleFieldInput
+                field={field}
+                overwrite={field.overwrite}
+                onChange={showReloadHint}
+              />
+              <br />
+            </React.Fragment>
+          ))}
+
+          {reloadHint && <div className={'hint'}>{reloadHint}</div>}
+        </div>
+        <div className={'gitako-settings-bar-content-section issue'}>
+          <h4>Contact</h4>
+          <a href="https://github.com/EnixCoda/Gitako/issues" target="_blank">
+            Bug report / feature request.
+          </a>
         </div>
       </div>
-    )
+    </>
+  )
+}
+
+export function SettingsBar(props: Props) {
+  const { toggleShowSettings, activated } = props
+  return (
+    <div className={'gitako-settings-bar'}>
+      {activated && <SettingsBarContent />}
+      <div className={'header-row'}>
+        <a
+          className={'version'}
+          href={wikiLinks.changeLog}
+          target={'_blank'}
+          title={'Check out new features!'}
+        >
+          {VERSION}
+        </a>
+        {activated ? (
+          <Icon
+            type={'chevron-down'}
+            className={'hide-settings-icon'}
+            onClick={toggleShowSettings}
+          />
+        ) : (
+          <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+async function trySetUpAccessTokenWithCode() {
+  try {
+    const search = parseURLSearch()
+    if ('code' in search) {
+      const res = await JSONRequest('https://github.com/login/oauth/access_token', {
+        code: search.code,
+        client_id: oauth.clientId,
+        client_secret: oauth.clientSecret,
+      })
+      const { access_token: accessToken, scope } = res
+      if (scope !== 'repo' || !accessToken) {
+        throw new Error(`Cannot resolve token response: '${JSON.stringify(res)}'`)
+      }
+      window.history.pushState({}, 'removed code', window.location.pathname.replace(/#.*$/, ''))
+      return accessToken
+    }
+  } catch (err) {
+    raiseError(err)
   }
 }
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 6b4cbbe..3a303c5 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -10,135 +10,92 @@ import { ConnectorState, Props } from 'driver/core/SideBar'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 
-class RawGitako extends React.PureComponent<Props & ConnectorState> {
-  static defaultProps: Partial<Props & ConnectorState> = {
-    baseSize: 260,
-    shouldShow: false,
-    showSettings: false,
-    errorDueToAuth: false,
-    accessToken: '',
-    toggleShowSideBarShortcut: '',
-    compressSingletonFolder: true,
-    copyFileButton: true,
-    copySnippetButton: true,
-    disabled: false,
-  }
-
-  componentDidMount() {
-    const { init, useListeners } = this.props
+const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
+  React.useEffect(() => {
+    const { init, useListeners } = props
     init()
     useListeners(true)
-  }
+    return () => useListeners(false)
+  }, [])
 
-  componentWillUnmount() {
-    const { useListeners } = this.props
-    useListeners(false)
-  }
+  const accessToken = props.configContext.val.access_token
+  React.useEffect(() => {
+    if (accessToken) {
+      // reload when setting new accessToken
+      if (accessToken) props.init()
+    }
+  }, [accessToken, props.init])
 
-  renderAccessDeniedError() {
-    return (
-      <div className={'description'}>
-        <h5>Access Denied</h5>
-        <p>
-          Due to{' '}
-          <a target="_blank" href="https://developer.github.com/v3/#rate-limiting">
-            limitation of GitHub
-          </a>{' '}
-          or{' '}
-          <a target="_blank" href="https://developer.github.com/v3/#authentication">
-            auth needs
-          </a>
-          , Gitako needs access token to continue. Please follow the instructions in the settings
-          panel below.
-        </p>
-      </div>
-    )
-  }
-
-  renderContent() {
-    const {
-      errorDueToAuth,
-      metaData,
-      treeData,
-      showSettings,
-      toggleShowSettings,
-      compressSingletonFolder,
-      accessToken,
-    } = this.props
-    return (
-      <div className={'gitako-side-bar-content'}>
-        {metaData && <MetaBar metaData={metaData} />}
-        {errorDueToAuth
-          ? this.renderAccessDeniedError()
-          : metaData && (
-              <FileExplorer
-                compressSingletonFolder={compressSingletonFolder}
-                toggleShowSettings={toggleShowSettings}
-                metaData={metaData}
-                treeData={treeData}
-                freeze={showSettings}
-                accessToken={accessToken}
-              />
-            )}
-      </div>
-    )
-  }
-
-  render() {
-    const {
-      baseSize,
-      error,
-      shouldShow,
-      showSettings,
-      accessToken,
-      compressSingletonFolder,
-      copyFileButton,
-      copySnippetButton,
-      intelligentToggle,
-      toggleShowSideBarShortcut,
-      logoContainerElement,
-      toggleShowSideBar,
-      toggleShowSettings,
-      onShortcutChange,
-      onAccessTokenChange,
-      setCompressSingleton,
-      setCopyFile,
-      setCopySnippet,
-      setIntelligentToggle,
-    } = this.props
-    return (
-      <div className={'gitako-side-bar'}>
-        <Portal into={logoContainerElement}>
-          <ToggleShowButton
-            error={error}
-            shouldShow={shouldShow}
-            toggleShowSideBar={toggleShowSideBar}
-          />
-        </Portal>
-        <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
-          <div className={'gitako-side-bar-body'}>
-            {this.renderContent()}
-            <SettingsBar
-              toggleShowSettings={toggleShowSettings}
-              onShortcutChange={onShortcutChange}
-              onAccessTokenChange={onAccessTokenChange}
-              activated={showSettings}
-              accessToken={accessToken}
-              toggleShowSideBarShortcut={toggleShowSideBarShortcut}
-              compressSingletonFolder={compressSingletonFolder}
-              copyFileButton={copyFileButton}
-              copySnippetButton={copySnippetButton}
-              intelligentToggle={intelligentToggle}
-              setCompressSingleton={setCompressSingleton}
-              setCopyFile={setCopyFile}
-              setCopySnippet={setCopySnippet}
-              setIntelligentToggle={setIntelligentToggle}
-            />
+  const {
+    errorDueToAuth,
+    metaData,
+    treeData,
+    baseSize,
+    error,
+    shouldShow,
+    showSettings,
+    logoContainerElement,
+    toggleShowSideBar,
+    toggleShowSettings,
+  } = props
+  return (
+    <div className={'gitako-side-bar'}>
+      <Portal into={logoContainerElement}>
+        <ToggleShowButton
+          error={error}
+          shouldShow={shouldShow}
+          toggleShowSideBar={toggleShowSideBar}
+        />
+      </Portal>
+      <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
+        <div className={'gitako-side-bar-body'}>
+          <div className={'gitako-side-bar-content'}>
+            {metaData && <MetaBar metaData={metaData} />}
+            {errorDueToAuth
+              ? renderAccessDeniedError()
+              : metaData && (
+                  <FileExplorer
+                    toggleShowSettings={toggleShowSettings}
+                    metaData={metaData}
+                    treeData={treeData}
+                    freeze={showSettings}
+                    accessToken={accessToken}
+                  />
+                )}
           </div>
-        </Resizable>
-      </div>
-    )
-  }
+          <SettingsBar toggleShowSettings={toggleShowSettings} activated={showSettings} />
+        </div>
+      </Resizable>
+    </div>
+  )
+}
+
+RawGitako.defaultProps = {
+  baseSize: 260,
+  shouldShow: false,
+  showSettings: false,
+  errorDueToAuth: false,
+  disabled: false,
 }
 
 export const SideBar = connect(SideBarCore)(RawGitako)
+
+function renderAccessDeniedError() {
+  return (
+    <div className={'description'}>
+      <h5>Access Denied</h5>
+      <p>
+        Due to{' '}
+        <a target="_blank" href="https://developer.github.com/v3/#rate-limiting">
+          limitation of GitHub
+        </a>{' '}
+        or{' '}
+        <a target="_blank" href="https://developer.github.com/v3/#authentication">
+          auth needs
+        </a>
+        , Gitako needs access token to continue. Please follow the instructions in the settings
+        panel below.
+      </p>
+    </div>
+  )
+}
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
index 9bfb22f..714ce3a 100644
--- a/src/containers/ConfigsContext.tsx
+++ b/src/containers/ConfigsContext.tsx
@@ -15,11 +15,12 @@ export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
     configsHelper.get().then(setConfigs)
   }, [])
   const set = React.useCallback(
-    () => (configs: Config) => {
-      configsHelper.set(configs)
-      setConfigs(configs)
+    (updatedConfigs: Partial<Config>) => {
+      const mergedConfigs = { ...configs, ...updatedConfigs } as Config
+      configsHelper.set(mergedConfigs)
+      setConfigs(mergedConfigs)
     },
-    [setConfigs],
+    [configs, setConfigs],
   )
   if (configs === null) return null
   return (
diff --git a/src/content.less b/src/content.less
index 1c6fdbc..b5b97c8 100644
--- a/src/content.less
+++ b/src/content.less
@@ -473,7 +473,7 @@
           color: #6a737d;
         }
       }
-      .placeholder-row {
+      .header-row {
         flex-shrink: 0;
         display: flex;
         justify-content: space-between;
diff --git a/src/driver/connect.ts b/src/driver/connect.ts
index 6f6165b..0f31303 100644
--- a/src/driver/connect.ts
+++ b/src/driver/connect.ts
@@ -94,10 +94,9 @@ function link<P, S>(instance: React.Component<P, S>, sources: Sources<P, S>): Wr
 }
 
 export function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>) {
-  return function linkComponent<
-    State,
-    ComponentClass extends React.ComponentClass<BaseP & ExtraP, State>
-  >(Component: ComponentClass) {
+  return function linkComponent<State, ComponentType extends React.ComponentType<BaseP & ExtraP>>(
+    Component: ComponentType,
+  ) {
     return class ConnectedComponent extends React.PureComponent<BaseP, ExtraP, State> {
       static displayName = `Connected(${Component.displayName || Component.name})`
       static defaultProps = Component.defaultProps
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index 4d5a4d4..1373e83 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -1,6 +1,7 @@
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import * as ini from 'ini'
 import { Base64 } from 'js-base64'
+import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
 import { findNode, searchKeyToRegexps } from 'utils/general'
 import * as GitHubHelper from 'utils/GitHubHelper'
@@ -13,7 +14,6 @@ export type Props = {
   treeData?: GitHubHelper.TreeData
   metaData: GitHubHelper.MetaData
   freeze: boolean
-  compressSingletonFolder: boolean
   accessToken: string | undefined
   toggleShowSettings: React.MouseEventHandler
 }
@@ -137,7 +137,7 @@ function handleParsed(root: TreeNode, parsed: Parsed) {
 }
 
 export const setUpTree: BoundMethodCreator<
-  [Pick<Props, 'treeData' | 'metaData' | 'compressSingletonFolder' | 'accessToken'>]
+  [Pick<Props, 'treeData' | 'metaData' | 'accessToken'> & Pick<Config, 'compressSingletonFolder'>]
 > = dispatch => async ({ treeData, metaData, compressSingletonFolder, accessToken }) => {
   if (!treeData) return
   dispatch.call(setStateText, 'Rendering File List...')
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 4695afb..6de60da 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,6 +1,5 @@
 import { ConfigsContextShape } from 'containers/ConfigsContext'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
-import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
 import * as GitHubHelper from 'utils/GitHubHelper'
 import { MetaData, TreeData } from 'utils/GitHubHelper'
@@ -34,20 +33,9 @@ export type ConnectorState = {
   toggleShowSideBar: GetCreatedMethod<typeof toggleShowSideBar>
   toggleShowSettings: GetCreatedMethod<typeof toggleShowSettings>
   useListeners: GetCreatedMethod<typeof useListeners>
-  onAccessTokenChange: GetCreatedMethod<typeof onAccessTokenChange>
-  onShortcutChange: GetCreatedMethod<typeof onShortcutChange>
-  setCopyFile: GetCreatedMethod<typeof setCopyFile>
-  setCopySnippet: GetCreatedMethod<typeof setCopySnippet>
-  setCompressSingleton: GetCreatedMethod<typeof setCompressSingleton>
-  setIntelligentToggle: GetCreatedMethod<typeof setIntelligentToggle>
 } & {
   baseSize: number
-  toggleShowSideBarShortcut?: string
-  accessToken?: string
-} & Pick<
-    Config,
-    'compressSingletonFolder' | 'copyFileButton' | 'copySnippetButton' | 'intelligentToggle'
-  >
+}
 
 type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
 
@@ -83,8 +71,6 @@ export const init: BoundMethodCreator = dispatch => async () => {
     const {
       sideBarWidth,
       access_token: accessToken,
-      shortcut,
-      compressSingletonFolder,
       copyFileButton,
       copySnippetButton,
       intelligentToggle,
@@ -92,12 +78,6 @@ export const init: BoundMethodCreator = dispatch => async () => {
     DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
     dispatch.set({
       baseSize: sideBarWidth,
-      accessToken,
-      toggleShowSideBarShortcut: shortcut,
-      compressSingletonFolder,
-      copyFileButton,
-      copySnippetButton,
-      intelligentToggle,
     })
 
     if (!metaData.branchName || !metaData.userName) return
@@ -178,7 +158,14 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err =>
 }
 
 export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
-  const [{ metaData, copyFileButton, copySnippetButton, intelligentToggle }] = dispatch.get()
+  const [
+    { metaData },
+    {
+      configContext: {
+        val: { intelligentToggle, copyFileButton, copySnippetButton },
+      },
+    },
+  ] = dispatch.get()
   DOMHelper.unmountTopProgressBar()
   DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
   const mergedMetaData = { ...metaData, ...URLHelper.parse() }
@@ -190,22 +177,25 @@ export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
 }
 
 export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
-  const [{ toggleShowSideBarShortcut }] = dispatch.get()
-  if (toggleShowSideBarShortcut) {
+  const [
+    ,
+    {
+      configContext: {
+        val: { shortcut },
+      },
+    },
+  ] = dispatch.get()
+  if (shortcut) {
     const keys = keyHelper.parseEvent(e)
-    if (keys === toggleShowSideBarShortcut) {
+    if (keys === shortcut) {
       dispatch.call(toggleShowSideBar)
     }
   }
 }
 
 export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
-  const [{ intelligentToggle, shouldShow }] = dispatch.get()
+  const [{ shouldShow }] = dispatch.get()
   dispatch.call(setShouldShow, !shouldShow)
-
-  if (intelligentToggle !== null) {
-    dispatch.call(setIntelligentToggle, shouldShow)
-  }
 }
 
 export const setShouldShow: BoundMethodCreator<
@@ -229,43 +219,9 @@ export const setShowSettings: BoundMethodCreator<
   [ConnectorState['showSettings']]
 > = dispatch => showSettings => dispatch.set({ showSettings })
 
-export const onAccessTokenChange: BoundMethodCreator<
-  [ConnectorState['accessToken']]
-> = dispatch => accessToken => {
-  dispatch.set({ accessToken })
-  // reload when setting new accessToken
-  if (accessToken) {
-    dispatch.call(init)
-  }
-}
-
-export const onShortcutChange: BoundMethodCreator<
-  [ConnectorState['toggleShowSideBarShortcut']]
-> = dispatch => shortcut => dispatch.set({ toggleShowSideBarShortcut: shortcut })
-
 export const setMetaData: BoundMethodCreator<[ConnectorState['metaData']]> = dispatch => metaData =>
   dispatch.set({ metaData })
 
-export const setCompressSingleton: BoundMethodCreator<
-  [ConnectorState['compressSingletonFolder']]
-> = dispatch => compressSingletonFolder => dispatch.set({ compressSingletonFolder })
-
-export const setCopyFile: BoundMethodCreator<
-  [ConnectorState['copyFileButton']]
-> = dispatch => copyFileButton => dispatch.set({ copyFileButton })
-
-export const setCopySnippet: BoundMethodCreator<
-  [ConnectorState['copySnippetButton']]
-> = dispatch => copySnippetButton => dispatch.set({ copySnippetButton })
-
-export const setIntelligentToggle: BoundMethodCreator<
-  [ConnectorState['intelligentToggle']]
-> = dispatch => intelligentToggle => {
-  const [, { configContext }] = dispatch.get()
-  configContext.set({ intelligentToggle })
-  dispatch.set({ intelligentToggle })
-}
-
 export const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
   const $onPJAXEnd = () => dispatch.call(onPJAXEnd)
   const $onKeyDown = (e: KeyboardEvent) => dispatch.call(onKeyDown, e)
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 258481d..8f24fde 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -54,3 +54,17 @@ export function useStates<S>(
   const [val, set] = React.useState(initialState)
   return { val, set }
 }
+
+export function useAsyncMemo<T, D extends any[] | readonly any[]>(
+  factory: (dependencies: D) => T | Promise<T>,
+  deps: D,
+  initialValue: T,
+): T {
+  const firstTime = React.useRef(true)
+  const state = useStates<T>(() => initialValue)
+  React.useEffect(() => {
+    if (firstTime.current) firstTime.current = false
+    Promise.resolve(factory(deps)).then(consumed => state.set(() => consumed))
+  }, deps)
+  return state.val
+}
diff --git a/tsconfig.json b/tsconfig.json
index e181701..08918c4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,4 @@
 {
-  "files": ["src/content.tsx"],
   "compilerOptions": {
     "target": "es2016",
     "outDir": "dist",

From 819fc17faf3093d35313ac848cf12c040946798e Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 12 Nov 2019 23:36:17 +0800
Subject: [PATCH 14/29] refactor: access token and intelligent toggle

---
 src/components/SettingsBar.tsx | 91 ++++++++++++----------------------
 src/components/SideBar.tsx     | 52 +++++++++++++++----
 src/driver/core/SideBar.ts     |  9 +++-
 3 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 98ac7e1..3d96cd6 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -1,9 +1,8 @@
-import { raiseError } from 'analytics'
 import { Icon } from 'components/Icon'
 import { useConfigs } from 'containers/ConfigsContext'
 import { oauth, VERSION } from 'env'
 import * as React from 'react'
-import { friendlyFormatShortcut, JSONRequest, parseURLSearch } from 'utils/general'
+import { friendlyFormatShortcut } from 'utils/general'
 import { useStates } from 'utils/hooks'
 import * as keyHelper from 'utils/keyHelper'
 import { SimpleField, SimpleFieldInput } from './MoreOption'
@@ -60,19 +59,21 @@ function SettingsBarContent() {
   const useToggleShowSideBarShortcut = useStates(configContext.val.shortcut)
   const useReloadHint = useStates<React.ReactNode>('')
 
-  React.useEffect(() => {
-    if (!configContext.val.access_token) {
-      trySetUpAccessTokenWithCode().then(accessToken => {
-        useAccessToken.set(accessToken)
-        saveToken('')
-      })
-    }
-  }, [])
+  const { val: accessTokenHint } = useAccessTokenHint
+  const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+  const { val: shortcutHint } = useShortcutHint
+  const { val: accessToken } = useAccessToken
+  const { val: reloadHint } = useReloadHint
 
   React.useEffect(() => {
     useToggleShowSideBarShortcut.set(configContext.val.shortcut)
   }, [configContext.val.shortcut])
 
+  React.useEffect(() => {
+    // clear input when access token updates
+    useAccessToken.set('')
+  }, [configContext.val.access_token])
+
   const onInputAccessToken = React.useCallback(
     ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
       useAccessToken.set(value)
@@ -87,28 +88,25 @@ function SettingsBarContent() {
     if (key === 'Enter') saveToken()
   }, [])
 
-  const saveToken = React.useCallback(async (hint?: typeof useAccessTokenHint.val) => {
-    const { val: accessToken } = useAccessToken
-    if (accessToken) {
-      configContext.set({ access_token: accessToken })
-      useAccessToken.set('')
-      useAccessTokenHint.set(
-        hint || (
-          <span>
-            <a href="#" onClick={() => window.location.reload()}>
-              Reload
-            </a>{' '}
-            to activate!
-          </span>
-        ),
-      )
-    }
-  }, [])
-
-  const clearToken = React.useCallback(async () => {
-    configContext.set({ access_token: '' })
-    useAccessToken.set('')
-  }, [])
+  const saveToken = React.useCallback(
+    async (hint?: typeof useAccessTokenHint.val) => {
+      if (accessToken) {
+        configContext.set({ access_token: accessToken })
+        useAccessToken.set('')
+        useAccessTokenHint.set(
+          hint || (
+            <span>
+              <a href="#" onClick={() => window.location.reload()}>
+                Reload
+              </a>{' '}
+              to activate!
+            </span>
+          ),
+        )
+      }
+    },
+    [accessToken],
+  )
 
   const saveShortcut = React.useCallback(async () => {
     const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
@@ -140,12 +138,6 @@ function SettingsBarContent() {
     [],
   )
 
-  const { val: accessTokenHint } = useAccessTokenHint
-  const { val: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-  const { val: shortcutHint } = useShortcutHint
-  const { val: accessToken } = useAccessToken
-  const { val: reloadHint } = useReloadHint
-
   return (
     <>
       <h3 className={'gitako-settings-bar-title'}>Settings</h3>
@@ -182,7 +174,7 @@ function SettingsBarContent() {
               onKeyPress={onPressAccessToken}
             />
             {hasAccessToken && !accessToken ? (
-              <button className={'btn'} onClick={clearToken}>
+              <button className={'btn'} onClick={() => configContext.set({ access_token: '' })}>
                 Clear
               </button>
             ) : (
@@ -264,24 +256,3 @@ export function SettingsBar(props: Props) {
     </div>
   )
 }
-
-async function trySetUpAccessTokenWithCode() {
-  try {
-    const search = parseURLSearch()
-    if ('code' in search) {
-      const res = await JSONRequest('https://github.com/login/oauth/access_token', {
-        code: search.code,
-        client_id: oauth.clientId,
-        client_secret: oauth.clientSecret,
-      })
-      const { access_token: accessToken, scope } = res
-      if (scope !== 'repo' || !accessToken) {
-        throw new Error(`Cannot resolve token response: '${JSON.stringify(res)}'`)
-      }
-      window.history.pushState({}, 'removed code', window.location.pathname.replace(/#.*$/, ''))
-      return accessToken
-    }
-  } catch (err) {
-    raiseError(err)
-  }
-}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 3a303c5..e4eae82 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,30 +1,43 @@
+import { raiseError } from 'analytics'
 import { FileExplorer } from 'components/FileExplorer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
 import { Resizable } from 'components/Resizable'
 import { SettingsBar } from 'components/SettingsBar'
 import { ToggleShowButton } from 'components/ToggleShowButton'
+import { useConfigs } from 'containers/ConfigsContext'
 import { connect } from 'driver/connect'
 import { SideBarCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/SideBar'
+import { oauth } from 'env'
 import * as React from 'react'
 import { cx } from 'utils/cx'
+import { JSONRequest, parseURLSearch } from 'utils/general'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
+  const configContext = useConfigs()
+  const accessToken = props.configContext.val.access_token
+
   React.useEffect(() => {
-    const { init, useListeners } = props
-    init()
+    const { init } = props
+    ;(async function() {
+      if (!accessToken) {
+        const accessToken = await trySetUpAccessTokenWithCode()
+        configContext.set({ access_token: accessToken })
+      }
+      init()
+    })()
+  }, [])
+
+  React.useEffect(() => {
+    const { useListeners } = props
     useListeners(true)
     return () => useListeners(false)
   }, [])
 
-  const accessToken = props.configContext.val.access_token
-  React.useEffect(() => {
-    if (accessToken) {
-      // reload when setting new accessToken
-      if (accessToken) props.init()
-    }
-  }, [accessToken, props.init])
+  // reload when setting new accessToken
+  // special way to implement didUpdate
+  React.useEffect(() => () => props.init(), [accessToken])
 
   const {
     errorDueToAuth,
@@ -99,3 +112,24 @@ function renderAccessDeniedError() {
     </div>
   )
 }
+
+async function trySetUpAccessTokenWithCode() {
+  try {
+    const search = parseURLSearch()
+    if ('code' in search) {
+      const res = await JSONRequest('https://github.com/login/oauth/access_token', {
+        code: search.code,
+        client_id: oauth.clientId,
+        client_secret: oauth.clientSecret,
+      })
+      const { access_token: accessToken, scope } = res
+      if (scope !== 'repo' || !accessToken) {
+        throw new Error(`Cannot resolve token response: '${JSON.stringify(res)}'`)
+      }
+      window.history.pushState({}, 'removed code', window.location.pathname.replace(/#.*$/, ''))
+      return accessToken
+    }
+  } catch (err) {
+    raiseError(err)
+  }
+}
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 6de60da..2a594d1 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -194,8 +194,15 @@ export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
 }
 
 export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
-  const [{ shouldShow }] = dispatch.get()
+  const [{ shouldShow }, { configContext }] = dispatch.get()
   dispatch.call(setShouldShow, !shouldShow)
+
+  const {
+    val: { intelligentToggle },
+  } = configContext
+  if (intelligentToggle !== null) {
+    configContext.set({ intelligentToggle: !shouldShow })
+  }
 }
 
 export const setShouldShow: BoundMethodCreator<

From 943a2ccc4b159273a70e1fdb05ee8c133972a921 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 13:44:57 +0800
Subject: [PATCH 15/29] build: support optional chaining

---
 .babelrc     |  5 +++--
 package.json |  1 +
 yarn.lock    | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/.babelrc b/.babelrc
index e952314..4d21215 100644
--- a/.babelrc
+++ b/.babelrc
@@ -5,13 +5,14 @@
       {
         "targets": {
           "chrome": "67"
-        },
+        }
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react",
+    "@babel/preset-react"
   ],
   "plugins": [
+    "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread"
   ]
diff --git a/package.json b/package.json
index b5d5721..8643643 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
diff --git a/yarn.lock b/yarn.lock
index 4ab28d4..6f77807 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -304,6 +304,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.6.0.tgz#e9bf1f9b9ba10c77c033082da75f068389041af8"
+  integrity sha512-kj4gkZ6qUggkprRq3Uh5KP8XnE1MdIO0J7MhdDX8+rAbB6dJ2UrensGIS+0NPZAaaJ1Vr0PN6oLUgXMU1uMcSg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.2.0"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz#501ffd9826c0b91da22690720722ac7cb1ca9c78"
@@ -355,6 +363,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-optional-chaining@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz#a59d6ae8c167e7608eaa443fda9fa8fa6bf21dff"
+  integrity sha512-HtGCtvp5Uq/jH/WNUPkK6b7rufnCPLLlDAFN7cmACoIjaOOiXxUt3SswU5loHqrhtqTsa/WoLQ1OQ1AGuZqaWA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-typescript@^7.2.0":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"

From 7bee13c6c3177cefc5b6031f0430a1c85424f1d4 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 13:45:33 +0800
Subject: [PATCH 16/29] feat: make clippy button react

---
 src/components/Clippy.tsx | 33 +++++++++++++++++
 src/content.less          |  8 ++---
 src/utils/DOMHelper.ts    | 74 +++++++++------------------------------
 src/utils/general.ts      | 56 +++++++++++++++++------------
 4 files changed, 85 insertions(+), 86 deletions(-)
 create mode 100644 src/components/Clippy.tsx

diff --git a/src/components/Clippy.tsx b/src/components/Clippy.tsx
new file mode 100644
index 0000000..bd397f1
--- /dev/null
+++ b/src/components/Clippy.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { cx } from 'utils/cx'
+import { copyElementContent } from 'utils/DOMHelper'
+
+type Props = {
+  codeSnippetElement: Element
+}
+
+export function Clippy({ codeSnippetElement }: Props) {
+  const [status, setStatus] = React.useState<'normal' | 'success' | 'fail'>('normal')
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setStatus('normal')
+    }, 1000)
+    return () => window.clearTimeout(timer)
+  }, [status])
+
+  const onClippyClick = React.useCallback(function onClippyClick() {
+    if (copyElementContent(codeSnippetElement)) {
+      setStatus('success')
+    } else {
+      setStatus('fail')
+    }
+  }, [])
+
+  return (
+    <div className="clippy-wrapper">
+      <button className="clippy" onClick={onClippyClick}>
+        <i className={cx('icon', status)} />
+      </button>
+    </div>
+  )
+}
diff --git a/src/content.less b/src/content.less
index b5b97c8..b0ac42f 100644
--- a/src/content.less
+++ b/src/content.less
@@ -59,14 +59,10 @@
         background-image: url('~@primer/octicons/build/svg/clippy.svg?inline');
         background-position: center;
         background-repeat: no-repeat;
-      }
-      &.success {
-        .icon {
+        &.success {
           background-image: url('~@primer/octicons/build/svg/check.svg?inline');
         }
-      }
-      &.fail {
-        .icon {
+        &.fail {
           background-image: url('~@primer/octicons/build/svg/x.svg?inline');
         }
       }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 19dab59..46d6c47 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -2,11 +2,13 @@
  * this helper helps manipulating DOM
  */
 import { raiseError } from 'analytics'
+import { Clippy } from 'components/Clippy'
 import { CopyFileButton } from 'components/CopyFileButton'
 import * as NProgress from 'nprogress'
 import * as PJAX from 'pjax'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+import { renderReact } from './general'
 
 NProgress.configure({ showSpinner: false })
 
@@ -37,10 +39,10 @@ function $<EE extends Element, E extends (element: EE) => any, O extends () => a
   otherwise?: O,
 ): E extends never
   ? O extends never
-    ? (Element | null)
+    ? Element | null
     : ReturnType<O> | null
   : O extends never
-  ? (ReturnType<E> | null)
+  ? ReturnType<E> | null
   : ReturnType<O> | ReturnType<E> {
   const element = document.querySelector(selector)
   if (element) {
@@ -221,10 +223,8 @@ export function attachCopyFileBtn() {
 
 /**
  * copy content of a DOM element to clipboard
- * @param {element} element
- * @returns {boolean} whether copy is successful
  */
-export function copyElementContent(element: Element) {
+export function copyElementContent(element: Element): boolean {
   let selection = window.getSelection()
   if (selection) selection.removeAllRanges()
   const range = document.createRange()
@@ -237,54 +237,6 @@ export function copyElementContent(element: Element) {
   return isCopySuccessful
 }
 
-/**
- * create a copy file content button `clippy`
- * once mouse enters a code snippet of markdown, move clippy into it
- * user can copy the snippet's content by click it
- *
- * TODO: 'reactify' it
- */
-function createClippy() {
-  function setTempClippyIconFeedback(clippy: Element, type: 'success' | 'fail') {
-    const tempIconClassName = type === 'success' ? 'success' : 'fail'
-    clippy.classList.add(tempIconClassName)
-    window.setTimeout(() => {
-      clippy.classList.remove(tempIconClassName)
-    }, 1000)
-  }
-
-  /**
-   * <div class="clippy-wrapper">
-   *    <button class="clippy">
-   *      <i class="octicon octicon-clippy" />
-   *    </button>
-   *  </div>
-   */
-  const clippyWrapper = document.createElement('div')
-  clippyWrapper.classList.add('clippy-wrapper')
-  const clippy = document.createElement('button')
-  clippy.classList.add('clippy')
-  const clippyIcon = document.createElement('i')
-  clippyIcon.classList.add('icon')
-
-  clippyWrapper.appendChild(clippy)
-  clippy.appendChild(clippyIcon)
-
-  // set clipboard with current code snippet element's content
-  clippy.addEventListener('click', function onClippyClick() {
-    if (copyElementContent(currentCodeSnippetElement)) {
-      setTempClippyIconFeedback(clippy, 'success')
-    } else {
-      setTempClippyIconFeedback(clippy, 'fail')
-    }
-  })
-
-  return clippyWrapper
-}
-
-const clippy = createClippy()
-
-let currentCodeSnippetElement: Element
 export function attachCopySnippet() {
   const readmeSelector = '.repository-content div#readme'
   return $(readmeSelector, () => {
@@ -292,12 +244,15 @@ export function attachCopySnippet() {
     $(
       readmeArticleSelector,
       readmeElement =>
-        readmeElement.addEventListener('mouseover', e => {
+        readmeElement.addEventListener('mouseover', async e => {
           // only move clippy when mouse is over a new snippet(<pre>)
           const target = e.target as Element
           if (target.nodeName === 'PRE') {
-            if (currentCodeSnippetElement !== target) {
-              currentCodeSnippetElement = target
+            if (
+              target.previousSibling === null ||
+              !(target.previousSibling instanceof Element) ||
+              !target.previousSibling.classList.contains('clippy-wrapper')
+            ) {
               /**
                *  <article>
                *    <pre></pre>     <!-- case A -->
@@ -306,7 +261,12 @@ export function attachCopySnippet() {
                *    </div>
                *  </article>
                */
-              if (target.parentNode) target.parentNode.insertBefore(clippy, target)
+              if (target.parentNode) {
+                const clippyElement = await renderReact(
+                  React.createElement(Clippy, { codeSnippetElement: target }),
+                )
+                target.parentNode.insertBefore(clippyElement, target)
+              }
             }
           }
         }),
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 9fc3281..cde3a0d 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -1,16 +1,15 @@
+import { ReactElement } from 'react'
+import * as ReactDOM from 'react-dom'
 import { TreeNode } from './VisibleNodesGenerator'
 
 export function pick<T>(source: T, keys: string[]): Partial<T> {
   if (keys && typeof keys === 'object') {
-    return (Array.isArray(keys) ? keys : Object.keys(keys)).reduce(
-      (copy, key) => {
-        if (key in source) {
-          copy[key as keyof T] = source[key as keyof T]
-        }
-        return copy
-      },
-      {} as Partial<T>,
-    )
+    return (Array.isArray(keys) ? keys : Object.keys(keys)).reduce((copy, key) => {
+      if (key in source) {
+        copy[key as keyof T] = source[key as keyof T]
+      }
+      return copy
+    }, {} as Partial<T>)
   }
   return {} as Partial<T>
 }
@@ -114,20 +113,22 @@ export function parseURLSearch(search: string = window.location.search) {
 }
 
 export async function JSONRequest(url: string, data: any, extra: RequestInit = { method: 'post' }) {
-  return (await fetch(url, {
-    mode: 'cors',
-    cache: 'no-cache',
-    credentials: 'same-origin',
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-    },
-    redirect: 'follow',
-    referrerPolicy: 'no-referrer',
-    method: extra.method || 'post',
-    body: JSON.stringify(data),
-    ...extra,
-  })).json()
+  return (
+    await fetch(url, {
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer',
+      method: extra.method || 'post',
+      body: JSON.stringify(data),
+      ...extra,
+    })
+  ).json()
 }
 
 export function searchKeyToRegexps(searchKey: string) {
@@ -140,3 +141,12 @@ export function searchKeyToRegexps(searchKey: string) {
     return [/$^/] // matching nothing if failed transforming regexp
   }
 }
+
+export async function renderReact(element: ReactElement) {
+  return new Promise<Node>(resolve => {
+    const mount = document.createElement('div')
+    ReactDOM.render(element, mount, () => {
+      resolve(mount.childNodes[0])
+    })
+  })
+}

From d4e4f777775eb7607af52310145510458ebd8be3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 14:45:58 +0800
Subject: [PATCH 17/29] refactor: extract useListener

---
 src/components/SideBar.tsx | 31 +++++++++++++++++++--
 src/driver/core/SideBar.ts | 57 +++++---------------------------------
 2 files changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index e4eae82..a58639e 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -12,7 +12,9 @@ import { ConnectorState, Props } from 'driver/core/SideBar'
 import { oauth } from 'env'
 import * as React from 'react'
 import { cx } from 'utils/cx'
+import * as DOMHelper from 'utils/DOMHelper'
 import { JSONRequest, parseURLSearch } from 'utils/general'
+import * as keyHelper from 'utils/keyHelper'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const configContext = useConfigs()
@@ -29,10 +31,33 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     })()
   }, [])
 
+  const onKeyDown = React.useCallback(
+    configContext.val.shortcut
+      ? (e: KeyboardEvent) => {
+          const keys = keyHelper.parseEvent(e)
+          if (keys === configContext.val.shortcut) {
+            props.toggleShowSideBar()
+          }
+        }
+      : () => {},
+    [configContext.val.shortcut],
+  )
+
   React.useEffect(() => {
-    const { useListeners } = props
-    useListeners(true)
-    return () => useListeners(false)
+    if (props.disabled) return
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [props.disabled, onKeyDown])
+
+  React.useEffect(() => {
+    if (props.disabled) return
+    window.addEventListener('pjax:complete', props.onPJAXEnd)
+    return () => window.removeEventListener('pjax:complete', props.onPJAXEnd)
+  }, [props.disabled])
+
+  React.useEffect(() => {
+    const { copyFileButton, copySnippetButton } = configContext.val
+    DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
   }, [])
 
   // reload when setting new accessToken
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 2a594d1..3fd03d8 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -3,7 +3,6 @@ import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import * as DOMHelper from 'utils/DOMHelper'
 import * as GitHubHelper from 'utils/GitHubHelper'
 import { MetaData, TreeData } from 'utils/GitHubHelper'
-import * as keyHelper from 'utils/keyHelper'
 import * as URLHelper from 'utils/URLHelper'
 
 export type Props = {
@@ -29,10 +28,8 @@ export type ConnectorState = {
 } & {
   init: GetCreatedMethod<typeof init>
   onPJAXEnd: GetCreatedMethod<typeof onPJAXEnd>
-  onKeyDown: GetCreatedMethod<typeof onKeyDown>
   toggleShowSideBar: GetCreatedMethod<typeof toggleShowSideBar>
   toggleShowSettings: GetCreatedMethod<typeof toggleShowSettings>
-  useListeners: GetCreatedMethod<typeof useListeners>
 } & {
   baseSize: number
 }
@@ -68,14 +65,7 @@ export const init: BoundMethodCreator = dispatch => async () => {
     metaData.branchName = detectedBranchName || 'master'
     dispatch.call(setMetaData, metaData)
     const [, { configContext }] = dispatch.get()
-    const {
-      sideBarWidth,
-      access_token: accessToken,
-      copyFileButton,
-      copySnippetButton,
-      intelligentToggle,
-    } = configContext.val
-    DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
+    const { sideBarWidth, access_token: accessToken, intelligentToggle } = configContext.val
     dispatch.set({
       baseSize: sideBarWidth,
     })
@@ -151,7 +141,6 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err =>
     dispatch.call(setShowSettings, true)
     dispatch.call(setShouldShow, true)
   } else {
-    dispatch.call(useListeners, false)
     dispatch.call(setError, 'Gitako ate a bug, but it should recovery soon!')
     throw err
   }
@@ -176,23 +165,6 @@ export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
   }
 }
 
-export const onKeyDown: BoundMethodCreator<[KeyboardEvent]> = dispatch => e => {
-  const [
-    ,
-    {
-      configContext: {
-        val: { shortcut },
-      },
-    },
-  ] = dispatch.get()
-  if (shortcut) {
-    const keys = keyHelper.parseEvent(e)
-    if (keys === shortcut) {
-      dispatch.call(toggleShowSideBar)
-    }
-  }
-}
-
 export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
   const [{ shouldShow }, { configContext }] = dispatch.get()
   dispatch.call(setShouldShow, !shouldShow)
@@ -205,9 +177,9 @@ export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
   }
 }
 
-export const setShouldShow: BoundMethodCreator<
-  [ConnectorState['shouldShow']]
-> = dispatch => shouldShow => {
+export const setShouldShow: BoundMethodCreator<[
+  ConnectorState['shouldShow'],
+]> = dispatch => shouldShow => {
   dispatch.set({ shouldShow }, shouldShow ? DOMHelper.focusFileExplorer : undefined)
   DOMHelper.setBodyIndent(shouldShow)
 }
@@ -222,24 +194,9 @@ export const toggleShowSettings: BoundMethodCreator = dispatch => () =>
     showSettings: !showSettings,
   }))
 
-export const setShowSettings: BoundMethodCreator<
-  [ConnectorState['showSettings']]
-> = dispatch => showSettings => dispatch.set({ showSettings })
+export const setShowSettings: BoundMethodCreator<[
+  ConnectorState['showSettings'],
+]> = dispatch => showSettings => dispatch.set({ showSettings })
 
 export const setMetaData: BoundMethodCreator<[ConnectorState['metaData']]> = dispatch => metaData =>
   dispatch.set({ metaData })
-
-export const useListeners: BoundMethodCreator<[boolean]> = dispatch => {
-  const $onPJAXEnd = () => dispatch.call(onPJAXEnd)
-  const $onKeyDown = (e: KeyboardEvent) => dispatch.call(onKeyDown, e)
-  return on => {
-    const [{ disabled }] = dispatch.get()
-    if (on && !disabled) {
-      window.addEventListener('pjax:complete', $onPJAXEnd)
-      window.addEventListener('keydown', $onKeyDown)
-    } else {
-      window.removeEventListener('pjax:complete', $onPJAXEnd)
-      window.removeEventListener('keydown', $onKeyDown)
-    }
-  }
-}

From be6d95355c314ea82a8a34cafa6e4d3eaa670605 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 14:57:03 +0800
Subject: [PATCH 18/29] fix: deprecate hacky did-update

---
 src/components/SideBar.tsx |  6 +++---
 src/utils/hooks.ts         | 11 +++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index a58639e..c2d40ca 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -14,6 +14,7 @@ import * as React from 'react'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
 import { JSONRequest, parseURLSearch } from 'utils/general'
+import { useDidUpdate } from 'utils/hooks'
 import * as keyHelper from 'utils/keyHelper'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
@@ -60,9 +61,8 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
   }, [])
 
-  // reload when setting new accessToken
-  // special way to implement didUpdate
-  React.useEffect(() => () => props.init(), [accessToken])
+  // init again when setting new accessToken
+  useDidUpdate(() => props.init(), [accessToken])
 
   const {
     errorDueToAuth,
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 8f24fde..fe55030 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -68,3 +68,14 @@ export function useAsyncMemo<T, D extends any[] | readonly any[]>(
   }, deps)
   return state.val
 }
+
+export function useDidUpdate(effect: React.EffectCallback, deps?: React.DependencyList) {
+  const firstTime = React.useRef(true)
+  React.useEffect(() => {
+    if (firstTime.current) {
+      firstTime.current = false
+      return
+    }
+    return effect()
+  }, deps)
+}

From 2c4af434851682a9cd9f464e63737c01263f3e59 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 15:05:14 +0800
Subject: [PATCH 19/29] refactor: extract onPJAXEnd

---
 src/components/SideBar.tsx | 19 +++++++++++++++----
 src/driver/core/SideBar.ts | 22 ++--------------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index c2d40ca..f02d6c5 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -16,6 +16,7 @@ import * as DOMHelper from 'utils/DOMHelper'
 import { JSONRequest, parseURLSearch } from 'utils/general'
 import { useDidUpdate } from 'utils/hooks'
 import * as keyHelper from 'utils/keyHelper'
+import * as URLHelper from 'utils/URLHelper'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const configContext = useConfigs()
@@ -50,16 +51,26 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [props.disabled, onKeyDown])
 
+  const onPJAXEnd = React.useCallback(() => {
+    DOMHelper.unmountTopProgressBar()
+    const mergedMetaData = { ...props.metaData, ...URLHelper.parse() }
+    props.setMetaData(mergedMetaData)
+
+    if (configContext.val.intelligentToggle === null) {
+      props.setShouldShow(URLHelper.isInCodePage(mergedMetaData))
+    }
+  }, [props.metaData, configContext.val.intelligentToggle])
+
   React.useEffect(() => {
     if (props.disabled) return
-    window.addEventListener('pjax:complete', props.onPJAXEnd)
-    return () => window.removeEventListener('pjax:complete', props.onPJAXEnd)
-  }, [props.disabled])
+    window.addEventListener('pjax:complete', onPJAXEnd)
+    return () => window.removeEventListener('pjax:complete', onPJAXEnd)
+  }, [props.disabled, onPJAXEnd])
 
   React.useEffect(() => {
     const { copyFileButton, copySnippetButton } = configContext.val
     DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
-  }, [])
+  }, [props.metaData])
 
   // init again when setting new accessToken
   useDidUpdate(() => props.init(), [accessToken])
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index 3fd03d8..f8f282d 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -27,7 +27,8 @@ export type ConnectorState = {
   initializingPromise: Promise<void> | null
 } & {
   init: GetCreatedMethod<typeof init>
-  onPJAXEnd: GetCreatedMethod<typeof onPJAXEnd>
+  setMetaData: GetCreatedMethod<typeof setMetaData>
+  setShouldShow: GetCreatedMethod<typeof setShouldShow>
   toggleShowSideBar: GetCreatedMethod<typeof toggleShowSideBar>
   toggleShowSettings: GetCreatedMethod<typeof toggleShowSettings>
 } & {
@@ -146,25 +147,6 @@ export const handleError: BoundMethodCreator<[Error]> = dispatch => async err =>
   }
 }
 
-export const onPJAXEnd: BoundMethodCreator = dispatch => () => {
-  const [
-    { metaData },
-    {
-      configContext: {
-        val: { intelligentToggle, copyFileButton, copySnippetButton },
-      },
-    },
-  ] = dispatch.get()
-  DOMHelper.unmountTopProgressBar()
-  DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
-  const mergedMetaData = { ...metaData, ...URLHelper.parse() }
-  dispatch.call(setMetaData, mergedMetaData)
-
-  if (intelligentToggle === null) {
-    dispatch.call(setShouldShow, URLHelper.isInCodePage(mergedMetaData))
-  }
-}
-
 export const toggleShowSideBar: BoundMethodCreator = dispatch => () => {
   const [{ shouldShow }, { configContext }] = dispatch.get()
   dispatch.call(setShouldShow, !shouldShow)

From 0f884e26dd9e9c23b6d0c8923cee4ab00cdad886 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 15:45:36 +0800
Subject: [PATCH 20/29] refactor: cancel add buttons

---
 src/components/SideBar.tsx | 24 +++++++++++++++---------
 src/utils/DOMHelper.ts     | 28 +++++++++-------------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f02d6c5..cf38dc8 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -53,13 +53,8 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
 
   const onPJAXEnd = React.useCallback(() => {
     DOMHelper.unmountTopProgressBar()
-    const mergedMetaData = { ...props.metaData, ...URLHelper.parse() }
-    props.setMetaData(mergedMetaData)
-
-    if (configContext.val.intelligentToggle === null) {
-      props.setShouldShow(URLHelper.isInCodePage(mergedMetaData))
-    }
-  }, [props.metaData, configContext.val.intelligentToggle])
+    props.setMetaData({ ...props.metaData, ...URLHelper.parse() })
+  }, [props.metaData])
 
   React.useEffect(() => {
     if (props.disabled) return
@@ -68,8 +63,19 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   }, [props.disabled, onPJAXEnd])
 
   React.useEffect(() => {
-    const { copyFileButton, copySnippetButton } = configContext.val
-    DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
+    if (configContext.val.intelligentToggle === null) {
+      props.setShouldShow(URLHelper.isInCodePage(props.metaData))
+    }
+  }, [props.metaData, configContext.val.intelligentToggle])
+
+  React.useEffect(() => {
+    const { copyFileButton } = configContext.val
+    if (copyFileButton) return DOMHelper.attachCopyFileBtn()
+  }, [props.metaData])
+
+  React.useEffect(() => {
+    const { copySnippetButton } = configContext.val
+    if (copySnippetButton) DOMHelper.attachCopySnippet()
   }, [props.metaData])
 
   // init again when setting new accessToken
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 46d6c47..3de1476 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -209,6 +209,7 @@ export function attachCopyFileBtn() {
       raiseError(new Error(`No button groups found`))
     }
 
+    const buttons: HTMLElement[] = []
     buttonGroups.forEach(buttonGroup => {
       if (!buttonGroup.lastElementChild) return
       const portal = ReactDOM.createPortal(React.createElement(CopyFileButton), buttonGroup)
@@ -217,7 +218,12 @@ export function attachCopyFileBtn() {
       buttonGroup.appendChild(seedElementForButton)
       ReactDOM.render(portal, seedElementForButton)
       buttonGroup.removeChild(seedElementForButton)
+      buttons.push(seedElementForButton)
     })
+    return () =>
+      buttons.forEach(button => {
+        button.parentElement?.removeChild(button)
+      })
   }
 }
 
@@ -241,13 +247,11 @@ export function attachCopySnippet() {
   const readmeSelector = '.repository-content div#readme'
   return $(readmeSelector, () => {
     const readmeArticleSelector = '.repository-content div#readme article'
-    $(
+    return $(
       readmeArticleSelector,
       readmeElement =>
-        readmeElement.addEventListener('mouseover', async e => {
-          // only move clippy when mouse is over a new snippet(<pre>)
-          const target = e.target as Element
-          if (target.nodeName === 'PRE') {
+        readmeElement.addEventListener('mouseover', async ({ target }) => {
+          if (target instanceof Element && target.nodeName === 'PRE') {
             if (
               target.previousSibling === null ||
               !(target.previousSibling instanceof Element) ||
@@ -304,20 +308,6 @@ export function focusSearchInput() {
   })
 }
 
-/**
- * a combination of few above functions
- */
-export function decorateGitHubPageContent({
-  copyFileButton,
-  copySnippetButton,
-}: {
-  copyFileButton: boolean
-  copySnippetButton: boolean
-}) {
-  if (copyFileButton) attachCopyFileBtn()
-  if (copySnippetButton) attachCopySnippet()
-}
-
 export function mountTopProgressBar() {
   NProgress.start()
 }

From 6f4c26d36be175a86b18a0e34ae5c909217ba553 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 16:20:03 +0800
Subject: [PATCH 21/29] feat: apply settings updates instantly

---
 src/components/SettingsBar.tsx | 20 +-------------------
 src/components/SideBar.tsx     | 15 ++++++++-------
 src/utils/DOMHelper.ts         | 30 ++++++++++++++++++------------
 3 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 3d96cd6..c7d75a2 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -124,20 +124,6 @@ function SettingsBarContent() {
     useToggleShowSideBarShortcut.set(shortcut)
   }, [])
 
-  const showReloadHint = React.useCallback(
-    () =>
-      useReloadHint.set(
-        <span>
-          Saved,{' '}
-          <a href="#" onClick={() => window.location.reload()}>
-            reload
-          </a>{' '}
-          to apply.
-        </span>,
-      ),
-    [],
-  )
-
   return (
     <>
       <h3 className={'gitako-settings-bar-title'}>Settings</h3>
@@ -207,11 +193,7 @@ function SettingsBarContent() {
           <h4>More Options</h4>
           {moreFields.map(field => (
             <React.Fragment key={field.key}>
-              <SimpleFieldInput
-                field={field}
-                overwrite={field.overwrite}
-                onChange={showReloadHint}
-              />
+              <SimpleFieldInput field={field} overwrite={field.overwrite} />
               <br />
             </React.Fragment>
           ))}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index cf38dc8..8ff4539 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -54,7 +54,10 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const onPJAXEnd = React.useCallback(() => {
     DOMHelper.unmountTopProgressBar()
     props.setMetaData({ ...props.metaData, ...URLHelper.parse() })
-  }, [props.metaData])
+    // TODO: update state to re-trigger DOM effects
+    // if (configContext.val.copyFileButton) DOMHelper.attachCopyFileBtn()
+    // if (configContext.val.copySnippetButton) DOMHelper.attachCopySnippet()
+  }, [props.metaData, configContext.val])
 
   React.useEffect(() => {
     if (props.disabled) return
@@ -69,14 +72,12 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   }, [props.metaData, configContext.val.intelligentToggle])
 
   React.useEffect(() => {
-    const { copyFileButton } = configContext.val
-    if (copyFileButton) return DOMHelper.attachCopyFileBtn()
-  }, [props.metaData])
+    if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn()
+  }, [configContext.val.copyFileButton])
 
   React.useEffect(() => {
-    const { copySnippetButton } = configContext.val
-    if (copySnippetButton) DOMHelper.attachCopySnippet()
-  }, [props.metaData])
+    if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet()
+  }, [configContext.val.copySnippetButton])
 
   // init again when setting new accessToken
   useDidUpdate(() => props.init(), [accessToken])
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 3de1476..b736540 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -7,7 +7,6 @@ import { CopyFileButton } from 'components/CopyFileButton'
 import * as NProgress from 'nprogress'
 import * as PJAX from 'pjax'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import { renderReact } from './general'
 
 NProgress.configure({ showSpinner: false })
@@ -210,15 +209,13 @@ export function attachCopyFileBtn() {
     }
 
     const buttons: HTMLElement[] = []
-    buttonGroups.forEach(buttonGroup => {
+    buttonGroups.forEach(async buttonGroup => {
       if (!buttonGroup.lastElementChild) return
-      const portal = ReactDOM.createPortal(React.createElement(CopyFileButton), buttonGroup)
-      // creating a element for mounting button into button group, somehow hack
-      const seedElementForButton = document.createElement('a')
-      buttonGroup.appendChild(seedElementForButton)
-      ReactDOM.render(portal, seedElementForButton)
-      buttonGroup.removeChild(seedElementForButton)
-      buttons.push(seedElementForButton)
+      const button = await renderReact(React.createElement(CopyFileButton))
+      if (button instanceof HTMLElement) {
+        buttonGroup.appendChild(button)
+        buttons.push(button)
+      }
     })
     return () =>
       buttons.forEach(button => {
@@ -249,7 +246,8 @@ export function attachCopySnippet() {
     const readmeArticleSelector = '.repository-content div#readme article'
     return $(
       readmeArticleSelector,
-      readmeElement =>
+      readmeElement => {
+        const buttons: HTMLElement[] = []
         readmeElement.addEventListener('mouseover', async ({ target }) => {
           if (target instanceof Element && target.nodeName === 'PRE') {
             if (
@@ -269,11 +267,19 @@ export function attachCopySnippet() {
                 const clippyElement = await renderReact(
                   React.createElement(Clippy, { codeSnippetElement: target }),
                 )
-                target.parentNode.insertBefore(clippyElement, target)
+                if (clippyElement instanceof HTMLElement) {
+                  target.parentNode.insertBefore(clippyElement, target)
+                  buttons.push(clippyElement)
+                }
               }
             }
           }
-        }),
+        })
+        return () =>
+          buttons.forEach(button => {
+            button.parentElement?.removeChild(button)
+          })
+      },
       () => {
         const plainReadmeSelector = '.repository-content div#readme .plain'
         $(plainReadmeSelector, undefined, () =>

From 26d0b189bc731ea21d55a3b611039eee87304acc Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Nov 2019 16:23:23 +0800
Subject: [PATCH 22/29] fix: resolve return value for effects

---
 src/components/SideBar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 8ff4539..08a0a21 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -72,15 +72,17 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   }, [props.metaData, configContext.val.intelligentToggle])
 
   React.useEffect(() => {
-    if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn()
+    if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn() || undefined // undefined is friendlier to React
   }, [configContext.val.copyFileButton])
 
   React.useEffect(() => {
-    if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet()
+    if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet() || undefined // undefined is friendlier to React
   }, [configContext.val.copySnippetButton])
 
   // init again when setting new accessToken
-  useDidUpdate(() => props.init(), [accessToken])
+  useDidUpdate(() => {
+    props.init()
+  }, [accessToken])
 
   const {
     errorDueToAuth,

From d830741968d4b27b2439af5bfbf2dc1cb9e28be5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Nov 2019 16:26:15 +0800
Subject: [PATCH 23/29] feat: ErrorBoundary

---
 src/components/ErrorBoundary.tsx | 12 ++++++++++++
 src/components/Gitako.tsx        | 16 ++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ErrorBoundary.tsx

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..0f8c74e
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,12 @@
+import { raiseError } from 'analytics'
+import * as React from 'react'
+
+export class ErrorBoundary extends React.PureComponent {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    raiseError(error, errorInfo)
+  }
+
+  render() {
+    return this.props.children
+  }
+}
diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 28ace02..7c68258 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,20 +1,16 @@
-import { raiseError } from 'analytics'
 import { SideBar } from 'components/SideBar'
 import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
+import { ErrorBoundary } from './ErrorBoundary'
 
-export class Gitako extends React.PureComponent {
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    raiseError(error, errorInfo)
-  }
-
-  render() {
-    return (
+export function Gitako() {
+  return (
+    <ErrorBoundary>
       <ConfigsContextWrapper>
         <ConfigsContext.Consumer>
           {configContext => configContext && <SideBar configContext={configContext} />}
         </ConfigsContext.Consumer>
       </ConfigsContextWrapper>
-    )
-  }
+    </ErrorBoundary>
+  )
 }

From dd9cc2d0c0299daa6ddc53b6d05ba2c7bb2f37cf Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Nov 2019 16:28:38 +0800
Subject: [PATCH 24/29] fix: prevent reset file tree on pjax

---
 src/components/FileExplorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 60e95ab..a2a9020 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -29,7 +29,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
   React.useEffect(() => {
     const { setUpTree, treeData, metaData } = props
     setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
-  }, [props.setUpTree, props.treeData, props.metaData, compressSingletonFolder, accessToken])
+  }, [props.setUpTree, props.treeData, compressSingletonFolder, accessToken])
 
   React.useEffect(() => {
     const { execAfterRender } = props

From e1cd6c95b8c19271ed9d54f85f58629b8f0d0054 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Nov 2019 17:15:02 +0800
Subject: [PATCH 25/29] fix: time function for Firefox

---
 src/firefox-shim.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/firefox-shim.js b/src/firefox-shim.js
index 8e949c4..205efab 100644
--- a/src/firefox-shim.js
+++ b/src/firefox-shim.js
@@ -1 +1,3 @@
 window.requestAnimationFrame = window.requestAnimationFrame.bind(window)
+window.setTimeout = window.setTimeout.bind(window)
+window.clearTimeout = window.clearTimeout.bind(window)

From e09935230d2111406308d48e70f0958fb6f16de0 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Nov 2019 17:33:31 +0800
Subject: [PATCH 26/29] feat: onPJAXComplete

---
 src/components/SideBar.tsx | 30 +++++++++++++++++++++---------
 src/utils/DOMHelper.ts     |  2 ++
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 08a0a21..ecdbee6 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -51,19 +51,24 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [props.disabled, onKeyDown])
 
-  const onPJAXEnd = React.useCallback(() => {
+  const updateMeta = React.useCallback(() => {
+    if (props.disabled) return
     DOMHelper.unmountTopProgressBar()
     props.setMetaData({ ...props.metaData, ...URLHelper.parse() })
-    // TODO: update state to re-trigger DOM effects
-    // if (configContext.val.copyFileButton) DOMHelper.attachCopyFileBtn()
-    // if (configContext.val.copySnippetButton) DOMHelper.attachCopySnippet()
-  }, [props.metaData, configContext.val])
+  }, [props.disabled, props.metaData, configContext.val])
+  useOnPJAXComplete(updateMeta)
 
-  React.useEffect(() => {
+  const attachCopyFileButton = React.useCallback(() => {
     if (props.disabled) return
-    window.addEventListener('pjax:complete', onPJAXEnd)
-    return () => window.removeEventListener('pjax:complete', onPJAXEnd)
-  }, [props.disabled, onPJAXEnd])
+    if (configContext.val.copyFileButton) return DOMHelper.attachCopyFileBtn()
+  }, [props.disabled, configContext.val.copyFileButton])
+  useOnPJAXComplete(attachCopyFileButton)
+
+  const attachCopySnippetButton = React.useCallback(() => {
+    if (props.disabled) return
+    if (configContext.val.copySnippetButton) return DOMHelper.attachCopySnippet()
+  }, [props.disabled, configContext.val.copySnippetButton])
+  useOnPJAXComplete(attachCopySnippetButton)
 
   React.useEffect(() => {
     if (configContext.val.intelligentToggle === null) {
@@ -138,6 +143,13 @@ RawGitako.defaultProps = {
 
 export const SideBar = connect(SideBarCore)(RawGitako)
 
+function useOnPJAXComplete(onPJAXComplete: () => void, deps: React.DependencyList = []) {
+  React.useEffect(() => {
+    window.addEventListener('pjax:complete', onPJAXComplete)
+    return () => window.removeEventListener('pjax:complete', onPJAXComplete)
+  }, [onPJAXComplete, ...deps])
+}
+
 function renderAccessDeniedError() {
   return (
     <div className={'description'}>
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index b736540..8c5782e 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -217,6 +217,7 @@ export function attachCopyFileBtn() {
         buttons.push(button)
       }
     })
+    // TODO: query from DOM again when detach
     return () =>
       buttons.forEach(button => {
         button.parentElement?.removeChild(button)
@@ -275,6 +276,7 @@ export function attachCopySnippet() {
             }
           }
         })
+        // TODO: query from DOM again when detach
         return () =>
           buttons.forEach(button => {
             button.parentElement?.removeChild(button)

From a642a701d03bc9df7c5a9d0afd043b4da2d8e028 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Nov 2019 14:48:00 +0800
Subject: [PATCH 27/29] refactor: useEvent

---
 src/components/SideBar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index ecdbee6..82bdbdc 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -143,13 +143,19 @@ RawGitako.defaultProps = {
 
 export const SideBar = connect(SideBarCore)(RawGitako)
 
-function useOnPJAXComplete(onPJAXComplete: () => void, deps: React.DependencyList = []) {
+function useEvent<
+  T extends {
+    addEventListener: Function
+  }
+>(target: T, event: string, callback: () => void, deps: React.DependencyList = []) {
   React.useEffect(() => {
-    window.addEventListener('pjax:complete', onPJAXComplete)
-    return () => window.removeEventListener('pjax:complete', onPJAXComplete)
-  }, [onPJAXComplete, ...deps])
+    window.addEventListener('pjax:complete', callback)
+    return () => window.removeEventListener('pjax:complete', callback)
+  }, [callback, ...deps])
 }
 
+const useOnPJAXComplete = useEvent.bind(null, window, 'pjax:complete')
+
 function renderAccessDeniedError() {
   return (
     <div className={'description'}>

From d84f7f07fcd37eedfa64d0e2387250218089392f Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Nov 2019 14:48:22 +0800
Subject: [PATCH 28/29] fix: detach button

---
 src/components/Clippy.tsx         |  5 ++++-
 src/components/CopyFileButton.tsx |  6 +++++-
 src/utils/DOMHelper.ts            | 28 ++++++++++++++--------------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/Clippy.tsx b/src/components/Clippy.tsx
index bd397f1..86ba87f 100644
--- a/src/components/Clippy.tsx
+++ b/src/components/Clippy.tsx
@@ -6,6 +6,9 @@ type Props = {
   codeSnippetElement: Element
 }
 
+const className = 'clippy-wrapper'
+export const ClippyClassName = className
+
 export function Clippy({ codeSnippetElement }: Props) {
   const [status, setStatus] = React.useState<'normal' | 'success' | 'fail'>('normal')
   React.useEffect(() => {
@@ -24,7 +27,7 @@ export function Clippy({ codeSnippetElement }: Props) {
   }, [])
 
   return (
-    <div className="clippy-wrapper">
+    <div className={className}>
       <button className="clippy" onClick={onClippyClick}>
         <i className={cx('icon', status)} />
       </button>
diff --git a/src/components/CopyFileButton.tsx b/src/components/CopyFileButton.tsx
index 11bcda4..dba3066 100644
--- a/src/components/CopyFileButton.tsx
+++ b/src/components/CopyFileButton.tsx
@@ -1,8 +1,12 @@
 import * as React from 'react'
+import { cx } from 'utils/cx'
 import { copyElementContent, getCodeElement } from 'utils/DOMHelper'
 
 type Props = {}
 
+const className = 'gitako-copy-file-button'
+export const copyFileButtonClassName = className
+
 export function CopyFileButton(props: React.PropsWithChildren<Props>) {
   const contents = {
     success: 'Success!',
@@ -20,7 +24,7 @@ export function CopyFileButton(props: React.PropsWithChildren<Props>) {
   }, [content])
   return (
     <a
-      className="btn btn-sm BtnGroup-item copy-file-btn"
+      className={cx('btn btn-sm BtnGroup-item copy-file-btn', className)}
       onClick={() => {
         const codeElement = getCodeElement()
         if (codeElement) {
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 8c5782e..613f5c4 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -2,8 +2,8 @@
  * this helper helps manipulating DOM
  */
 import { raiseError } from 'analytics'
-import { Clippy } from 'components/Clippy'
-import { CopyFileButton } from 'components/CopyFileButton'
+import { Clippy, ClippyClassName } from 'components/Clippy'
+import { CopyFileButton, copyFileButtonClassName } from 'components/CopyFileButton'
 import * as NProgress from 'nprogress'
 import * as PJAX from 'pjax'
 import * as React from 'react'
@@ -130,7 +130,7 @@ const pjax = new PJAX({
 })
 
 export function loadWithPJAX(URL: string) {
-  NProgress.start()
+  mountTopProgressBar()
   pjax.loadUrl(URL, { scrollTo: 0 })
 }
 
@@ -208,20 +208,19 @@ export function attachCopyFileBtn() {
       raiseError(new Error(`No button groups found`))
     }
 
-    const buttons: HTMLElement[] = []
     buttonGroups.forEach(async buttonGroup => {
       if (!buttonGroup.lastElementChild) return
       const button = await renderReact(React.createElement(CopyFileButton))
       if (button instanceof HTMLElement) {
         buttonGroup.appendChild(button)
-        buttons.push(button)
       }
     })
-    // TODO: query from DOM again when detach
-    return () =>
+    return () => {
+      const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`)
       buttons.forEach(button => {
         button.parentElement?.removeChild(button)
       })
+    }
   }
 }
 
@@ -248,13 +247,12 @@ export function attachCopySnippet() {
     return $(
       readmeArticleSelector,
       readmeElement => {
-        const buttons: HTMLElement[] = []
-        readmeElement.addEventListener('mouseover', async ({ target }) => {
+        const mouseOverCallback = async ({ target }: Event): Promise<void> => {
           if (target instanceof Element && target.nodeName === 'PRE') {
             if (
               target.previousSibling === null ||
               !(target.previousSibling instanceof Element) ||
-              !target.previousSibling.classList.contains('clippy-wrapper')
+              !target.previousSibling.classList.contains(ClippyClassName)
             ) {
               /**
                *  <article>
@@ -270,17 +268,19 @@ export function attachCopySnippet() {
                 )
                 if (clippyElement instanceof HTMLElement) {
                   target.parentNode.insertBefore(clippyElement, target)
-                  buttons.push(clippyElement)
                 }
               }
             }
           }
-        })
-        // TODO: query from DOM again when detach
-        return () =>
+        }
+        readmeElement.addEventListener('mouseover', mouseOverCallback)
+        return () => {
+          readmeElement.removeEventListener('mouseover', mouseOverCallback)
+          const buttons = document.querySelectorAll(`.${ClippyClassName}`)
           buttons.forEach(button => {
             button.parentElement?.removeChild(button)
           })
+        }
       },
       () => {
         const plainReadmeSelector = '.repository-content div#readme .plain'

From e2dfe89901c2feb8174d2e73367668de47c71853 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Nov 2019 18:09:33 +0800
Subject: [PATCH 29/29] fix: search case-insensitive

---
 src/utils/general.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/general.ts b/src/utils/general.ts
index cde3a0d..0b4e218 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -135,8 +135,9 @@ export function searchKeyToRegexps(searchKey: string) {
   if (!searchKey) return []
 
   try {
+    const flags = /[A-Z]/.test(searchKey) ? '' : 'i'
     // case-sensitive when searchKey contains uppercase char
-    return [new RegExp(searchKey, /[A-Z]/i.test(searchKey) ? '' : 'i')]
+    return [new RegExp(searchKey, flags)]
   } catch (err) {
     return [/$^/] // matching nothing if failed transforming regexp
   }