Little UI perf

oj-lab · Jan 21, 2024 · 56a29cf · 56a29cf
1 parent 2b755f6
commit 56a29cf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 33 deletions.
diff --git a/src/components/SubmissionTable.tsx b/src/components/SubmissionTable.tsx
@@ -5,6 +5,7 @@ import {
   TableHeader,
   TableRow,
   TableCell,
+  Chip,
 } from "@nextui-org/react";
 import React from "react";
 import { useNavigate } from "react-router-dom";
@@ -28,28 +29,6 @@ export interface SubmissionTableProps {
 const SubmissionTable: React.FC<SubmissionTableProps> = (props) => {
   const navigate = useNavigate();
 
-  const renderCell = React.useCallback(
-    (
-      submissionInfo: SubmissionServiceModel.SubmissionInfo,
-      columnUid: React.Key,
-    ) => {
-      if (columnUid === "problem") {
-        return submissionInfo.problem.title;
-      }
-      if (columnUid === "user") {
-        return submissionInfo.user.name;
-      }
-      if (columnUid === "language") {
-        return submissionInfo.language;
-      }
-      if (columnUid === "status") {
-        return submissionInfo.status;
-      }
-      return null;
-    },
-    [],
-  );
-
   return (
     <Table className={props.className} aria-label="Submission Table">
       <TableHeader
@@ -75,9 +54,17 @@ const SubmissionTable: React.FC<SubmissionTableProps> = (props) => {
               }
             }}
           >
-            {(columnKey) => (
-              <TableCell>{renderCell(item, columnKey)}</TableCell>
-            )}
+            <TableCell>{item.problem.title}</TableCell>
+            <TableCell>{item.user.name}</TableCell>
+            <TableCell>{item.language}</TableCell>
+            <TableCell>
+              <Chip
+                color={item.status === "finished" ? "success" : "danger"}
+                variant="bordered"
+              >
+                {item.status}
+              </Chip>
+            </TableCell>
           </TableRow>
         )}
       </TableBody>

diff --git a/src/layouts/adminLayout/Sidebar.tsx b/src/layouts/adminLayout/Sidebar.tsx
@@ -8,8 +8,8 @@ import { useNavigate } from "react-router-dom";
 const iconPath = `${import.meta.env.BASE_URL}images/oj-lab-icon.svg`;
 
 const navigation = [
-  { name: "Problem", href: "/admin/problem", icon: HomeIcon, current: true },
-  { name: "User", href: "/admin/user", icon: UsersIcon, current: false },
+  { name: "Problem", href: "/admin/problem", icon: HomeIcon },
+  { name: "User", href: "/admin/user", icon: UsersIcon },
 ];
 
 interface SidebarProps {
@@ -96,18 +96,18 @@ export default function Sidebar(props: SidebarProps) {
                               <li key={item.name}>
                                 <div
                                   className={joinClasses(
-                                    item.current
+                                    window.location.href.includes(item.href)
                                       ? "bg-indigo-700 text-white"
                                       : "text-indigo-200 hover:bg-indigo-700 hover:text-white",
-                                    "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
+                                    "group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
                                   )}
                                   onClick={() => {
                                     navigate(item.href);
                                   }}
                                 >
                                   <item.icon
                                     className={joinClasses(
-                                      item.current
+                                      window.location.href.includes(item.href)
                                         ? "text-white"
                                         : "text-indigo-200 group-hover:text-white",
                                       "h-6 w-6 shrink-0",
@@ -145,18 +145,18 @@ export default function Sidebar(props: SidebarProps) {
                       <li key={item.name}>
                         <div
                           className={joinClasses(
-                            item.current
+                            window.location.href.includes(item.href)
                               ? "bg-indigo-700 text-white"
                               : "text-indigo-200 hover:bg-indigo-700 hover:text-white",
-                            "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
+                            "group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
                           )}
                           onClick={() => {
                             navigate(item.href);
                           }}
                         >
                           <item.icon
                             className={joinClasses(
-                              item.current
+                              window.location.href.includes(item.href)
                                 ? "text-white"
                                 : "text-indigo-200 group-hover:text-white",
                               "h-6 w-6 shrink-0",