feat: auto refresh on StatusPage
This commit is contained in:
parent
1768384ce5
commit
a7959b38d5
@ -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",
|
||||
|
@ -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'}
|
||||
|
@ -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() {
|
||||
<Text as="b" mr={2}>
|
||||
Waiting for Judge...
|
||||
</Text>
|
||||
<Text>Please refresh the page after a few seconds.</Text>
|
||||
</Alert>
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user