Tidy project structure

oj-lab · Aug 10, 2024 · cb1138c · cb1138c
1 parent c3b8cfc
commit cb1138c
Show file tree

Hide file tree

Showing 87 changed files with 482 additions and 504 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "gruntfuggly.todo-tree"
   ]
-}
+}
diff --git a/index.html b/index.html
@@ -1,29 +1,28 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="/katex-dist/katex.min.css" />
-    <link rel="icon" href="/images/oj-lab-icon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <script analytics></script>
-    <link rel="apple-touch-icon" href="/images/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="/katex-dist/katex.min.css" />
+  <link rel="icon" href="/images/oj-lab-icon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <script analytics></script>
+  <link rel="apple-touch-icon" href="/images/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json" />
-    <title>Online Judge Lab</title>
-  </head>
-  <body>
-    <script type="module" src="/src/index.tsx"></script>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <link rel="manifest" href="/manifest.json" />
+  <title>Online Judge Lab</title>
+</head>
+
+<body>
+  <script type="module" src="/src/Index.tsx"></script>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -33,5 +32,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,8 @@
-import PageRouter from "./routes/Router";
-import "./App.css";
+import Router from "@/Router";
+import "@/App.css";
 
 function App() {
-  return <PageRouter />;
+  return <Router />;
 }
 
 export default App;
diff --git a/src/index.css → src/Index.css b/src/index.css → src/Index.css
diff --git a/src/index.tsx → src/Index.tsx b/src/index.tsx → src/Index.tsx
@@ -1,41 +1,40 @@
-import App from "./App";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import reportWebVitals from "./reportWebVitals";
-import "./i18n/i18n";
-import "./index.css";
-import { getMode, isGhPages, isMock } from "./utils/environment";
+import reportWebVitals from "@/reportWebVitals";
 import { Provider } from "react-redux";
-import store from "./store";
+import App from "@/App";
+import "@/i18n/module";
+import "@/Index.css";
+import { getViteMode, isGhPages, isMock } from "@/utils/environment";
+import store from "@/store";
 
-console.log("Running in:", getMode());
+console.log("Running in:", getViteMode());
 
-async function enableMocking() {
+async function enableMockService() {
   if (!isMock() && !isGhPages()) {
     return;
   }
 
-  const { worker } = await import("./mocks/server");
+  const { mockServiceWorker } = await import("./mocks/worker");
 
-  if (isMock()) {
-    return worker.start({
-      onUnhandledRequest: "bypass",
-    });
-  }
+  let workerURL = "/mockServiceWorker.js";
   if (isGhPages()) {
-    return worker.start({
-      onUnhandledRequest: "bypass",
-      serviceWorker: {
-        url: "/oj-lab-front/mockServiceWorker.js",
-      },
-    });
+    workerURL = "/oj-lab-front/mockServiceWorker.js";
   }
+
+  return mockServiceWorker.start({
+    onUnhandledRequest: "bypass",
+    serviceWorker: {
+      url: workerURL,
+    },
+  });
 }
 
-enableMocking().then(() => {
+enableMockService().then(() => {
   const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement,
   );
+
   root.render(
     <React.StrictMode>
       <Provider store={store}>

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -0,0 +1,48 @@
+import React, { Suspense, lazy } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import Layout from "@/layouts/Layout";
+
+const Problem = lazy(() => import("@/pages/problem/Problem"));
+const AdminProblemList = lazy(() => import("@/pages/admin/ProblemList"));
+const AdminCreateProblem = lazy(() => import("@/pages/admin/CreateProblem"));
+const ProblemList = lazy(() => import("@/pages/problem/ProblemList"));
+const JudgeList = lazy(() => import("@/pages//judge/JudgeList"));
+const Judge = lazy(() => import("@/pages/judge/Judge"));
+const Login = lazy(() => import("@/pages/Login"));
+
+const Router: React.FC = () => {
+  return (
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
+      {/* TODO: Perf loading view */}
+      <Suspense fallback={<Layout>loading...</Layout>}>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route path="" element={<Navigate replace to="/problems" />} />
+            <Route path="problems">
+              <Route path="" element={<ProblemList />} />
+              <Route path=":slug" element={<Problem />} />
+            </Route>
+            <Route path="judges">
+              <Route path="" element={<JudgeList />} />
+              <Route path=":uid" element={<Judge />} />
+            </Route>
+            <Route path="rank" element={<div>rank</div>} />
+            <Route path="login" element={<Login />} />
+            {/* Admin */}
+            <Route path="admin">
+              <Route
+                path=""
+                element={<Navigate replace to="/admin/problems" />}
+              />
+              <Route path="problems" element={<AdminProblemList />} />
+              <Route path="problems/create" element={<AdminCreateProblem />} />
+              <Route path="users" element={<div>user</div>} />
+            </Route>
+          </Route>
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
diff --git a/src/api/auth.ts → src/apis/auth.ts b/src/api/auth.ts → src/apis/auth.ts
@@ -1,8 +1,8 @@
-import { UserServiceModel } from "@/typings/user";
-import { client } from "./client";
+import * as UserServiceModel from "@/models/service/user";
+import { axiosClient } from "@/utils/axiosClient";
 
 export async function postLogin(account: string, password: string) {
-  let res = await client.post<void>("/api/v1/user/login", {
+  let res = await axiosClient.post<void>("/api/v1/user/login", {
     account: account,
     password: password,
   });
@@ -13,15 +13,17 @@ export async function postLogin(account: string, password: string) {
 }
 
 export async function postSignOut() {
-  let res = await client.post<void>("/api/v1/user/logout");
+  let res = await axiosClient.post<void>("/api/v1/user/logout");
   if (res.status !== 200) {
     throw Error("failed to sign out");
   }
   return res;
 }
 
 export async function getCurrentUser(): Promise<UserServiceModel.UserInfo> {
-  let res = await client.get<UserServiceModel.UserInfo>("/api/v1/user/current");
+  let res = await axiosClient.get<UserServiceModel.UserInfo>(
+    "/api/v1/user/current",
+  );
   if (res.status !== 200) {
     throw Error("failed to get current user");
   }

diff --git a/src/api/event.ts → src/apis/event.ts b/src/api/event.ts → src/apis/event.ts
diff --git a/src/api/judge.ts → src/apis/judge.ts b/src/api/judge.ts → src/apis/judge.ts
@@ -1,5 +1,5 @@
-import { JudgeServiceModel } from "../typings/judge";
-import { client } from "./client";
+import * as JudgeServiceModel from "@/models/service/judge";
+import { axiosClient } from "@/utils/axiosClient";
 
 export namespace JudgeService {
   export async function postJudge(
@@ -13,7 +13,7 @@ export namespace JudgeService {
     };
     let data = JSON.stringify(body);
 
-    let res = await client.post<JudgeServiceModel.JudgeVerdict[]>(
+    let res = await axiosClient.post<JudgeServiceModel.JudgeVerdict[]>(
       `/api/v1/problem/${slug}/judge`,
       data,
     );
@@ -25,7 +25,7 @@ export namespace JudgeService {
   }
 
   export async function getJudgeList() {
-    let res = await client.get<{
+    let res = await axiosClient.get<{
       total: number;
       list: JudgeServiceModel.JudgeInfo[];
     }>(`/api/v1/judge`);
@@ -35,7 +35,7 @@ export namespace JudgeService {
     return res.data;
   }
   export async function getJudge(uid: string) {
-    let res = await client.get<JudgeServiceModel.JudgeInfo>(
+    let res = await axiosClient.get<JudgeServiceModel.JudgeInfo>(
       `/api/v1/judge/${uid}`,
     );
     if (res.status !== 200) {

diff --git a/src/api/problem.ts → src/apis/problem.ts b/src/api/problem.ts → src/apis/problem.ts
@@ -1,11 +1,10 @@
-import { ProblemServiceModel } from "../typings/problem";
-import { client } from "./client";
-
+import * as ProblemServiceModel from "@/models/service/problem";
+import { axiosClient } from "@/utils/axiosClient";
 export namespace ProblemService {
   export async function getProblem(
     slug: string,
   ): Promise<ProblemServiceModel.Problem> {
-    let res = await client.get<ProblemServiceModel.Problem>(
+    let res = await axiosClient.get<ProblemServiceModel.Problem>(
       `/api/v1/problem/${slug}`,
     );
     if (res.status !== 200) {
@@ -17,7 +16,7 @@ export namespace ProblemService {
   export async function putProblem(
     problem: ProblemServiceModel.Problem,
   ): Promise<ProblemServiceModel.Problem> {
-    let res = await client.put<ProblemServiceModel.Problem>(
+    let res = await axiosClient.put<ProblemServiceModel.Problem>(
       `/api/v1/problem`,
       problem,
     );
@@ -38,7 +37,7 @@ export namespace ProblemService {
     limit = limit || 10;
     offset = offset || 0;
 
-    let res = await client.get<{
+    let res = await axiosClient.get<{
       total: number;
       list: ProblemServiceModel.ProblemInfo[];
     }>(`/api/v1/problem`, {
@@ -59,7 +58,7 @@ export namespace ProblemService {
   ): Promise<ProblemServiceModel.Problem> {
     let formData = new FormData();
     formData.append("file", packageFile);
-    let res = await client.put<ProblemServiceModel.Problem>(
+    let res = await axiosClient.put<ProblemServiceModel.Problem>(
       `/api/v1/problem/${problemSlug}/package`,
       formData,
     );
@@ -72,15 +71,15 @@ export namespace ProblemService {
   export async function checkProblemSlug(
     slug: string,
   ): Promise<{ valid: boolean }> {
-    let res = await client.get<{ valid: boolean }>(
+    let res = await axiosClient.get<{ valid: boolean }>(
       `/api/v1/problem/${slug}/check`,
     );
 
     return res.data;
   }
 
   export async function deleteProblem(slug: string) {
-    let res = await client.delete(`/api/v1/problem/${slug}`);
+    let res = await axiosClient.delete(`/api/v1/problem/${slug}`);
     if (res.status !== 200) {
       throw Error("failed to delete problem");
     }

diff --git a/src/components/JudgeVerdictTable.tsx b/src/components/JudgeVerdictTable.tsx
diff --git a/src/components/NewsCard.tsx b/src/components/NewsCard.tsx