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