feat: auto refresh on StatusPage

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",

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'}

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() {
             <Text as="b" mr={2}>
                 Waiting for Judge...
             </Text>
-            <Text>Please refresh the page after a few seconds.</Text>
         </Alert>
     );