Release v2.3.1

Do not call resetProgress after the Loading Bar is unmounted Closes #9
mironov · Aug 30, 2016 · 8017779 · 8017779
1 parent dd99304
commit 8017779
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Release History
 
+## 2.3.1
+   - Do not call resetProgress after the Loading Bar is unmounted
+
 ## 2.3.0
    - Simplify the middleware
 

diff --git a/build/loading_bar.js b/build/loading_bar.js
@@ -28,6 +28,12 @@ var MAX_PROGRESS = exports.MAX_PROGRESS = 90;
 var PROGRESS_INCREASE = exports.PROGRESS_INCREASE = 5;
 var ANIMATION_TIME = exports.ANIMATION_TIME = UPDATE_TIME * 2;
 
+var initialState = {
+  percent: 0,
+  progressInterval: null,
+  animationTimeout: null
+};
+
 var LoadingBar = exports.LoadingBar = function (_React$Component) {
   _inherits(LoadingBar, _React$Component);
 
@@ -36,10 +42,7 @@ var LoadingBar = exports.LoadingBar = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LoadingBar).call(this, props));
 
-    _this.state = {
-      percent: 0,
-      interval: null
-    };
+    _this.state = initialState;
 
     _this.boundSimulateProgress = _this.simulateProgress.bind(_this);
     _this.boundResetProgress = _this.resetProgress.bind(_this);
@@ -56,49 +59,49 @@ var LoadingBar = exports.LoadingBar = function (_React$Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      if (this.state.interval) {
-        clearInterval(this.state.interval);
+      if (this.state.progressInterval) {
+        clearInterval(this.state.progressInterval);
+      }
+      if (this.state.animationTimeout) {
+        clearTimeout(this.state.animationTimeout);
       }
     }
   }, {
     key: 'launch',
     value: function launch() {
-      var interval = this.state.interval;
-      var percent = this.state.percent;
+      var progressInterval = this.state.progressInterval;
 
-      if (!interval) {
-        interval = setInterval(this.boundSimulateProgress, this.props.updateTime);
+      if (!progressInterval) {
+        progressInterval = setInterval(this.boundSimulateProgress, this.props.updateTime);
       }
 
-      this.setState({ percent: percent, interval: interval });
+      this.setState(_extends({}, this.state, { progressInterval: progressInterval }));
     }
   }, {
     key: 'simulateProgress',
     value: function simulateProgress() {
       var _state = this.state;
-      var interval = _state.interval;
+      var progressInterval = _state.progressInterval;
       var percent = _state.percent;
+      var animationTimeout = _state.animationTimeout;
 
 
       if (percent === 100) {
-        clearInterval(interval);
-        setTimeout(this.boundResetProgress, ANIMATION_TIME);
-        interval = null;
+        clearInterval(progressInterval);
+        animationTimeout = setTimeout(this.boundResetProgress, ANIMATION_TIME);
+        progressInterval = null;
       } else if (this.props.loading === 0) {
         percent = 100;
       } else if (percent < this.props.maxProgress) {
         percent = percent + this.props.progressIncrease;
       }
 
-      this.setState({ percent: percent, interval: interval });
+      this.setState({ percent: percent, progressInterval: progressInterval, animationTimeout: animationTimeout });
     }
   }, {
     key: 'resetProgress',
     value: function resetProgress() {
-      this.setState({
-        percent: 0,
-        interval: null
-      });
+      this.setState(initialState);
     }
   }, {
     key: 'shouldShow',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-loading-bar",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Simple Loading Bar for Redux and React",
   "main": "build/index.js",
   "scripts": {

diff --git a/spec/loading_bar.js b/spec/loading_bar.js
@@ -97,11 +97,23 @@ describe('LoadingBar', () => {
     it('does not throw errors in the console', () => {
       const wrapper = shallow(<LoadingBar />)
       wrapper.setProps({ loading: 1 })
-      expect(wrapper.state().interval).toNotEqual(null)
+      expect(wrapper.state().progressInterval).toNotEqual(null)
       wrapper.unmount()
       clock.tick(UPDATE_TIME)
       expect(consoleSpy).toNotHaveBeenCalled()
     })
+
+    it('does not throw errors in the console after loading', () => {
+      const wrapper = shallow(<LoadingBar />)
+      wrapper.setProps({ loading: 1 })
+      clock.tick(UPDATE_TIME)
+      wrapper.setProps({ loading: 0 })
+      clock.tick(UPDATE_TIME * 2)
+      expect(wrapper.state().animationTimeout).toNotEqual(null)
+      wrapper.unmount()
+      clock.tick(ANIMATION_TIME)
+      expect(consoleSpy).toNotHaveBeenCalled()
+    })
   })
 
   describe('#launch', () => {
@@ -159,21 +171,21 @@ describe('LoadingBar', () => {
       const wrapper = shallow(<LoadingBar />)
       wrapper.setProps({ loading: 1 })
       clock.tick(UPDATE_TIME)
-      expect(wrapper.state().interval).toExist()
+      expect(wrapper.state().progressInterval).toExist()
       wrapper.setProps({ loading: 0 })
       clock.tick(UPDATE_TIME)
-      expect(wrapper.state().interval).toExist()
+      expect(wrapper.state().progressInterval).toExist()
       expect(wrapper.state().percent).toBe(100)
     })
 
     it('clears interval if loading becomes 0 after one more tick', () => {
       const wrapper = shallow(<LoadingBar />)
       wrapper.setProps({ loading: 1 })
       clock.tick(UPDATE_TIME)
-      expect(wrapper.state().interval).toExist()
+      expect(wrapper.state().progressInterval).toExist()
       wrapper.setProps({ loading: 0 })
       clock.tick(UPDATE_TIME * 2)
-      expect(wrapper.state().interval).toNotExist()
+      expect(wrapper.state().progressInterval).toNotExist()
     })
 
     it('resets progress if loading becomes 0 and after animations', () => {
@@ -186,6 +198,7 @@ describe('LoadingBar', () => {
       expect(wrapper.state().percent).toBe(100)
       clock.tick(UPDATE_TIME + ANIMATION_TIME)
       expect(wrapper.state().percent).toBe(0)
+      expect(wrapper.state().animationTimeout).toNotExist()
     })
 
     describe('if percent is less than MAX_PROGRESS', () => {

diff --git a/src/loading_bar.js b/src/loading_bar.js
@@ -6,15 +6,17 @@ export const MAX_PROGRESS = 90
 export const PROGRESS_INCREASE = 5
 export const ANIMATION_TIME = UPDATE_TIME * 2
 
+const initialState = {
+  percent: 0,
+  progressInterval: null,
+  animationTimeout: null,
+}
 
 export class LoadingBar extends React.Component {
   constructor(props) {
     super(props)
 
-    this.state = {
-      percent: 0,
-      interval: null,
-    }
+    this.state = initialState
 
     this.boundSimulateProgress = this.simulateProgress.bind(this)
     this.boundResetProgress = this.resetProgress.bind(this)
@@ -27,43 +29,45 @@ export class LoadingBar extends React.Component {
   }
 
   componentWillUnmount() {
-    if (this.state.interval) {
-      clearInterval(this.state.interval)
+    if (this.state.progressInterval) {
+      clearInterval(this.state.progressInterval)
+    }
+    if (this.state.animationTimeout) {
+      clearTimeout(this.state.animationTimeout)
     }
   }
 
   launch() {
-    let interval = this.state.interval
-    const percent = this.state.percent
+    let progressInterval = this.state.progressInterval
 
-    if (!interval) {
-      interval = setInterval(this.boundSimulateProgress, this.props.updateTime)
+    if (!progressInterval) {
+      progressInterval = setInterval(
+        this.boundSimulateProgress,
+        this.props.updateTime
+      )
     }
 
-    this.setState({ percent, interval })
+    this.setState({ ...this.state, progressInterval })
   }
 
   simulateProgress() {
-    let { interval, percent } = this.state
+    let { progressInterval, percent, animationTimeout } = this.state
 
     if (percent === 100) {
-      clearInterval(interval)
-      setTimeout(this.boundResetProgress, ANIMATION_TIME)
-      interval = null
+      clearInterval(progressInterval)
+      animationTimeout = setTimeout(this.boundResetProgress, ANIMATION_TIME)
+      progressInterval = null
     } else if (this.props.loading === 0) {
       percent = 100
     } else if (percent < this.props.maxProgress) {
       percent = percent + this.props.progressIncrease
     }
 
-    this.setState({ percent, interval })
+    this.setState({ percent, progressInterval, animationTimeout })
   }
 
   resetProgress() {
-    this.setState({
-      percent: 0,
-      interval: null,
-    })
+    this.setState(initialState)
   }
 
   shouldShow(percent) {