From 020211c328d236905dfbcddfb1589c4f96229a45 Mon Sep 17 00:00:00 2001
From: frank-zsy <syzhao1988@126.com>
Date: Fri, 29 Nov 2024 22:28:16 +0800
Subject: [PATCH] refactor: use search params to determine leaderboard type

Signed-off-by: frank-zsy <syzhao1988@126.com>
---
 docusaurus.config.ts                          | 12 -----
 src/pages/leaderboards/index.tsx              | 52 +++++++++++++++++++
 .../styles.module.css                         |  0
 src/pages/leaderboards_page/index.tsx         | 48 -----------------
 4 files changed, 52 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/leaderboards/index.tsx
 rename src/pages/{leaderboards_page => leaderboards}/styles.module.css (100%)
 delete mode 100644 src/pages/leaderboards_page/index.tsx

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 10043a0..af55ff2 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -84,18 +84,6 @@ const config: Config = {
         indexDocs: true,
       },
     ],
-    [
-      path.resolve(__dirname, 'plugin-dynamic-routes/index.ts'),
-      {
-        routes: [
-          {
-            path: '/leaderboards',
-            exact: false,
-            component: '../src/pages/leaderboards_page/index.tsx',
-          }
-        ]
-      }
-    ],
   ],
 
   themes: ['@docusaurus/theme-mermaid'],
diff --git a/src/pages/leaderboards/index.tsx b/src/pages/leaderboards/index.tsx
new file mode 100644
index 0000000..d1e75da
--- /dev/null
+++ b/src/pages/leaderboards/index.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import Layout from '@theme/Layout';
+import SimpleTable from '../../components/SimpleTable';
+import { translate } from '@docusaurus/Translate';
+import axios from 'axios';
+import styles from './styles.module.css';
+
+function OpenLeaderboard() {
+
+  const [title, setTitle] = useState('Ranking List Title');
+  const [data, setData] = useState([]);
+  const [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    const search = new URLSearchParams(window.location.search);
+    const type = search.get('type');
+    if (!type) {
+      alert('You need to set a leaderboard type first.');
+      return;
+    }
+    if (type === 'projects') {
+      axios.get(`https://oss.open-digger.cn/leaderboards/${type}.json`).then(resp => {
+        const data = resp.data;
+        setTitle(translate({ id: 'leaderboards.projects.title' }));
+        setData(data.data);
+        setOptions([
+          { name: '#', type: 'String', fields: ['rank'], width: 80 },
+          { name: translate({ id: 'leaderboards.projects.name' }), type: 'StringWithIcon', fields: ['name', 'logo'], width: 250 },
+          { name: 'OpenRank', type: 'String', fields: ['openrank'], width: 150 },
+          { name: translate({ id: 'leaderboards.projects.initiator' }), type: 'StringWithIcon', fields: ['initiator', 'initiatorLogo'], width: 250 },
+          { name: translate({ id: 'leaderboards.projects.country' }), type: 'String', fields: ['country'], width: 250 },
+        ]);
+      }).catch(e => {
+        console.log(e);
+      });
+    } else {
+      alert(`Leaderboard type ${type} is not supported.`);
+    }
+
+  }, []);
+
+  return (
+    <Layout>
+      <div className={styles.mainRankingList} >
+        <SimpleTable title={title} data={data} options={options}
+        />
+      </div>
+    </Layout>
+  );
+}
+
+export default OpenLeaderboard;
diff --git a/src/pages/leaderboards_page/styles.module.css b/src/pages/leaderboards/styles.module.css
similarity index 100%
rename from src/pages/leaderboards_page/styles.module.css
rename to src/pages/leaderboards/styles.module.css
diff --git a/src/pages/leaderboards_page/index.tsx b/src/pages/leaderboards_page/index.tsx
deleted file mode 100644
index 8a10e37..0000000
--- a/src/pages/leaderboards_page/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Layout from '@theme/Layout';
-import { useLocation } from '@docusaurus/router';
-import SimpleTable from '../../components/SimpleTable';
-import { translate } from '@docusaurus/Translate';
-import axios from 'axios';
-import styles from './styles.module.css';
-
-function OpenLeaderboard() {
-  const location = useLocation();
-  const leaderboardId = location.pathname.split('/').pop();
-
-  const [title, setTitle] = useState('Ranking List Title');
-  const [data, setData] = useState([]);
-  const [options, setOptions] = useState([]);
-
-  useEffect(() => {
-    axios.get(`https://oss.open-digger.cn/leaderboards/${leaderboardId}.json`).then(resp => {
-      const data = resp.data;
-      setTitle(translate({ id: 'leaderboards.projects.title' }));
-      setData(data.data);
-      switch (leaderboardId) {
-        case 'projects':
-          setOptions([
-            { name: '#', type: 'String', fields: ['rank'], width: 80 },
-            { name: translate({ id: 'leaderboards.projects.name' }), type: 'StringWithIcon', fields: ['name', 'logo'], width: 250 },
-            { name: 'OpenRank', type: 'String', fields: ['openrank'], width: 150 },
-            { name: translate({ id: 'leaderboards.projects.initiator' }), type: 'StringWithIcon', fields: ['initiator', 'initiatorLogo'], width: 250 },
-            { name: translate({ id: 'leaderboards.projects.country' }), type: 'String', fields: ['country'], width: 250 },
-          ]);
-          break;
-      }
-    }).catch(e => {
-      console.log(e);
-    });
-  }, []);
-
-  return (
-    <Layout>
-      <div className={styles.mainRankingList} >
-        <SimpleTable title={title} data={data} options={options}
-        />
-      </div>
-    </Layout>
-  );
-}
-
-export default OpenLeaderboard;