Use React Hooks for Timer (#2546)

* Update Timer.js to use React Hooks * Add entry * Update CHANGELOG
microsoft · Nov 21, 2019 · a2bb227 · a2bb227
1 parent c78f82f
commit a2bb227
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,8 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  PR [#2551](https://github.com/microsoft/BotFramework-WebChat/pull/2551): `useLastTypingAt`, `useSendTypingIndicator`, `useTypingIndicator`
    -  PR [#2552](https://github.com/microsoft/BotFramework-WebChat/pull/2552): `useFocusSendBox`, `useScrollToEnd`, `useSendBoxValue`, `useSubmitSendBox`, `useTextBoxSubmit`, `useTextBoxValue`
 -  Fixes [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598)
-
-### Fixed
+-  `component`: Fixes [#2331](https://github.com/microsoft/BotFramework-WebChat/issues/2331). Updated timer to use React Hooks, by [@spyip](https://github.com/spyip) in PR [#2546](https://github.com/microsoft/BotFramework-WebChat/pull/2546)
 
 ### Changed
 

diff --git a/packages/component/src/Utils/Timer.js b/packages/component/src/Utils/Timer.js
@@ -1,43 +1,21 @@
 /* eslint react/no-unsafe: off */
 
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class Timer extends React.Component {
-  componentDidMount() {
-    const { at } = this.props;
-
-    this.schedule(at);
-  }
-
-  UNSAFE_componentWillReceiveProps({ at: nextAt }) {
-    const { at } = this.props;
-
-    if (at !== nextAt) {
-      this.schedule(nextAt);
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  schedule(at) {
-    clearTimeout(this.timeout);
 
+const Timer = ({ at, onInterval }) => {
+  useEffect(() => {
     if (!isNaN(at)) {
-      this.timeout = setTimeout(() => {
-        const { onInterval } = this.props;
-
+      const timeout = setTimeout(() => {
         onInterval && onInterval();
       }, Math.max(0, at - Date.now()));
+
+      return () => clearTimeout(timeout);
     }
-  }
+  }, [at, onInterval]);
 
-  render() {
-    return false;
-  }
-}
+  return false;
+};
 
 Timer.defaultProps = {
   onInterval: undefined
@@ -47,3 +25,5 @@ Timer.propTypes = {
   at: PropTypes.number.isRequired,
   onInterval: PropTypes.func
 };
+
+export default Timer;