Merge pull request #2165 from lindapaiste/refactor/timer

Convert Timer to a function component.

Author: raclim

client/modules/IDE/components/Editor.jsx

@@ -51,7 +51,6 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 import RightArrowIcon from '../../../images/right-arrow.svg';
 import LeftArrowIcon from '../../../images/left-arrow.svg';
 import { getHTMLFile } from '../reducers/files';
-import { getIsUserOwner } from '../selectors/users';
 
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
@@ -420,10 +419,7 @@ class Editor extends React.Component {
                 ) : null}
               </span>
             </span>
-            <Timer
-              projectSavedTime={this.props.projectSavedTime}
-              isUserOwner={this.props.isUserOwner}
-            />
+            <Timer />
           </div>
         </header>
         <article
@@ -474,7 +470,6 @@ Editor.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
-  projectSavedTime: PropTypes.string.isRequired,
   files: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -485,7 +480,6 @@ Editor.propTypes = {
   isExpanded: PropTypes.bool.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
-  isUserOwner: PropTypes.bool.isRequired,
   clearConsole: PropTypes.func.isRequired,
   // showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -516,9 +510,7 @@ function mapStateToProps(state) {
     ...state.ide,
     ...state.project,
     ...state.editorAccessibility,
-    isExpanded: state.ide.sidebarIsExpanded,
-    projectSavedTime: state.project.updatedAt,
-    isUserOwner: getIsUserOwner(state)
+    isExpanded: state.ide.sidebarIsExpanded
   };
 }
 

client/modules/IDE/components/Timer.jsx

@@ -1,52 +1,46 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import dates from '../../../utils/formatDate';
+import useInterval from '../hooks/useInterval';
+import { getIsUserOwner } from '../selectors/users';
 
-class Timer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.showSavedTime = this.showSavedTime.bind(this);
-  }
-
-  componentDidMount() {
-    this.interval = setInterval(() => this.forceUpdate(), 10000);
-  }
-
-  componentWillUnmount() {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  }
-
-  showSavedTime() {
-    const timeAgo = dates.distanceInWordsToNow(this.props.projectSavedTime);
-    return this.props.t('Timer.SavedAgo', { timeAgo });
-  }
-
-  render() {
-    const timerClass = classNames({
-      'timer__saved-time': true,
-      'timer__saved-time--notOwner': !this.props.isUserOwner
-    });
-    return (
-      <span className={timerClass}>
-        {this.props.projectSavedTime !== '' ? this.showSavedTime() : null}
-      </span>
-    );
-  }
-}
+const Timer = () => {
+  const projectSavedTime = useSelector((state) => state.project.updatedAt);
+  const isUserOwner = useSelector(getIsUserOwner);
 
-Timer.propTypes = {
-  projectSavedTime: PropTypes.string.isRequired,
-  isUserOwner: PropTypes.bool,
-  t: PropTypes.func.isRequired
-};
+  const { t } = useTranslation();
 
-Timer.defaultProps = {
-  isUserOwner: false
+  const [timeAgo, setTimeAgo] = useState('');
+
+  // Update immediately upon saving.
+  useEffect(() => {
+    setTimeAgo(
+      projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
+    );
+  }, [projectSavedTime]);
+
+  // Update every 10 seconds.
+  useInterval(
+    () =>
+      setTimeAgo(
+        projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
+      ),
+    10000
+  );
+
+  const timerClass = classNames({
+    'timer__saved-time': true,
+    'timer__saved-time--notOwner': !isUserOwner
+  });
+
+  return (
+    <span className={timerClass}>
+      {timeAgo ? t('Timer.SavedAgo', { timeAgo }) : null}
+    </span>
+  );
 };
 
-export default withTranslation()(Timer);
+export default Timer;