refactor: cancel add buttons

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

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