Merge branch 'master' into production

src/components/Modtools.jsx

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { t } from 'ttag';
 
+import useInterval from './hooks/useInterval';
 import { getToday, dateToString } from '../core/utils';
 
 const keptState = {
@@ -277,6 +278,12 @@ function Modtools() {
     }
   }, []);
 
+  useInterval(() => {
+    if (userlvl > 0) {
+      getCleanerStats((stats) => setCleanerStats(stats));
+    }
+  }, 10000);
+
   const cleanerStatusString = (!cleanerstats.running)
     ? t`Status: Not running`
   // eslint-disable-next-line max-len
@@ -625,6 +632,14 @@ function Modtools() {
             tlccoords,
             brccoords,
             (ret) => {
+              setCleanerStats({
+                running: true,
+                percent: 'N/A',
+                method: cleanAction,
+                tl: tlccoords,
+                br: brccoords,
+                canvasId: selectedCanvas,
+              });
               setSubmitting(false);
               setResp(ret);
             },

src/components/hooks/useInterval.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+function useInterval(callback, delay) {
+  const savedCallback = useRef();
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}
+
+export default useInterval;