refactor(frontend): create SubmitStatusLabel component

4 files changed, 34 insertions, 27 deletions

diff --git a/frontend/app/components/ExecStatusIndicatorIcon.tsx b/frontend/app/components/ExecStatusIndicatorIcon.tsx
index b5c53ec..13343b8 100644
--- a/frontend/app/components/ExecStatusIndicatorIcon.tsx
+++ b/frontend/app/components/ExecStatusIndicatorIcon.tsx
@@ -5,7 +5,7 @@ import {
 	faRotate,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ExecResultStatus } from "../models/ExecResult";
+import type { ExecResultStatus } from "../models/ExecResult";
 
 type Props = {
 	status: ExecResultStatus;
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index bdd1ac3..b436842 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,6 +1,6 @@
 import { PlayerInfo } from "../../models/PlayerInfo";
-import { submitResultStatusToLabel } from "../../models/SubmitResult";
 import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
+import SubmitStatusLabel from "../SubmitStatusLabel";
 
 type Props = {
 	problem: string;
@@ -60,8 +60,10 @@ export default function GolfWatchAppGaming({
 				</div>
 				<div>
 					<div>
-						{submitResultStatusToLabel(
-							playerInfoA.submitResult?.status ?? null,
+						{playerInfoA.submitResult?.status ? (
+							<SubmitStatusLabel status={playerInfoA.submitResult?.status} />
+						) : (
+							<span>-</span>
 						)}
 					</div>
 					<div>
@@ -90,8 +92,10 @@ export default function GolfWatchAppGaming({
 				</div>
 				<div>
 					<div>
-						{submitResultStatusToLabel(
-							playerInfoB.submitResult?.status ?? null,
+						{playerInfoB.submitResult?.status ? (
+							<SubmitStatusLabel status={playerInfoB.submitResult?.status} />
+						) : (
+							<span>-</span>
 						)}
 					</div>
 					<div>
diff --git a/frontend/app/components/SubmitStatusLabel.tsx b/frontend/app/components/SubmitStatusLabel.tsx
new file mode 100644
index 0000000..f6e19bb
--- /dev/null
+++ b/frontend/app/components/SubmitStatusLabel.tsx
@@ -0,0 +1,24 @@
+import type { SubmitResultStatus } from "../models/SubmitResult";
+
+type Props = {
+	status: SubmitResultStatus;
+};
+
+export default function SubmitStatusLabel({ status }: Props) {
+	switch (status) {
+		case "running":
+			return <span>Running...</span>;
+		case "success":
+			return <span>Accepted</span>;
+		case "wrong_answer":
+			return <span>Wrong Answer</span>;
+		case "timeout":
+			return <span>Time Limit Exceeded</span>;
+		case "compile_error":
+			return <span>Compile Error</span>;
+		case "runtime_error":
+			return <span>Runtime Error</span>;
+		case "internal_error":
+			return <span>Internal Error</span>;
+	}
+}
diff --git a/frontend/app/models/SubmitResult.ts b/frontend/app/models/SubmitResult.ts
index 403a0db..0cb7f9b 100644
--- a/frontend/app/models/SubmitResult.ts
+++ b/frontend/app/models/SubmitResult.ts
@@ -13,24 +13,3 @@ export type SubmitResult = {
 	status: SubmitResultStatus;
 	execResults: ExecResult[];
 };
-
-export function submitResultStatusToLabel(status: SubmitResultStatus | null) {
-	switch (status) {
-		case null:
-			return "-";
-		case "running":
-			return "Running...";
-		case "success":
-			return "Accepted";
-		case "wrong_answer":
-			return "Wrong Answer";
-		case "timeout":
-			return "Time Limit Exceeded";
-		case "compile_error":
-			return "Compile Error";
-		case "runtime_error":
-			return "Runtime Error";
-		case "internal_error":
-			return "Internal Error";
-	}
-}