Fix some render problem

src/components/SubmissionDetail.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { SubmissionServiceModel } from "../typings/submission";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -29,7 +29,7 @@ const SubmissionDetail: React.FC<SubmissionDetailProps> = (props) => {
           </thead>
           <tbody>
             <tr className="bg-base-200">
-              <td className="border-r border-t">{props.data.uid}</td>
+              <td className="border-r border-t">{props.data.UID}</td>
               <td className="border-l border-t">{props.data.problem.slug}</td>
               <td className="border-l border-t">{props.data.language}</td>
               <td className="border-l border-t">

src/components/SubmissionTable.tsx

@@ -32,8 +32,8 @@ const SubmissionTable: React.FC<SubmissionTableProps> = (props) => {
           </tr>
         </thead>
         <tbody>
-          {props.data.map((submission) => (
-            <tr className="hover" onClick={() => navigate(submission.uid)}>
+          {props.data.map((submission, idx) => (
+            <tr className="hover" onClick={() => navigate(submission.UID)} key={idx}>
               <th>{submission.problem.title}</th>
               <td>{submission.user.name}</td>
               <td>{submission.language}</td>

src/hooks/problem.ts

@@ -1,11 +1,16 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ProblemServiceModel } from "../typings/problem";
 import { ProblemService } from "../api/problem";
 
 export const useProblem = (slug: string, fallback?: () => void) => {
   const [problem, setProblem] = useState<ProblemServiceModel.Problem | null>(
     null,
   );
+  const fallbackRef = useRef(fallback);
+
+  useEffect(() => {
+    fallbackRef.current = fallback;
+  }, [fallback]);
 
   useEffect(() => {
     ProblemService.getProblem(slug)
@@ -14,9 +19,9 @@ export const useProblem = (slug: string, fallback?: () => void) => {
       })
       .catch((err) => {
         console.log(err);
-        fallback?.();
+        fallbackRef.current?.();
       });
-  }, [slug, fallback]);
+  }, [slug]);
 
   function getProblem() {
     return problem;

src/mocks/rest/submission.ts

@@ -3,7 +3,7 @@ import { SubmissionServiceModel } from "../../typings/submission";
 
 const submissions: SubmissionServiceModel.SubmissionInfo[] = [
   {
-    uid: "1",
+    UID: "1",
     user: {
       account: "user-1",
       name: "User 1",
@@ -18,7 +18,7 @@ const submissions: SubmissionServiceModel.SubmissionInfo[] = [
     status: "finished",
   },
   {
-    uid: "2",
+    UID: "2",
     user: {
       account: "user-2",
       name: "User 2",

src/typings/submission.ts

@@ -3,7 +3,7 @@ import { UserServiceModel } from "./user";
 
 export namespace SubmissionServiceModel {
   export interface SubmissionInfo {
-    uid: string;
+    UID: string;
     user: UserServiceModel.UserInfo;
     problem: ProblemServiceModel.ProblemInfo;
     language: string;