Realtime Submission

src/components/Forms/CreateGroupForm/ManageMembers.tsx

@@ -132,6 +132,7 @@ const ManageMembers = ({
 			const reader = new FileReader();
 			reader.onload = function (e) {
 				const content = e.target?.result;
+				console.log(content)
 				const lines = (content as string).split("\n").map((line) => line.split(",")[0]);
 
 				setAccountReferenceFromFile(lines)

src/views/My/Problems/CreateProblem.tsx

@@ -1,6 +1,8 @@
 import { ELEMENT_PARAGRAPH } from "@udecode/plate-paragraph";
 import { useNavigate } from "react-router-dom";
-import CreateProblemForm, { OnProblemSaveCallback } from "../../../components/Forms/CreateProblemForm";
+import CreateProblemForm, {
+	OnProblemSaveCallback,
+} from "../../../components/Forms/CreateProblemForm";
 import { toast } from "../../../components/shadcn/UseToast";
 import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
 import { ProblemService } from "../../../services/Problem.service";
@@ -26,28 +28,32 @@ const formInitialValue: CreateProblemRequestForm = {
 };
 
 const CreateProblem = () => {
-
 	const accountId = String(localStorage.getItem("account_id"));
 	const navigate = useNavigate();
 
-
-	const handleSave:OnProblemSaveCallback = (setLoading, createRequest) => {
+	const handleSave: OnProblemSaveCallback = (setLoading, createRequest) => {
 		setLoading(true);
 
-		const {request,groups} = transformCreateProblemRequestForm2CreateProblemRequest(createRequest)
-
-		ProblemService.create(
-			accountId,
-			request
-		).then((response) => {
-			return ProblemService.updateGroupPermissions(response.data.problem_id,accountId,groups)
-		}).then((response) => {
-			setLoading(false);
-			toast({
-				title: "Create Completed",
+		const { request, groups } =
+			transformCreateProblemRequestForm2CreateProblemRequest(
+				createRequest
+			);
+
+		ProblemService.create(accountId, request)
+			.then((response) => {
+				return ProblemService.updateGroupPermissions(
+					response.data.problem_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				setLoading(false);
+				toast({
+					title: "Create Completed",
+				});
+				navigate(`/my/problems/${response.data.problem_id}/edit`);
 			});
-			navigate(`/my/problems/${response.data.problem_id}/edit`);
-		});
 	};
 
 	return (

src/views/My/Problems/ProblemStatistic.tsx

@@ -7,19 +7,25 @@ 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>();
 	const [submissions, setSubmissions] =
 		useState<SubmissionPopulateSubmissionTestcaseAndAccountModel[]>();
 
-	useEffect(() => {
+	const loadSubmissions = () => {
 		if (!problemId) return;
-
+		setLoading(true);
 		ProblemService.get(accountId, problemId)
 			.then((response) => {
 				setProblem(response.data);
@@ -30,21 +36,63 @@ const ProblemStatistic = () => {
 			})
 			.then((response) => {
 				setSubmissions(response.data.submissions);
+				setLoading(false);
 			});
-	}, [accountId, problemId]);
+	};
+
+	useEffect(loadSubmissions, [accountId, problemId]);
+	useEffect(() => {
+		if (realtimeSubmission) {
+			loadSubmissions();
+		}
+	})
 
 	return (
 		<NavbarSidebarLayout>
 			<div className="mt-10 w-[96%] mx-auto">
 				<div className="font-bold text-3xl">{problem?.title}</div>
 
-				<div className="mb-5 flex justify-end">
-					<Link to={`/my/problems/${problemId}/edit`}>
-						<Button>Edit Problem</Button>
-					</Link>
+				<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>
+								<Pencil size={20} className="mr-2" />
+								Edit Problem
+							</Button>
+						</Link>
+					</div>
 				</div>
 
-				<div >
+				<div>
 					{problem && (
 						<MyProblemSubmissionsTable
 							submissions={submissions}