feat: apply settings updates instantly

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>
           ))}

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])

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, () =>