diff --git a/package.json b/package.json
index be8c764..f998fec 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"react-markdown": "^9.0.1",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
+ "react-timer-hook": "^3.0.7",
"rehype-mathjax": "^6.0.0",
"rehype-raw": "^7.0.0",
"remark-emoji": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01b8b74..34de4f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ dependencies:
react-router-dom:
specifier: ^6.22.3
version: 6.22.3(react-dom@18.2.0)(react@18.2.0)
+ react-timer-hook:
+ specifier: ^3.0.7
+ version: 3.0.7(react@18.2.0)
rehype-mathjax:
specifier: ^6.0.0
version: 6.0.0
@@ -6177,6 +6180,14 @@ packages:
tslib: 2.6.2
dev: false
+ /react-timer-hook@3.0.7(react@18.2.0):
+ resolution: {integrity: sha512-ATpNcU+PQRxxfNBPVqce2+REtjGAlwmfoNQfcEBMZFxPj0r3GYdKhyPHdStvqrejejEi0QvqaJZjy2lBlFvAsA==}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/src/pages/StatusPage.tsx b/src/pages/StatusPage.tsx
index 5a564fe..0365b77 100644
--- a/src/pages/StatusPage.tsx
+++ b/src/pages/StatusPage.tsx
@@ -1,5 +1,5 @@
import type React from "react";
-import { lazy } from "react";
+import { lazy, useEffect } from "react";
import { useParams } from "react-router-dom";
import {
Accordion,
@@ -20,6 +20,8 @@ import {
Wrap,
WrapItem,
} from "@chakra-ui/react";
+import { QueryStatus } from "@reduxjs/toolkit/query";
+import { useTimer } from "react-timer-hook";
import { useStatusQuery } from "../app/services/status";
import { useDetailQuery } from "../app/services/problem";
@@ -60,9 +62,33 @@ const statusStyle: React.CSSProperties = {
export default function StatusPage() {
const { id } = useParams();
const sid = Number(id) || 0;
- const { data: status } = useStatusQuery({ sid: sid });
+ const { data: status, refetch } = useStatusQuery({ sid: sid });
const { data: problem } = useDetailQuery({ pid: status?.body.submission.problem.meta.ID || 0 });
+ const calcNextTime = () => {
+ const now = new Date();
+ now.setSeconds(now.getSeconds() + 3);
+ return now;
+ };
+
+ const {
+ isRunning,
+ restart: startTimer,
+ pause: pauseTimer,
+ } = useTimer({
+ expiryTimestamp: calcNextTime(),
+ onExpire: () => {
+ if (status != undefined) return;
+ void refetch().then((r) => {
+ if (r.status === QueryStatus.fulfilled) pauseTimer();
+ });
+ },
+ });
+
+ useEffect(() => {
+ if (!status && !isRunning) startTimer(calcNextTime());
+ }, [isRunning, startTimer, status]);
+
const showSourceCode = status && status.body.submission.code !== "";
const showMessage = status && (status.body.context.message !== "" || status.body.context.compile_message !== "");
@@ -73,7 +99,6 @@ export default function StatusPage() {
Waiting for Judge...
- Please refresh the page after a few seconds.
);