Making refresh buttons tired if they are exposed to too many clicks in a short time.

Author: krulis-martin

src/components/Solutions/SolutionDetail/SolutionDetail.js

@@ -17,9 +17,9 @@ import ResourceRenderer from '../../helpers/ResourceRenderer';
 import SolutionFiles from '../SolutionFiles';
 import EvaluationDetail from '../EvaluationDetail';
 import CompilationLogs from '../CompilationLogs';
-import { RefreshIcon, WarningIcon } from '../../icons';
+import { WarningIcon } from '../../icons';
 import FailureReport from '../../SubmissionFailures/FailureReport';
-import Button from '../../widgets/TheButton';
+import RefreshButton from '../../buttons/RefreshButton/RefreshButton';
 import Callout from '../../widgets/Callout';
 
 import { isStudentLocked } from '../../helpers/exams.js';
@@ -139,10 +139,7 @@ class SolutionDetail extends Component {
                         />
                       </td>
                       <td>
-                        <Button onClick={refreshSolutionEvaluations} variant="primary">
-                          <RefreshIcon gapRight={2} />
-                          <FormattedMessage id="generic.refresh" defaultMessage="Refresh" />
-                        </Button>
+                        <RefreshButton onClick={refreshSolutionEvaluations} variant="primary" />
                       </td>
                     </tr>
                   </tbody>

src/components/Users/NotVerifiedEmailCallout/NotVerifiedEmailCallout.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import ResendVerificationEmail from '../../../containers/ResendVerificationEmailContainer';
+import RefreshButton from '../../buttons/RefreshButton/RefreshButton';
 import Callout from '../../widgets/Callout';
-import Button, { TheButtonGroup } from '../../widgets/TheButton';
-import { RefreshIcon } from '../../icons';
+import { TheButtonGroup } from '../../widgets/TheButton';
 
 const NotVerifiedEmailCallout = ({ userId, refreshUser }) => (
   <Callout variant="warning">
@@ -26,10 +26,7 @@ const NotVerifiedEmailCallout = ({ userId, refreshUser }) => (
     </p>
     <TheButtonGroup className="mb-2">
       <ResendVerificationEmail userId={userId} />
-      <Button variant="outline-secondary" onClick={refreshUser}>
-        <RefreshIcon gapRight={2} />
-        <FormattedMessage id="generic.refresh" defaultMessage="Refresh" />
-      </Button>
+      <RefreshButton onClick={refreshUser} variant="outline-secondary" />
     </TheButtonGroup>
   </Callout>
 );

src/components/buttons/RefreshButton/RefreshButton.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import Button from '../../widgets/TheButton';
+import Icon, { RefreshIcon } from '../../icons';
+import { storageGetItem, storageSetItem, listenForChanges, removeListener } from '../../../helpers/localStorage';
+
+const COUNTER_KEY = 'refreshButtonCounter';
+const UPDATE_INTERVAL = 15; // s
+const CHANGE_PER_INTERVAL = 15;
+const COOL_DOWN_TIME = 60;
+const CLICK_LIMIT = 15;
+
+class RefreshButton extends Component {
+  // >=0 - counter counts number of clicks; <0 - in cool down mode (returning to 0)
+  state = { counter: 0 };
+
+  constructor(props) {
+    super(props);
+    this.intervalId = null;
+    this.storageListenerId = null;
+  }
+
+  componentDidMount() {
+    this.setState({ counter: Number(storageGetItem(COUNTER_KEY, 0)) });
+
+    this.storageListenerId = listenForChanges(COUNTER_KEY, newVal => {
+      this.setState({ counter: newVal || 0 });
+    });
+
+    // periodic counter update
+    this.intervalId = window.setInterval(() => {
+      const newCounter =
+        this.state.counter < 0
+          ? Math.min(this.state.counter + CHANGE_PER_INTERVAL, 0) // cool down
+          : Math.max(this.state.counter - CHANGE_PER_INTERVAL, 0); // counting clicks
+
+      if (newCounter !== this.state.counter) {
+        this.setState({ counter: newCounter });
+        if (newCounter === 0) {
+          // let's make sure all clients have their buttons enabled again
+          storageSetItem(COUNTER_KEY, newCounter);
+        }
+      }
+    }, UPDATE_INTERVAL * 1000);
+  }
+
+  componentWillUnmount() {
+    if (this.intervalId !== null) {
+      window.clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+    if (this.storageListenerId !== null) {
+      removeListener(this.storageListenerId);
+      this.storageListenerId = null;
+    }
+  }
+
+  clickHandler = () => {
+    if (this.state.counter < 0) {
+      return; // in cool down mode
+    }
+
+    const newCounter = this.state.counter >= CLICK_LIMIT ? -COOL_DOWN_TIME : this.state.counter + 1;
+    this.setState({ counter: newCounter });
+
+    const storageCounter = Number(storageGetItem(COUNTER_KEY, 0));
+    if (newCounter < 0 || storageCounter < newCounter) {
+      storageSetItem(COUNTER_KEY, newCounter);
+    }
+
+    this.props.onClick();
+  };
+
+  render() {
+    const { onClick, ...props } = this.props;
+    return this.state.counter < 0 ? (
+      <OverlayTrigger
+        placement="bottom"
+        overlay={
+          <Tooltip id="refreshButtonTooltip">
+            <FormattedMessage
+              id="app.refreshButton.coolingDownTooltip"
+              defaultMessage="The refresh button is too tired from all the refreshing. Please give it some time to recover."
+            />
+          </Tooltip>
+        }>
+        <span>
+          <Button {...props} disabled>
+            <Icon icon="bed" gapRight={2} />
+            <FormattedMessage id="generic.refresh" defaultMessage="Refresh" />
+          </Button>
+        </span>
+      </OverlayTrigger>
+    ) : (
+      <Button {...props} onClick={this.clickHandler}>
+        <RefreshIcon gapRight={2} />
+        <FormattedMessage id="generic.refresh" defaultMessage="Refresh" />
+      </Button>
+    );
+  }
+}
+
+RefreshButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default RefreshButton;

src/components/buttons/RefreshButton/index.js

@@ -0,0 +1,2 @@
+import RefreshButton from './RefreshButton.js';
+export default RefreshButton;

src/components/widgets/Comments/CommentThread/CommentThread.js

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import CommentBox from '../CommentBox';
 import AddComment from '../AddComment';
 import { UsersComment, SomebodyElsesComment } from '../Comment';
-import { RefreshIcon } from '../../../icons';
+import RefreshButton from '../../../buttons/RefreshButton/RefreshButton';
 
 const CommentThread = ({
   title = <FormattedMessage id="app.comments.title" defaultMessage="Comments and Notes" />,
@@ -52,15 +52,7 @@ const CommentThread = ({
       )}
 
       <p className="text-center small text-body-secondary">
-        <a
-          href="#"
-          onClick={ev => {
-            ev.preventDefault();
-            refresh();
-          }}>
-          <RefreshIcon gapRight={2} />
-          <FormattedMessage id="generic.refresh" defaultMessage="Refresh" />
-        </a>
+        <RefreshButton onClick={refresh} variant="outline-primary" size="xs" />
       </p>
     </div>
   </CommentBox>

src/helpers/localStorage.js

@@ -44,7 +44,7 @@ const localStorageAvailable = () => {
 /**
  * Wrapper for local storage writer.
  * @param {string} key
- * @param {*} value value must be serializabe into JSON; if null or undedined is passed, the item is removed
+ * @param {*} value value must be serializable into JSON; if null or undefined is passed, the item is removed
  */
 export const storageSetItem = (key, value) => {
   const prefixedKey = `${PERSISTENT_TOKENS_KEY_PREFIX}${key}`;
@@ -93,7 +93,7 @@ const listenKeyMatch = (eventKey, key) =>
 
 /**
  * Register callback which is triggered when the value is changed in local storage.
- * @param {string|null} key which changes are observerd, null to observe all changes
+ * @param {string|null} key which changes are observed, null to observe all changes
  * @param {Function} callback invoked with every change: (newVal [, oldVal [, key]]) => {}
  * @returns {string|null} identifier of the listener, null if no listener was registered
  */
@@ -112,6 +112,7 @@ export const listenForChanges = (key, callback) => {
   };
   window.addEventListener('storage', listener);
   listeners[id] = listener;
+  return id;
 };
 
 /**

src/locales/cs.json

@@ -977,6 +977,7 @@
   "app.failureList.noFailures": "V tomto seznamu nejsou žádné neúspěšné odevzdání.",
   "app.failureListItem.referenceAssignment": "Referenční úloha",
   "app.failureListItem.studentAssignment": "Studentská úloha",
+  "app.faq.loadError": "Obsah stránky FAQ se nepodařilo načíst. Pravděpodobně se tak stalo kvůli nesprávné konfiguraci aplikace.",
   "app.faq.title": "Často kladené dotazy (FAQ)",
   "app.fields.limits.memory": "Paměť [KiB]:",
   "app.fields.limits.time": "Čas [s]:",
@@ -1543,6 +1544,7 @@
   "app.referenceSolutionTable.evaluationFailed": "Poslední vyhodnocení selhalo",
   "app.referenceSolutionTable.noDescription": "popis nebyl uveden",
   "app.referenceSolutionTable.stillEvaluating": "Řešení se stále vyhodnocuje",
+  "app.refreshButton.coolingDownTooltip": "Občerstvovací tlačítko je příliš unavené z veškerého toho občerstvování. Prosíme dejte mu nějaký čas na zotavení.",
   "app.registration.external.gotoSignin": "Stránka přihlášení",
   "app.registration.external.link": "Navštívit stránky podpory",
   "app.registration.external.mail": "Kontaktovat podporu",

src/locales/en.json

@@ -977,6 +977,7 @@
   "app.failureList.noFailures": "There are no failures in this list.",
   "app.failureListItem.referenceAssignment": "Reference assignment",
   "app.failureListItem.studentAssignment": "Student assignment",
+  "app.faq.loadError": "FAQ content could not be loaded. Possibly due to the misconfiguration of the application.",
   "app.faq.title": "Frequently Asked Questions",
   "app.fields.limits.memory": "Memory [KiB]:",
   "app.fields.limits.time": "Time [s]:",
@@ -1543,6 +1544,7 @@
   "app.referenceSolutionTable.evaluationFailed": "Last evaluation failed",
   "app.referenceSolutionTable.noDescription": "no description given",
   "app.referenceSolutionTable.stillEvaluating": "Last submission is still evaluating",
+  "app.refreshButton.coolingDownTooltip": "The refresh button is too tired from all the refreshing. Please give it some time to recover.",
   "app.registration.external.gotoSignin": "Sign-in Page",
   "app.registration.external.link": "Visit Help Page",
   "app.registration.external.mail": "Contact Support",