From 2975c89f5964a3fac62fd9d42b6336eb7c48585d Mon Sep 17 00:00:00 2001
From: KanonKC <kanonkce@gmail.com>
Date: Tue, 5 Nov 2024 17:07:15 +0700
Subject: [PATCH 1/3] Hide difficulty, improve allow languages display

---
 .../Tables/ProblemTables/MyProblemsTable.tsx  | 67 ++++++-------------
 src/components/shadcn/Badge.tsx               |  6 +-
 2 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/src/components/Tables/ProblemTables/MyProblemsTable.tsx b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
index 8e2db36..862ecf9 100644
--- a/src/components/Tables/ProblemTables/MyProblemsTable.tsx
+++ b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
@@ -1,12 +1,12 @@
 import { ColumnDef } from "@tanstack/react-table";
 import {
-	Check,
-	FileSpreadsheet,
-	MoreHorizontal,
-	Tally4,
-	Tally5,
-	Timer,
-	X
+    Check,
+    FileSpreadsheet,
+    MoreHorizontal,
+    Tally4,
+    Tally5,
+    Timer,
+    X
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
@@ -16,7 +16,6 @@ import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
 import MyProblemDropdown from "../../Dropdowns/MyProblemDropdown";
 import { DataTable } from "../Prototype/DataTable";
 import DataTableSortableLayout from "../Prototype/DataTableSortableLayout";
-import DifficultyBadge from "../../DifficultyBadge";
 
 const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 	{
@@ -74,30 +73,6 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 			</div>
 		),
 	},
-
-	// {
-	// 	accessorKey: "status",
-	// 	header: "Status",
-	// 	cell: ({ row }) => {
-	// 		return (
-	// 			<div className="">
-	// 				<CheckBadge checked={row.original.solution !== ""}>
-	// 					Source Code
-	// 				</CheckBadge>
-	// 				<span className="mx-1">
-	// 					<CheckBadge checked={row.original.testcases.length > 0}>
-	// 						Testcases
-	// 					</CheckBadge>
-	// 				</span>
-	// 				<CheckBadge
-	// 					checked={checkRuntimeStatus(row.original.testcases)}
-	// 				>
-	// 					No Runtime Error
-	// 				</CheckBadge>
-	// 			</div>
-	// 		);
-	// 	},
-	// },
 	{
 		accessorKey: "source_code",
 		header: () => <div className="text-center">
@@ -145,9 +120,9 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 
 	{
 		accessorKey: "allowed_languages",
-		header: "Allowed Languages",
+		header: () => <div className="text-center">Allowed Languages</div>,
 		cell: ({ row }) => (
-			<div className="font-medium">
+			<div className="font-medium flex justify-center">
 				{row.original.allowed_languages.split(",").map((lang) => (
 					<span className="mx-0.5">
 						{
@@ -160,19 +135,19 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 			</div>
 		),
 	},
+    // Temporary hide this column
+	// {
+	// 	accessorKey: "difficulty",
+	// 	header: ({ column }) => (
+	// 		<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+	// 			Difficulty
+	// 		</DataTableSortableLayout>
 
-	{
-		accessorKey: "difficulty",
-		header: ({ column }) => (
-			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
-				Difficulty
-			</DataTableSortableLayout>
-
-		),
-		cell: ({ row }) => (
-			<DifficultyBadge level={row.original.difficulty}/>
-		),
-	},
+	// 	),
+	// 	cell: ({ row }) => (
+	// 		<DifficultyBadge level={row.original.difficulty}/>
+	// 	),
+	// },
 
 	{
 		accessorKey: "updated_date",
diff --git a/src/components/shadcn/Badge.tsx b/src/components/shadcn/Badge.tsx
index a448338..953d124 100644
--- a/src/components/shadcn/Badge.tsx
+++ b/src/components/shadcn/Badge.tsx
@@ -9,11 +9,11 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground cursor-default", // hover:bg-primary/80",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground", // hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground", // hover:bg-destructive/80",
         outline: "text-foreground",
       },
     },

From 9217b47dc720a7a3b08923df7ddc73cb63d2f048 Mon Sep 17 00:00:00 2001
From: KanonKC <kanonkce@gmail.com>
Date: Tue, 5 Nov 2024 17:27:28 +0700
Subject: [PATCH 2/3] Remove realtime submission load

---
 src/views/My/Problems/ProblemStatistic.tsx | 43 +---------------------
 1 file changed, 1 insertion(+), 42 deletions(-)

diff --git a/src/views/My/Problems/ProblemStatistic.tsx b/src/views/My/Problems/ProblemStatistic.tsx
index a95e29c..31aff69 100644
--- a/src/views/My/Problems/ProblemStatistic.tsx
+++ b/src/views/My/Problems/ProblemStatistic.tsx
@@ -1,3 +1,4 @@
+import { Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import MyProblemSubmissionsTable from "../../../components/Tables/MyProblemSubmissionsTable";
@@ -7,16 +8,10 @@ import { SubmissionService } from "../../../services/Submission.service";
 import { ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel } from "../../../types/models/Problem.model";
 import { SubmissionPopulateSubmissionTestcaseAndAccountModel } from "../../../types/models/Submission.model";
 import { ProblemService } from "./../../../services/Problem.service";
-import { Pencil, RotateCw } from "lucide-react";
-import { Switch } from "../../../components/shadcn/Switch";
-import { Label } from "../../../components/shadcn/Label";
-import { cn } from "../../../lib/utils";
 
 const ProblemStatistic = () => {
 	const { problemId } = useParams();
 	const accountId = String(localStorage.getItem("account_id"));
-	const [loading, setLoading] = useState(false);
-	const [realtimeSubmission, setRealtimeSubmission] = useState(false);
 
 	const [problem, setProblem] =
 		useState<ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel>();
@@ -25,7 +20,6 @@ const ProblemStatistic = () => {
 
 	const loadSubmissions = () => {
 		if (!problemId) return;
-		setLoading(true);
 		ProblemService.get(accountId, problemId)
 			.then((response) => {
 				setProblem(response.data);
@@ -36,16 +30,10 @@ const ProblemStatistic = () => {
 			})
 			.then((response) => {
 				setSubmissions(response.data.submissions);
-				setLoading(false);
 			});
 	};
 
 	useEffect(loadSubmissions, [accountId, problemId]);
-	useEffect(() => {
-		if (realtimeSubmission) {
-			loadSubmissions();
-		}
-	})
 
 	return (
 		<NavbarSidebarLayout>
@@ -53,35 +41,6 @@ const ProblemStatistic = () => {
 				<div className="font-bold text-3xl">{problem?.title}</div>
 
 				<div className="mb-5 flex justify-end gap-10 items-center">
-					<div className="flex items-center gap-2">
-						
-						{!realtimeSubmission ? (
-							<Button
-								onClick={loadSubmissions}
-								disabled={loading || realtimeSubmission}
-								className={cn("bg-blue-600 hover:bg-blue-500")}
-							>
-								<RotateCw size={20} className={cn({
-									"animate-spin": loading,
-								})} />
-							</Button>
-						) : (
-							<Button
-								disabled
-								className="bg-red-600 hover:bg-red-500"
-							>
-								<RotateCw size={20} className="animate-spin mr-2" />
-								Streaming...
-							</Button>
-						)}
-						<Label>Realtime Submission</Label>
-						<Switch
-							checked={realtimeSubmission}
-							onClick={() =>
-								setRealtimeSubmission(!realtimeSubmission)
-							}
-						/>
-					</div>
 					<div>
 						<Link to={`/my/problems/${problemId}/edit`}>
 							<Button>

From fa8c7dd545ed23ef90188a11eedc8f77479f28c4 Mon Sep 17 00:00:00 2001
From: KanonKC <kanonkce@gmail.com>
Date: Sat, 9 Nov 2024 13:10:00 +0700
Subject: [PATCH 3/3] Change title as problem name while editing

---
 src/router.tsx                             | 96 ++++++++++++++--------
 src/views/My/Problems/EditProblem.tsx      | 85 ++++++++++---------
 src/views/My/Problems/ProblemStatistic.tsx |  1 +
 3 files changed, 112 insertions(+), 70 deletions(-)

diff --git a/src/router.tsx b/src/router.tsx
index 3969d16..9a18f9d 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Route, Routes } from "react-router-dom";
 import { LoginContext } from "./contexts/LoginContext";
 import CourseManagement from "./views/CourseManagement";
@@ -27,14 +27,8 @@ import ViewCourseProblem from "./views/ViewCourseProblem";
 import ViewProblem from "./views/ViewProblem";
 
 const Router = () => {
-
 	// const navigate = useNavigate();
-	const {isLogin} = useContext(LoginContext);
-	useEffect(() => {
-		console.log('isLogin',isLogin)
-		if (isLogin !== null && !isLogin) {
-		}
-	},[isLogin])
+	const { isLogin } = useContext(LoginContext);
 
 	return (
 		<Routes>
@@ -44,36 +38,72 @@ const Router = () => {
 			<Route path="/login" element={<Login />} />
 			<Route path="/register" element={<Register />} />
 
-			{(isLogin !== null && !isLogin) && (<Route path="/*" element={<Login />} />)}
+			{isLogin !== null && !isLogin && (
+				<Route path="/*" element={<Login />} />
+			)}
+
+			{isLogin && (
+				<>
+					<Route path="/dashboard" element={<Dashboard />} />
+					<Route path="/management" element={<CourseManagement />} />
+
+					<Route path="/my/problems" element={<MyProblems />} />
+					<Route
+						path="/my/problems/create"
+						element={<CreateProblem />}
+					/>
+					<Route
+						path="/my/problems/:problemId"
+						element={<ProblemStatistic />}
+					/>
+					<Route
+						path="/my/problems/:problemId/edit"
+						element={<EditProblem />}
+					/>
 
-			{isLogin && (<>
-			<Route path="/dashboard" element={<Dashboard />} />
-			<Route path="/management" element={<CourseManagement />} />
+					<Route path="/my/collections" element={<MyCollections />} />
+					<Route
+						path="/my/collections/create"
+						element={<CreateCollection />}
+					/>
+					<Route
+						path="/my/collections/:collectionId/edit"
+						element={<EditCollection />}
+					/>
 
-			<Route path="/my/problems" element={<MyProblems />} />
-			<Route path="/my/problems/create" element={<CreateProblem />} />
-			<Route path="/my/problems/:problemId" element={<ProblemStatistic />} />
-			<Route path="/my/problems/:problemId/edit" element={<EditProblem />} />
+					<Route path="/my/courses" element={<MyCourses />} />
+					<Route
+						path="/my/courses/create"
+						element={<CreateCourse />}
+					/>
+					<Route
+						path="/my/courses/:courseId/edit"
+						element={<EditCourse />}
+					/>
 
-			<Route path="/my/collections" element={<MyCollections />} />
-			<Route path="/my/collections/create" element={<CreateCollection />} />
-			<Route path="/my/collections/:collectionId/edit" element={<EditCollection />} />
+					<Route path="/my/groups" element={<MyGroups />} />
+					<Route path="/my/groups/create" element={<CreateGroup />} />
+					<Route
+						path="/my/groups/:groupId/edit"
+						element={<EditGroup />}
+					/>
 
-			<Route path="/my/courses" element={<MyCourses />} />
-			<Route path="/my/courses/create" element={<CreateCourse />} />
-			<Route path="/my/courses/:courseId/edit" element={<EditCourse />} />
+					<Route
+						path="/my/submissions"
+						element={<MyPreviousSubmissions />}
+					/>
 
-			<Route path="/my/groups" element={<MyGroups />} />
-			<Route path="/my/groups/create" element={<CreateGroup />} />
-			<Route path="/my/groups/:groupId/edit" element={<EditGroup />} />
-			
-			<Route path="/my/submissions" element={<MyPreviousSubmissions />} />
-			
-			<Route path="/problems/:problemId" element={<ViewProblem />} />
-			<Route path="/courses/:courseId" element={<ViewCourse />} />
-			<Route path="/courses/:courseId/problems/:problemId" element={<ViewCourseProblem />} />
-			</>)}
-			
+					<Route
+						path="/problems/:problemId"
+						element={<ViewProblem />}
+					/>
+					<Route path="/courses/:courseId" element={<ViewCourse />} />
+					<Route
+						path="/courses/:courseId/problems/:problemId"
+						element={<ViewCourseProblem />}
+					/>
+				</>
+			)}
 		</Routes>
 	);
 };
diff --git a/src/views/My/Problems/EditProblem.tsx b/src/views/My/Problems/EditProblem.tsx
index 9c39c23..a3acec9 100644
--- a/src/views/My/Problems/EditProblem.tsx
+++ b/src/views/My/Problems/EditProblem.tsx
@@ -12,62 +12,73 @@ import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequ
 import { ProblemPoplulateCreatorModel } from "../../../types/models/Problem.model";
 
 const EditProblem = () => {
-	
 	const accountId = String(localStorage.getItem("account_id"));
 
 	const { problemId } = useParams();
 	const editProblemId = String(problemId);
 
-	const [problem,setProblem] = useState<ProblemPoplulateCreatorModel>();
+	const [problem, setProblem] = useState<ProblemPoplulateCreatorModel>();
 
-	const [createRequest, setCreateRequest] = useState<CreateProblemRequestForm>();
+	const [createRequest, setCreateRequest] =
+		useState<CreateProblemRequestForm>();
 
-	const handleSave: OnProblemSaveCallback = (
-		setLoading,
-		createRequest
-	) => {
+	const handleSave: OnProblemSaveCallback = (setLoading, createRequest) => {
 		setLoading(true);
 
-		const { request,groups } = transformCreateProblemRequestForm2CreateProblemRequest(createRequest)
+		const { request, groups } =
+			transformCreateProblemRequestForm2CreateProblemRequest(
+				createRequest
+			);
 
-		ProblemService.update(
-			String(editProblemId),
-			accountId,
-			request
-		).then((response) => {
-			return ProblemService.updateGroupPermissions(response.data.problem_id,accountId,groups)
-		}).then((response) => {
-			console.log("Update Completed", response.data);
-			setLoading(false);
-			toast({
-				title: "Problem Updated",
+		ProblemService.update(String(editProblemId), accountId, request)
+			.then((response) => {
+				return ProblemService.updateGroupPermissions(
+					response.data.problem_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				console.log("Update Completed", response.data);
+				setLoading(false);
+				toast({
+					title: "Problem Updated",
+				});
 			});
-		});
 	};
 
 	useEffect(() => {
-		ProblemService.get(accountId,editProblemId).then((response) => {
-			setProblem(response.data)
-			setCreateRequest(transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(response.data));
+		ProblemService.get(accountId, editProblemId).then((response) => {
+			setProblem(response.data);
+			setCreateRequest(
+				transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
+					response.data
+				)
+			);
+            document.title = `${response.data.title} - Edit`;
 		});
-	}, []);
+
+
+	}, [accountId, editProblemId]);
 	return (
 		<NavbarSidebarLayout>
-			{createRequest && <CreateProblemForm
-				createRequestInitialValue={createRequest}
-				validatedTestcases={problem?.testcases}
-				onProblemSave={(
-					setLoading,
-				
-					createRequest
-				) =>
-					handleSave(
+			{createRequest && (
+				<CreateProblemForm
+					createRequestInitialValue={createRequest}
+					validatedTestcases={problem?.testcases}
+					onProblemSave={(
 						setLoading,
-						
+
 						createRequest
-					)
-				}
-			/>}
+					) =>
+						handleSave(
+							setLoading,
+
+							createRequest
+						)
+					}
+				/>
+			)}
 		</NavbarSidebarLayout>
 	);
 };
diff --git a/src/views/My/Problems/ProblemStatistic.tsx b/src/views/My/Problems/ProblemStatistic.tsx
index 31aff69..6651b21 100644
--- a/src/views/My/Problems/ProblemStatistic.tsx
+++ b/src/views/My/Problems/ProblemStatistic.tsx
@@ -23,6 +23,7 @@ const ProblemStatistic = () => {
 		ProblemService.get(accountId, problemId)
 			.then((response) => {
 				setProblem(response.data);
+                document.title = `${response.data.title}`
 				return SubmissionService.getByCreatorProblem(
 					accountId,
 					problemId