Merge branch 'chore/update-frontend-configuration' into 'master'

refactor: frontend improvements See merge request megazordpobeda/DataRush!2
2026-05-22 20:57:09 +00:00 · 2025-05-06 18:20:33 +08:00
parent 817e0cb021 246412b4c7
commit a94156e78a
11 changed files with 665 additions and 6245 deletions
@@ -1,50 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
@@ -3,10 +3,16 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";

 export default tseslint.config(
  { ignores: ["dist"] },
  {
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
@@ -16,10 +22,13 @@ export default tseslint.config(
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
+      react,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": 0,
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
    },
  },
 );
@@ -4,10 +4,10 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite --host",
-    "build": "vite build",
+    "dev": "bunx --bun vite --host",
+    "build": "bun run lint && bunx --bun vite build",
    "lint": "eslint . && tsc -b",
-    "preview": "vite preview"
+    "preview": "bunx --bun vite preview"
  },
  "dependencies": {
    "@monaco-editor/react": "^4.7.0",
@@ -18,13 +18,14 @@
    "@radix-ui/react-radio-group": "^1.2.3",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.3",
+    "@tailwindcss/typography": "^0.5.16",
    "@tailwindcss/vite": "^4.0.9",
    "@tanstack/react-query": "^5.66.11",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
    "dayjs": "^1.11.13",
+    "eslint-plugin-react": "^7.37.5",
    "js-cookie": "^3.0.5",
    "katex": "^0.16.21",
    "lucide-react": "^0.476.0",
@@ -48,7 +49,6 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
-    "@tailwindcss/typography": "^0.5.16",
    "@types/js-cookie": "^3.0.6",
    "@types/node": "^22.13.5",
    "@types/react": "^19.0.10",
@@ -2,22 +2,26 @@ import "./styles/globals.css";

 import { Routes, Route } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { lazy, Suspense } from "react";

 import { AuthLayout } from "./widgets/auth-layout";
 import { NavbarLayout } from "./widgets/navbar-layout";
+import { Loading } from "./components/ui/loading";

 import LoginPage from "./pages/Login";
-import CompetitionPage from "./pages/Competition";
 import CompetitionsPage from "./pages/Competitions";
-import SessionPage from "./pages/CompetitionSession";
-import ReviewPage from "./pages/Review";
-import ProfilePage from "./pages/Profile";
+
+const CompetitionPage = lazy(() => import("./pages/Competition"));
+const SessionPage = lazy(() => import("./pages/CompetitionSession"));
+const ReviewPage = lazy(() => import("./pages/Review"));
+const ProfilePage = lazy(() => import("./pages/Profile"));

 const queryClient = new QueryClient();

 const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={<Loading />}>
        <Routes>
          <Route path="/login" element={<LoginPage />} />

@@ -37,6 +41,7 @@ const App = () => {

          <Route path="/review/:token" element={<ReviewPage />} />
        </Routes>
+      </Suspense>
    </QueryClientProvider>
  );
 };
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
  Dialog,
  DialogContent,
@@ -6,7 +6,7 @@ import {
  DialogTitle,
  DialogDescription,
 } from "@/components/ui/dialog";
-import { Loader2 } from 'lucide-react';
+import { Loader2 } from "lucide-react";

 export interface CompetitionResult {
  task_name: string;
@@ -24,67 +24,77 @@ interface CompetitionResultsModalProps {
  onOpenChange: (open: boolean) => void;
 }

-export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = ({
-  competitionTitle,
-  results,
-  isLoading,
-  error,
-  isOpen,
-  onOpenChange,
-}) => {
+export const CompetitionResultsModal: React.FC<
+  CompetitionResultsModalProps
+> = ({ competitionTitle, results, isLoading, error, isOpen, onOpenChange }) => {
  const renderResultValue = (result: number, maxPoints: number) => {
    if (result === -1) {
      return (
-        <span className="font-semibold" style={{ 
-          color: 'var(--color-task-text-checking)',
-          backgroundColor: 'var(--color-task-checking)',
-          padding: '4px 8px',
-          borderRadius: '4px'
-        }}>
+        <span
+          className="font-semibold"
+          style={{
+            color: "var(--color-task-text-checking)",
+            backgroundColor: "var(--color-task-checking)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
          На проверке
        </span>
      );
    } else if (result === -2) {
      return (
-        <span className="font-semibold" style={{ 
-          color: 'var(--color-task-text-uncleared)',
-          backgroundColor: 'var(--color-task-uncleared)',
-          padding: '4px 8px',
-          borderRadius: '4px'
-        }}>
+        <span
+          className="font-semibold"
+          style={{
+            color: "var(--color-task-text-uncleared)",
+            backgroundColor: "var(--color-task-uncleared)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
          Нет ответа
        </span>
      );
    } else if (result === 0) {
      return (
-        <span className="font-semibold" style={{ 
-          color: 'var(--color-task-text-wrong)',
-          backgroundColor: 'var(--color-task-wrong)',
-          padding: '4px 8px',
-          borderRadius: '4px'
-        }}>
+        <span
+          className="font-semibold"
+          style={{
+            color: "var(--color-task-text-wrong)",
+            backgroundColor: "var(--color-task-wrong)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
          Неверно (0/{maxPoints})
        </span>
      );
    } else if (result < maxPoints) {
      return (
-        <span className="font-semibold" style={{ 
-          color: 'var(--color-task-text-partial)',
-          backgroundColor: 'var(--color-task-partial)',
-          padding: '4px 8px',
-          borderRadius: '4px'
-        }}>
+        <span
+          className="font-semibold"
+          style={{
+            color: "var(--color-task-text-partial)",
+            backgroundColor: "var(--color-task-partial)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
          Частично верно ({result}/{maxPoints})
        </span>
      );
    } else {
      return (
-        <span className="font-semibold" style={{ 
-          color: 'var(--color-task-text-correct)',
-          backgroundColor: 'var(--color-task-correct)',
-          padding: '4px 8px',
-          borderRadius: '4px'
-        }}>
+        <span
+          className="font-semibold"
+          style={{
+            color: "var(--color-task-text-correct)",
+            backgroundColor: "var(--color-task-correct)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
          Верно ({result}/{maxPoints})
        </span>
      );
@@ -97,7 +107,7 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
        <DialogHeader>
          <DialogTitle>Результаты</DialogTitle>
          <DialogDescription>
-            Ваши результаты по соревнованию "{competitionTitle}"
+            Ваши результаты по соревнованию «{competitionTitle}»
          </DialogDescription>
        </DialogHeader>

@@ -107,7 +117,7 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
              <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
            </div>
          ) : error ? (
-            <div className="text-center py-6 text-red-500">
+            <div className="py-6 text-center text-red-500">
              Произошла ошибка при загрузке результатов
            </div>
          ) : results && results.length > 0 ? (
@@ -116,16 +126,18 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
              .map((result, index) => (
                <div
                  key={index}
-                  className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 bg-gray-50 rounded-lg border"
+                  className="flex flex-col items-start justify-between rounded-lg border bg-gray-50 p-4 md:flex-row md:items-center"
                >
-                  <div className="font-medium mb-2 md:mb-0">{result.task_name}</div>
+                  <div className="mb-2 font-medium md:mb-0">
+                    {result.task_name}
+                  </div>
                  <div className="text-right">
                    {renderResultValue(result.result, result.max_points)}
                  </div>
                </div>
              ))
          ) : (
-            <div className="text-center py-6 text-gray-500">
+            <div className="py-6 text-center text-gray-500">
              Нет доступных результатов
            </div>
          )}
@@ -69,7 +69,12 @@ export const FileAnswer = ({
        </>
      ) : (
        <>
-          <a download={answer.file.name} href={link} target="_blank">
+          <a
+            download={answer.file.name}
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+          >
            <div className="bg-muted flex w-full max-w-56 items-center gap-3 rounded-md border px-3 py-3 transition-transform active:scale-[0.95]">
              <File size={22} className="min-w-fit" />
              <div className="flex w-full flex-col gap-1 overflow-hidden">
@@ -35,7 +35,12 @@ export const AttachmentCard = ({
  const extension = filename?.split(".").at(-1);

  return (
-    <a download={filename} href={attachment.file} target="_blank">
+    <a
+      download={filename}
+      href={attachment.file}
+      target="_blank"
+      rel="noreferrer"
+    >
      <div className="bg-card flex w-full items-center gap-3 rounded-md px-3 py-3 transition-transform active:scale-[0.95]">
        <File size={22} className="min-w-fit" />
        <div className="flex w-full flex-col gap-1 overflow-hidden">
@@ -153,13 +153,7 @@ const ReviewDescription = ({ review }: { review: Review }) => {

 const ReviewContent = ({ review }: { review: Review }) => {
  const extension = review.content.split(".").at(-1);
-  const fullFilename = review.content.split("/").at(-1);
-
-  const filename = fullFilename
-    ? fullFilename.length > 20
-      ? fullFilename.substring(0, 20) + "..."
-      : fullFilename
-    : "";
+  const filename = review.content.split("/").at(-1);

  const { data: content, isLoading } = useQuery({
    queryKey: ["review-file", review.id],
@@ -181,10 +175,13 @@ const ReviewContent = ({ review }: { review: Review }) => {
          <a
            href={review.content}
            target="_blank"
-            className="flex items-center gap-3"
+            className="flex items-center gap-3 overflow-hidden"
+            rel="noreferrer"
          >
-            <File size={16} />
-            <span>{filename}</span>
+            <File size={16} className="min-w-4" />
+            <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+              {filename}
+            </span>
          </a>
        )}
      </div>
@@ -6,15 +6,19 @@ import tsconfigPaths from "vite-tsconfig-paths";
 // https://vite.dev/config/
 export default defineConfig({
  build: {
-    outDir: 'dist',
-    assetsDir: 'assets', 
+    outDir: "dist",
+    assetsDir: "assets",
    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          code: ["monaco-editor", "@monaco-editor/react"],
+          md: ["react-markdown", "rehype-katex", "remark-gfm", "remark-math"],
        },
-  plugins: [
-    tsconfigPaths(),
-    react(),
-    tailwindcss()
-  ],
-  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg'],
-  publicDir: 'public',
+      },
+    },
+  },
+  plugins: [tsconfigPaths(), react(), tailwindcss()],
+  assetsInclude: ["**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.svg"],
+  publicDir: "public",
 });