From 46cc04b3ee18e0d770dfde4c1774bb5e105b94da Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 3 May 2022 16:22:59 +0800
Subject: [PATCH] refactor: extract formatters for hash and class name

---
 src/platforms/GitHub/DOMHelper.ts |  6 +++---
 src/platforms/GitHub/index.ts     |  9 +++------
 src/platforms/Gitee/DOMHelper.ts  |  4 ++--
 src/utils/DOMHelper.ts            | 10 +++++++++-
 src/utils/general.ts              |  5 +++++
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 0570899..56a2685 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
@@ -147,7 +147,7 @@ export function getCodeElement() {
  */
 export function attachCopyFileBtn() {
   const removeButtons = () => {
-    const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`)
+    const buttons = document.querySelectorAll(formatClass(copyFileButtonClassName))
     buttons.forEach(button => {
       button.parentElement?.removeChild(button)
     })
@@ -219,7 +219,7 @@ export function attachCopySnippet() {
           }
         }
         function removeAttachedOnes() {
-          const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+          const buttons = document.querySelectorAll(formatClass(ClippyClassName))
           buttons.forEach(button => {
             button.parentElement?.removeChild(button)
           })
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 341646c..7b8ac61 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -1,7 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
-import { run } from 'utils/general'
+import { formatID } from 'utils/DOMHelper'
+import { formatHash, run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -339,7 +340,7 @@ async function getCommitTreeData(
   const getItemURL = (path: string) => {
     for (const doc of documents) {
       const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
-      if (id) return `#${id}`
+      if (id) return formatID(id)
     }
   }
 
@@ -442,7 +443,3 @@ async function getPullRequestTreeData(
   return { root }
 }
 
-function formatHash(hash?: string) {
-  if (hash) return '#' + hash
-  return ''
-}
diff --git a/src/platforms/Gitee/DOMHelper.ts b/src/platforms/Gitee/DOMHelper.ts
index bd1a50f..144837e 100644
--- a/src/platforms/Gitee/DOMHelper.ts
+++ b/src/platforms/Gitee/DOMHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact } from 'utils/general'
 
 export function isInRepoPage() {
@@ -70,7 +70,7 @@ export function attachCopySnippet() {
       readmeElement.addEventListener('mouseover', mouseOverCallback)
       return () => {
         readmeElement.removeEventListener('mouseover', mouseOverCallback)
-        const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+        const buttons = document.querySelectorAll(formatClass(ClippyClassName))
         buttons.forEach(button => {
           button.parentElement?.removeChild(button)
         })
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index b369b46..fa56f3a 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -60,7 +60,7 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
  */
 export function insertLogoMountPoint() {
   const logoID = 'gitako-logo-mount-point'
-  const logoSelector = '#' + logoID
+  const logoSelector = formatID(logoID)
   return $(logoSelector, undefined, function createLogoMountPoint() {
     const logoMountElement = document.createElement('div')
     logoMountElement.setAttribute('id', logoID)
@@ -142,3 +142,11 @@ export function setCSSVariable(name: string, value: string | undefined, element:
   if (value === undefined) element.style.removeProperty(name)
   else element.style.setProperty(name, value)
 }
+
+export function formatID(id: string) {
+  return `#${id}`
+}
+
+export function formatClass(className: string) {
+  return `.${className}`
+}
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 619b889..4af8aae 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -219,3 +219,8 @@ export function resolveDiffGraphMeta(additions: number, deletions: number, chang
     w = 5 - g - r
   return { g, r, w }
 }
+
+export function formatHash(hash?: string) {
+  if (hash) return '#' + hash
+  return ''
+}