diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts index ab563c25..0761e046 100644 --- a/src/hooks/useInterval.ts +++ b/src/hooks/useInterval.ts @@ -9,7 +9,7 @@ type Callback = () => void; * @param {Callback} callback - callback function * @param {(number | null)} delay - delay in milliseconds */ -function useInterval(callback: Callback, delay: number | null): void { +function useInterval(callback: Callback, delay: number | null, pause: boolean = false): void { const savedCallback = useRef(null); // Remember the latest callback if it changes. @@ -25,11 +25,11 @@ function useInterval(callback: Callback, delay: number | null): void { } } - if (delay !== null) { + if (!pause && (delay !== null)) { const id = setInterval(tick, delay); return () => clearInterval(id); // cleanup } - }, [delay]); + }, [delay, pause]); } export default useInterval; diff --git a/src/locales/de/main.json b/src/locales/de/main.json index 871349c1..687d7608 100644 --- a/src/locales/de/main.json +++ b/src/locales/de/main.json @@ -22,6 +22,5 @@ "buttonReinvite": "Neu einladen", "buttonLogin": "Anmelden", "errorTooManyRequests": "Zu viele Anfragen. Bitte später versuchen.", - "footerImprint": "Impressum", - "linterResultNotFound": "Linter-Ergebnis nicht gefunden." + "footerImprint": "Impressum" } diff --git a/src/locales/en/main.json b/src/locales/en/main.json index 2ec3180f..859bb12c 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -22,6 +22,5 @@ "buttonReinvite": "Reinvite", "buttonLogin": "Login", "errorTooManyRequests": "Too many requests. Try again later.", - "footerImprint": "imprint", - "linterResultNotFound": "Linter result not found." + "footerImprint": "imprint" } diff --git a/src/pages/ProjectState/ProjectState.tsx b/src/pages/ProjectState/ProjectState.tsx index 1e7c8bf1..b7e00d43 100644 --- a/src/pages/ProjectState/ProjectState.tsx +++ b/src/pages/ProjectState/ProjectState.tsx @@ -7,6 +7,7 @@ import submission from '../../services/submission'; import { StatusCodes } from 'http-status-codes'; import toast from '../../services/toast'; import { ToastType } from '../../interfaces/ToastType'; +import useInterval from '../../hooks/useInterval'; /** * Project State Page @@ -44,84 +45,95 @@ export default function ProjectState() { const [projectReviewed, setProjectReviewed] = useState( null ); - + /** + * Paused state for useInterval hook + * @author David Linhardt + * + * @type {boolean} + */ + const [paused, setPaused] = useState(false); /** * Linter result state * @author David Linhardt * - * @type {boolean | null} + * @type {string | null} */ const [linterResult, setLinterResult] = useState(null); - useEffect(() => { - /** - * Get the submission state from the backend and navigate to the correct page based on the state. - * @author Samuel Hertrich - * - * @async - * @returns {void} - */ - const getSubmissionState = async () => { - const res = await serviceHelper.getSubmissionStatus(); + // Functions + /** + * Get the submission state from the backend and navigate to the correct page based on the state. + * @author Samuel Hertrich + * + * @async + * @returns {void} + */ + const getSubmissionState = async () => { + const res = await serviceHelper.getSubmissionStatus(); - if (res !== null) { - if (res.submissionStates === 'INIT') { - navigate('/project/start'); - } + if (res !== null) { + if (res.submissionStates === 'INIT') { + navigate('/project/start'); + } - if (res.submissionStates === 'IN_IMPLEMENTATION') { - navigate('/project/commit'); - } + if (res.submissionStates === 'IN_IMPLEMENTATION') { + navigate('/project/commit'); + } - if (res.submissionStates === 'SUBMITTED') { - setProjectReviewed(false); - } + if (res.submissionStates === 'SUBMITTED') { + setProjectReviewed(false); + } - if (res.submissionStates === 'REVIEWED') { - setProjectReviewed(true); - } + if (res.submissionStates === 'REVIEWED') { + setProjectReviewed(true); + setPaused(true); + } + } + }; + /** + * Get the linter result from the backend and set the linter result state accordingly. + * @author David Linhardt + * + * @async + * @returns {void} + */ + const setLinterResultState = async () => { + if( projectReviewed === null || !projectReviewed) return; + try { + const res = await submission.getLinterResult(); + + switch (res.status) { + case StatusCodes.OK: + setLinterResult((await res.json()).result); + break; + default: + setLinterResult(null); + break; } - }; + } catch (err) { + setLinterResult(null); + toast.showToast(ToastType.ERROR, t('connectionError', { ns: 'main'})); + } + }; + + useEffect(() => { getSubmissionState(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - useEffect(() => { if(projectReviewed === null || !projectReviewed) { setLinterResult(null); } - - /** - * Get the linter result from the backend and set the linter result state accordingly. - * @author David Linhardt - * - * @async - * @returns {void} - */ - const setLinterResultState = async () => { - if( projectReviewed === null || !projectReviewed) return; - try { - const res = await submission.getLinterResult(); - - switch (res.status) { - case StatusCodes.OK: - setLinterResult((await res.json()).result); - break; - default: - setLinterResult(null); - toast.showToast(ToastType.ERROR, t('linterResultNotFound', { ns: 'main'})); - break; - } - } catch (err) { - setLinterResult(null); - toast.showToast(ToastType.ERROR, t('connectionError', { ns: 'main'})); - } - }; setLinterResultState(); - + // eslint-disable-next-line react-hooks/exhaustive-deps }, [projectReviewed, t]); + // polling submission state every 30 seconds + useInterval(() => { + getSubmissionState(); + }, 30000, paused); + return (
{!projectReviewed && (