fix(problems): 添加随机一题按钮

老版答题页中有随机一题的按钮，如果选择随机刷题的话，可以刷完一题之后，
点按钮开始下一题，新版答题页并没有实现随机一题的按钮，目前先用扩展实现，
后面如果官方实现了随机一题之后，在去掉这个补丁。

Author: XYShaoKang

src/content/pages/problems/Random.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useEffect, useState } from 'react'
+import styled, { ThemeProvider } from 'styled-components/macro'
+
+import { LeetCodeApi } from './leetcode-api'
+import { getTheme } from '../utils'
+import { darkTheme, lightTheme } from '../../theme'
+
+const StyledBtn = styled.button`
+  line-height: 0;
+  color: ${props =>
+    props.theme.mode === 'dark' ? 'rgb(219 219 219)' : 'rgb(38 38 38)'};
+  & > svg {
+    height: 18px;
+    width: 18px;
+  }
+`
+
+const api = new LeetCodeApi(location.origin)
+
+const Random: FC = () => {
+  const [theme, setTheme] = useState(getTheme())
+  useEffect(() => {
+    // 跟随力扣的明暗主题进行切换
+    const observer = new MutationObserver(mutationList => {
+      if (mutationList.some(record => record.attributeName === 'class')) {
+        if (document.documentElement.classList.contains('dark')) {
+          setTheme(darkTheme)
+        } else {
+          setTheme(lightTheme)
+        }
+      }
+    })
+
+    observer.observe(document.documentElement, { attributes: true })
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  const handldClick = async () => {
+    const allQuestions = await api.getAllQuestions()
+    let i = Math.floor(Math.random() * (allQuestions.length - 1))
+    if (allQuestions[i].titleSlug === location.pathname.split('/')[1]) {
+      i = allQuestions.length - 1
+    }
+    ;(window as any).next.router.push(`/problems/${allQuestions[i].titleSlug}/`)
+  }
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledBtn onClick={handldClick}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18.48 17.5h-2.204a5 5 0 01-4.31-2.466l-.625-1.061-.624 1.061a5 5 0 01-4.31 2.466H2.661a1 1 0 110-2h3.746a3 3 0 002.586-1.48L10.181 12 8.993 9.98A3 3 0 006.407 8.5H2.661a1 1 0 110-2h3.746a5 5 0 014.31 2.466l.624 1.061.624-1.061a5 5 0 014.31-2.466h2.205V4.315a.5.5 0 01.874-.332l2.536 2.853a1 1 0 010 1.328l-2.536 2.853a.5.5 0 01-.874-.332V8.5h-2.204a3 3 0 00-2.587 1.48L12.501 12l1.188 2.02a3 3 0 002.587 1.48h2.204v-2.185a.5.5 0 01.874-.332l2.83 3.185a.5.5 0 010 .664l-2.83 3.185a.5.5 0 01-.874-.332V17.5z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </StyledBtn>
+    </ThemeProvider>
+  )
+}
+
+export default Random

src/content/pages/problems/index.tsx

@@ -2,10 +2,13 @@ import { StrictMode } from 'react'
 import ReactDOM, { render } from 'react-dom'
 
 import Clock from './Clock'
+import Random from './Random'
 import { getRoot, isBetaUI } from './utils'
+import { findElement } from '../../utils'
 
-let root: HTMLDivElement | null = null
-let titleSlug = ''
+let root: HTMLDivElement | null = null,
+  randomRoot: HTMLDivElement | null = null,
+  titleSlug = ''
 
 async function load() {
   titleSlug = location.pathname.split('/').filter(Boolean)[1]
@@ -14,7 +17,6 @@ async function load() {
   if (beta) {
     // 使用新版 UI
     if (parent && parent instanceof HTMLElement) {
-      // parent.style.justifyContent = 'space-between'
       root = document.createElement('div')
       parent.prepend(root)
       root.style.display = 'flex'
@@ -47,6 +49,37 @@ async function load() {
   }
 }
 
+/** 加载`随机一题`按钮
+ *
+ * 旧版答题页已经有`随机一题`的按钮，所以只需要在新版答题页中添加即可，
+ * 新版答题页中的`上一题`和`下一题`按钮是放在上方导航栏处，
+ * 所以`随机一题`按钮也跟它们一起放在导航栏处。
+ *
+ * 因为导航栏在进行题目切换的时候，并不会变化，
+ * 所以不用像计时组件那样，每次在切换题目的时候都需要卸载后重新加载，
+ * 只需要考虑跟其他非答题页之间进行切换的逻辑即可。
+ */
+async function loadRandom() {
+  const beta = await isBetaUI()
+  if (beta) {
+    if (!randomRoot) {
+      const nav = await findElement(
+        '#__next > div > div > div > nav > div > div > div:nth-child(2)'
+      )
+      randomRoot = document.createElement('div')
+      randomRoot.style.lineHeight = '0'
+      nav.append(randomRoot)
+
+      render(
+        <StrictMode>
+          <Random />
+        </StrictMode>,
+        randomRoot
+      )
+    }
+  }
+}
+
 const isProblemPage = () => {
   const strs = location.pathname.split('/').filter(Boolean)
   return strs[0] === 'problems'
@@ -56,6 +89,7 @@ void (async function main() {
   if (isProblemPage()) {
     const beta = await isBetaUI()
     if (beta) {
+      loadRandom()
       const params = location.pathname.split('/').filter(Boolean)
       // 新版 UI 中，如果一开始打开的就是题解页面，则当前并不存在提交栏，也就无法也不需要去挂载即使组件
       if (params[2] === 'solutions' && params[3]) return
@@ -64,10 +98,11 @@ void (async function main() {
   }
 })()
 
-function unmount() {
-  if (root) {
-    ReactDOM.unmountComponentAtNode(root)
-    root = null
+function unmount(el: HTMLElement | null) {
+  if (el) {
+    ReactDOM.unmountComponentAtNode(el)
+    el.remove()
+    el = null
     titleSlug = ''
   }
 }
@@ -89,21 +124,23 @@ if (isProblemPage() || location.pathname === '/problemset/all/') {
 
     if (!isProblemPage()) {
       // 从答题页跳转到非答题页时,卸载计时组件
-      unmount()
+      unmount(root)
+      unmount(randomRoot)
     } else {
       const beta = await isBetaUI()
       if (beta) {
+        loadRandom()
         const params = location.pathname.split('/').filter(Boolean)
         // 新版 UI 中，跳转到题解页面之后，如果跳转回去，会导致提交栏发生变化，需要先卸载掉。
         if (params[2] === 'solutions' && params[3]) {
-          unmount()
+          unmount(root)
           return
         }
       }
       // 在答题页之间相互跳转,如果还是在同一题,则不做任何操作,如果是跳转另外一题则重新开始计时
       const curSlug = location.pathname.split('/').filter(Boolean)[1]
       if (curSlug !== titleSlug) {
-        unmount()
+        unmount(root)
         load()
       }
     }

src/content/pages/utils.ts

@@ -1,4 +1,9 @@
-// 添加监听 url 变化的事件
+import { DefaultTheme } from 'styled-components/macro'
+import { darkTheme, lightTheme } from '../theme'
+
+/** 添加监听 url 变化的事件
+ *
+ */
 const initUrlChangeEvent = (() => {
   let isLoad = false
   const load = () => {
@@ -27,4 +32,15 @@ const initUrlChangeEvent = (() => {
   return load
 })()
 
-export { initUrlChangeEvent }
+/** 获取当前力扣的主题
+ *
+ */
+const getTheme = (): DefaultTheme => {
+  const lcDarkDide = localStorage.getItem('lc-dark-side')
+  if (lcDarkDide === 'dark') {
+    return darkTheme
+  }
+  return lightTheme
+}
+
+export { initUrlChangeEvent, getTheme }