Merge pull request #364 from amplimindcc/363-add-polling-to-project-s…

…tate

363 add polling to project state

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<Callback | null>(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;

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

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

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<boolean | null>(
         null
     );
-
+    /**
+     * Paused state for useInterval hook
+     * @author David Linhardt
+     *
+     * @type {boolean}
+     */
+    const [paused, setPaused] = useState<boolean>(false);
     /**
      * Linter result state
      * @author David Linhardt
      *
-     * @type {boolean | null}
+     * @type {string | null}
      */
     const [linterResult, setLinterResult] = useState<string | null>(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 (
         <div className="project-state-container center" data-testid="project-state">
             {!projectReviewed && (