feat: auto refresh on StatusPage
This commit is contained in:
parent
1768384ce5
commit
a7959b38d5
@ -36,6 +36,7 @@
|
|||||||
"react-markdown": "^9.0.1",
|
"react-markdown": "^9.0.1",
|
||||||
"react-redux": "^9.1.0",
|
"react-redux": "^9.1.0",
|
||||||
"react-router-dom": "^6.22.3",
|
"react-router-dom": "^6.22.3",
|
||||||
|
"react-timer-hook": "^3.0.7",
|
||||||
"rehype-mathjax": "^6.0.0",
|
"rehype-mathjax": "^6.0.0",
|
||||||
"rehype-raw": "^7.0.0",
|
"rehype-raw": "^7.0.0",
|
||||||
"remark-emoji": "^4.0.1",
|
"remark-emoji": "^4.0.1",
|
||||||
|
@ -68,6 +68,9 @@ dependencies:
|
|||||||
react-router-dom:
|
react-router-dom:
|
||||||
specifier: ^6.22.3
|
specifier: ^6.22.3
|
||||||
version: 6.22.3(react-dom@18.2.0)(react@18.2.0)
|
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:
|
rehype-mathjax:
|
||||||
specifier: ^6.0.0
|
specifier: ^6.0.0
|
||||||
version: 6.0.0
|
version: 6.0.0
|
||||||
@ -6177,6 +6180,14 @@ packages:
|
|||||||
tslib: 2.6.2
|
tslib: 2.6.2
|
||||||
dev: false
|
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:
|
/react@18.2.0:
|
||||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { lazy } from "react";
|
import { lazy, useEffect } from "react";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
Accordion,
|
Accordion,
|
||||||
@ -20,6 +20,8 @@ import {
|
|||||||
Wrap,
|
Wrap,
|
||||||
WrapItem,
|
WrapItem,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
|
import { QueryStatus } from "@reduxjs/toolkit/query";
|
||||||
|
import { useTimer } from "react-timer-hook";
|
||||||
|
|
||||||
import { useStatusQuery } from "../app/services/status";
|
import { useStatusQuery } from "../app/services/status";
|
||||||
import { useDetailQuery } from "../app/services/problem";
|
import { useDetailQuery } from "../app/services/problem";
|
||||||
@ -60,9 +62,33 @@ const statusStyle: React.CSSProperties = {
|
|||||||
export default function StatusPage() {
|
export default function StatusPage() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const sid = Number(id) || 0;
|
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 { 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 showSourceCode = status && status.body.submission.code !== "";
|
||||||
const showMessage = status && (status.body.context.message !== "" || status.body.context.compile_message !== "");
|
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}>
|
<Text as="b" mr={2}>
|
||||||
Waiting for Judge...
|
Waiting for Judge...
|
||||||
</Text>
|
</Text>
|
||||||
<Text>Please refresh the page after a few seconds.</Text>
|
|
||||||
</Alert>
|
</Alert>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user