修复控制台报的错，重构部分代码，做出一些优化 (#43)

* refactor: 不同的题单复用同一个List组件

* feature: 题单页面增加隐藏会员题的按钮

* refactor: 重命名util目录

* refactor: 统一模块导入路径

* refactor: 把工具函数hashCode提取到utils目录, 用内置crypto重写hash算法

* fix: 修复循环渲染缺少key的错误

* fix: 修复连续嵌套<a>标签的错误

* fix: 修复竞赛列表页面循环渲染通过展开运算符传递key或缺少key的错误

* fix: 修复input标签同时设置checked与defaultChecked的错误

* fix: 修复难度练习页面连续嵌套<a>标签的错误

* fix: 修复难度练习页面设置弹窗的tag标签循环渲染缺少key的错误

* fix: 修复搜索页面循环渲染缺少key的错误

* fix: 修复组件卸载时未清理onscroll函数副作用, 导致跳转到其他页面后仍然执行onscroll函数但找不到btn的错误

* optim: 优化搜索页面筛选函数的逻辑

* optim: 将回到顶部按钮封装为组件

* optim: 将搜索页面改为分页列表，优化列表内容太多造成的浏览器卡顿问题

* optim: 同步进度改为只有Set Progress之后才刷新页面

* fix: 自定义data属性需要data-xxx格式

app/(algo)/code/layout.tsx

@@ -1,18 +1,18 @@
-import type { Metadata } from "next";
+import "@/scss/algorithm/styles.scss";
 import MdxLayout from "@components/layouts/MdxLayout";
-import MonotoneStack from "@components/sections/mono.mdx";
 import Dijkstra from "@components/sections/dijkstra.mdx";
-import SparseTable from "@components/sections/sparestable.mdx";
+import MonotoneStack from "@components/sections/mono.mdx";
 import SegmentTree from "@components/sections/segment_tree.mdx";
+import SparseTable from "@components/sections/sparestable.mdx";
 import String from "@components/sections/string.mdx";
-import "../../../scss/algorithm/styles.scss";
+import type { Metadata } from "next";
 
 const routes = [
   {
     path: "/algorithm-templates#String",
     display: "字符串 (String)",
     mdx: <String />,
-  },  
+  },
   {
     path: "/algorithm-templates#Monotone-Stack",
     display: "单调栈 (Monotone Stack)",

app/(lc)/list/binary_search/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/binary_search";
 
-const List = lazy(() => import("@components/containers/List/BinarySearch"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/bitwise_operations/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/bitwise_operations";
 
-const List = lazy(() => import("@components/containers/List/BitManipulation"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/data_structure/page.tsx

@@ -1,9 +1,9 @@
 "use client";
-import dynamic from "next/dynamic";
 import { lazy } from "react";
+import data from "@components/containers/List/data/data_structure";
 
-const List = lazy(() => import("@components/containers/List/DataStructure"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/dynamic_programming/page.tsx

@@ -1,12 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/dynamic_programming";
 
-// const List = dynamic(() => import("@components/containers/List/DynamicPrograming"), {
-//   ssr: false,
-// });
-
-const List = lazy(() => import("@components/containers/List/DynamicPrograming"))
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/graph/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/graph";
 
-const List = lazy(() => import("@components/containers/List/Graph"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/greedy/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/greedy";
 
-const List = lazy(() => import("@components/containers/List/Greedy"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/grid/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/grid";
 
-const List = lazy(() => import("@components/containers/List/Grid"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
-} 
+  return <List data={data} />;
+}

app/(lc)/list/math/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/math";
 
-const List = lazy(() => import("@components/containers/List/Math"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/monotonic_stack/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/monotonic_stack";
 
-const List = lazy(() => import("@components/containers/List/MonotonicStack"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
-} 
+  return <List data={data} />;
+}

app/(lc)/list/slide_window/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/sliding_window";
 
-const List = lazy(() => import("@components/containers/List/SlidingWindow"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/string/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/string";
 
-const List = lazy(() => import("@components/containers/List/String"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

app/(lc)/list/trees/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 import { lazy } from "react";
+import data from "@components/containers/List/data/trees";
 
-const List = lazy(() => import("@components/containers/List/Trees"));
+const List = lazy(() => import("@components/containers/List"));
 
 export default function Page() {
-  return <List />;
+  return <List data={data} />;
 }

components/BackToTop.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "react-bootstrap";
+
+export default function BackToTopButton() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setVisible(
+      document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
+    );
+    const handleScroll = () =>
+      setVisible(
+        document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
+      );
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const backToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
+
+  return (
+    visible && (
+      <Button
+        variant="primary"
+        style={{
+          borderRadius: "50%",
+          position: "fixed",
+          zIndex: 10000,
+          bottom: "50px",
+          right: "5px",
+          width: "2.5rem",
+          height: "2.5rem",
+          fontSize: "1.5rem",
+          padding: "0",
+        }}
+        onClick={backToTop}
+      >
+        ↑
+      </Button>
+    )
+  );
+}

components/ProblemCatetory/TableOfContent.tsx

@@ -7,28 +7,30 @@ export interface TOC {
   count: number;
 }
 export const TableOfContent: React.FC<{ toc: TOC }> = ({ toc }) => {
-  const { className = "toc-list", children = [], id = "", title = "", level = 0 } = toc;
-  return children && children.length > 0 ? (
+  const className = toc.className || "toc-list";
+  return toc.children?.length ? (
     <ul className={className}>
-      {children &&
-        children.map((item) => {
-          return (
-            <li>
-              <a className="text-danger fw-medium lh-2" href={item.id}>{`${item.title} [${item.count}]`}</a>
-              {item.children && (
-                <ul>
-                  {item.children.map((sub) => (
-                    <TableOfContent toc={sub} />
-                  ))}
-                </ul>
-              )}
-            </li>
-          );
-        })}
+      {toc.children.map((item) => {
+        return (
+          <li key={item.id}>
+            <a
+              className="text-danger fw-medium lh-2"
+              href={item.id}
+            >{`${item.title} [${item.count}]`}</a>
+            {item.children && (
+              <ul>
+                {item.children.map((sub) => (
+                  <TableOfContent toc={sub} key={sub.id} />
+                ))}
+              </ul>
+            )}
+          </li>
+        );
+      })}
     </ul>
   ) : (
-    <li>
-      <a className="text-warning-emphasis" href={id}>{title}</a>
-    </li>
+    <a className="text-warning-emphasis" href={toc.id}>
+      {toc.title}
+    </a>
   );
 };