Tidy project structure

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

Hide file tree

Showing 49 changed files with 306 additions and 262 deletions.
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/routes/Router.tsx → src/Router.tsx b/src/routes/Router.tsx → src/Router.tsx
@@ -1,20 +1,16 @@
 import React, { Suspense, lazy } from "react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import Layout from "../layouts/Layout";
+import Layout from "@/layouts/Layout";
 
-const Problem = lazy(() => import("../pages/Problem"));
-const AdminProblemList = lazy(
-  () => import("../pages/admin-dashboard/ProblemList"),
-);
-const AdminCreateProblem = lazy(
-  () => import("../pages/admin-dashboard/CreateProblem"),
-);
-const ProblemList = lazy(() => import("../pages/ProblemList"));
-const JudgeList = lazy(() => import("../pages/JudgeList"));
-const Judge = lazy(() => import("../pages/Judge"));
-const Login = lazy(() => import("../pages/Login"));
+const Problem = lazy(() => import("@/pages/Problem"));
+const AdminProblemList = lazy(() => import("@/pages/admin/ProblemList"));
+const AdminCreateProblem = lazy(() => import("@/pages/admin/CreateProblem"));
+const ProblemList = lazy(() => import("@/pages/ProblemList"));
+const JudgeList = lazy(() => import("@/pages/JudgeList"));
+const Judge = lazy(() => import("@/pages/Judge"));
+const Login = lazy(() => import("@/pages/Login"));
 
-const PageRouter: React.FC = () => {
+const Router: React.FC = () => {
   return (
     <BrowserRouter basename={import.meta.env.BASE_URL}>
       {/* TODO: Perf loading view */}
@@ -46,4 +42,4 @@ const PageRouter: React.FC = () => {
   );
 };
 
-export default PageRouter;
+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
@@ -1,5 +1,5 @@
 import { joinClasses } from "@/utils/common";
-import { JudgeModel } from "../typings/judge";
+import { JudgeModel } from "../models/service/judge";
 
 const columns = [
   { name: "Result", uid: "result" },

diff --git a/src/components/i18n/LanguageMenu.tsx b/src/components/i18n/LanguageMenu.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { joinClasses } from "../../utils/common";
+import { joinClasses } from "@/utils/common";
 import { changeLanguage } from "i18next";
-import { LANGUAGE_SELECTIONS } from "../../i18n/i18n";
+import { LANGUAGE_SELECTIONS } from "@/i18n/module";
 import React from "react";
 import LanguageIcon from "@/components/icons/tabler/LanguageIcon";
 

diff --git a/src/components/icons/OJLabIcon.tsx b/src/components/icons/OJLabIcon.tsx
@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+const OJLabIconPath = `${import.meta.env.BASE_URL}images/oj-lab-icon.svg`;
+
+const OJLabIcon: FC = () => {
+  return (
+    <img className="mr-2 h-12 w-auto gap-4" src={OJLabIconPath} alt="OJ Lab" />
+  );
+};
+
+export default OJLabIcon;
diff --git a/src/components/judge/JudgeDetail.tsx b/src/components/judge/JudgeDetail.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, lazy, useState } from "react";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { JudgeServiceModel } from "../../typings/judge";
+import * as JudgeServiceModel from "../../models/service/judge";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import DocumentDuplicateIcon from "@heroicons/react/24/outline/DocumentDuplicateIcon";
 import JudgeTable from "./JudgeTable";

diff --git a/src/components/judge/JudgeTable.tsx b/src/components/judge/JudgeTable.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { joinClasses } from "../../utils/common";
-import { JudgeServiceModel } from "../../typings/judge";
-import BrandCPPIcon from "../icons/tabler/BrandCPPIcon";
-import BrandPythonIcon from "../icons/tabler/BrandPythonIcon";
-import { getGravatarUrl } from "@/utils/avatar_url";
+import { joinClasses } from "@/utils/common";
+import * as JudgeServiceModel from "@/models/service/judge";
+import BrandCPPIcon from "@/components/icons/tabler/BrandCPPIcon";
+import BrandPythonIcon from "@/components/icons/tabler/BrandPythonIcon";
+import { getGravatarUrl } from "@/utils/avatarURL";
 
 const columns = [
   { name: "User", uid: "user" },

diff --git a/src/components/problem/ProblemTable.tsx b/src/components/problem/ProblemTable.tsx
@@ -1,7 +1,7 @@
-import { ProblemServiceModel } from "../../typings/problem";
+import * as ProblemServiceModel from "@/models/service/problem";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { ProblemService } from "@/api/problem";
+import { ProblemService } from "@/apis/problem";
 import TrashIcon from "../icons/tabler/TrashIcon";
 import PencilIcon from "../icons/tabler/PencilIcon";
 import { joinClasses } from "@/utils/common";

diff --git a/src/hooks/event.ts b/src/hooks/event.ts
@@ -1,5 +1,5 @@
 import { useLayoutEffect } from "react";
-import { EVENT_URL } from "../api/event";
+import { EVENT_URL } from "../apis/event";
 import { isGhPages, isMock } from "../utils/environment";
 
 export const useEvent = () => {

diff --git a/src/hooks/judge.ts b/src/hooks/judge.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { JudgeServiceModel } from "../typings/judge";
-import { JudgeService } from "../api/judge";
+import * as JudgeServiceModel from "@/models/service/judge";
+import { JudgeService } from "../apis/judge";
 
 export const useJudge = (uid: string) => {
   const [judge, setJudge] = useState<JudgeServiceModel.JudgeInfo>();

diff --git a/src/hooks/problem.ts b/src/hooks/problem.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { ProblemServiceModel } from "../typings/problem";
-import { ProblemService } from "../api/problem";
+import * as ProblemServiceModel from "@/models/service/problem";
+import { ProblemService } from "@/apis/problem";
 
 export const useProblem = (slug: string, fallback?: () => void) => {
   const [problem, setProblem] = useState<ProblemServiceModel.Problem | null>(

diff --git a/src/hooks/user.ts b/src/hooks/user.ts
@@ -1,5 +1,5 @@
-import { getCurrentUser } from "@/api/auth";
-import { UserServiceModel } from "@/typings/user";
+import { getCurrentUser } from "@/apis/auth";
+import * as UserServiceModel from "@/models/service/user";
 import { useEffect, useState } from "react";
 
 export enum UserState {