From 53f8e9328d3099ec05745cb92b2c4bd883b6f2e5 Mon Sep 17 00:00:00 2001
From: Jonas Hermsmeier <jhermsmeier@gmail.com>
Date: Fri, 25 May 2018 20:07:16 +0200
Subject: [PATCH] feat(app): Make store change-observable

This adds true change observability to the store,
as the `.subscribe()` callback triggers with every dispatch,
even if the data didn't change.

Now `store.observe(onChange)` can be used to only be notified
once the state data actually changes

Change-Type: minor
---
 lib/gui/app/app.js                          | 25 +--------------------
 lib/gui/app/models/flash-state.js           |  2 --
 lib/gui/app/models/store.js                 | 17 ++++++++++++++
 lib/gui/app/modules/image-writer.js         |  1 -
 lib/gui/app/pages/main/controllers/flash.js |  5 +----
 5 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/lib/gui/app/app.js b/lib/gui/app/app.js
index b52b414c..1e3a8fbd 100644
--- a/lib/gui/app/app.js
+++ b/lib/gui/app/app.js
@@ -47,7 +47,6 @@ const driveScanner = require('./modules/drive-scanner')
 const osDialog = require('./os/dialog')
 const exceptionReporter = require('./modules/exception-reporter')
 const updateLock = require('./modules/update-lock')
-const debug = require('debug')('etcher:app')
 
 /* eslint-disable lodash/prefer-lodash-method */
 
@@ -191,28 +190,7 @@ app.run(() => {
 })
 
 app.run(() => {
-  debug('store.subscribe')
-
-  function observeStore(store, onChange) {
-    let currentState;
-
-    function handleChange() {
-      debug('store.subscribe:tick')
-      let nextState = store.getState();
-      if (nextState !== currentState) {
-        debug('store.subscribe:onchange')
-        currentState = nextState;
-        onChange(currentState);
-      }
-    }
-
-    let unsubscribe = store.subscribe(handleChange);
-    handleChange();
-    return unsubscribe;
-  }
-
-  observeStore(store, () => {
-    debug('store.subscribe:callback')
+  store.observe(() => {
     if (!flashState.isFlashing()) {
       return
     }
@@ -236,7 +214,6 @@ app.run(() => {
 
     windowProgress.set(currentFlashState)
   })
-
 })
 
 app.run(($timeout) => {
diff --git a/lib/gui/app/models/flash-state.js b/lib/gui/app/models/flash-state.js
index 59cad9f7..9c28ce1e 100644
--- a/lib/gui/app/models/flash-state.js
+++ b/lib/gui/app/models/flash-state.js
@@ -138,8 +138,6 @@ exports.setProgressState = (state) => {
     })
   })
 
-  console.log('store.dispatch', 'SET_FLASH_STATE')
-
   store.dispatch({
     type: store.Actions.SET_FLASH_STATE,
     data
diff --git a/lib/gui/app/models/store.js b/lib/gui/app/models/store.js
index 96fbd8d2..0492b455 100644
--- a/lib/gui/app/models/store.js
+++ b/lib/gui/app/models/store.js
@@ -508,3 +508,20 @@ module.exports = _.merge(redux.createStore(storeReducer, DEFAULT_STATE), {
   Actions: ACTIONS,
   Defaults: DEFAULT_STATE
 })
+
+module.exports.observe = (onChange) => {
+  let currentState
+
+  function changeHandler() {
+    const nextState = module.exports.getState()
+    if (!_.isEqual(nextState, currentState)) {
+      currentState = nextState
+      onChange(currentState)
+    }
+  }
+
+  const unsubscribe = module.exports.subscribe(changeHandler)
+  changeHandler()
+  return unsubscribe
+}
+
diff --git a/lib/gui/app/modules/image-writer.js b/lib/gui/app/modules/image-writer.js
index fcc82d31..22dd826a 100644
--- a/lib/gui/app/modules/image-writer.js
+++ b/lib/gui/app/modules/image-writer.js
@@ -313,7 +313,6 @@ exports.flash = (image, drives) => {
   analytics.logEvent('Flash', analyticsData)
 
   return exports.performWrite(image, drives, (state) => {
-    console.log('performWriate.onProgress', state)
     flashState.setProgressState(state)
   }).then(flashState.unsetFlashingFlag).then(() => {
     if (flashState.wasLastFlashCancelled()) {
diff --git a/lib/gui/app/pages/main/controllers/flash.js b/lib/gui/app/pages/main/controllers/flash.js
index 1feea4c5..86474ab6 100644
--- a/lib/gui/app/pages/main/controllers/flash.js
+++ b/lib/gui/app/pages/main/controllers/flash.js
@@ -140,10 +140,7 @@ module.exports = function (
 
     // Trigger Angular digests along with store updates, as the flash state
     // updates. Without this there is essentially no progress to watch.
-    const unsubscribe = store.subscribe(() => {
-      debug('store.onChange')
-      $timeout()
-    })
+    const unsubscribe = store.observe($timeout)
 
     const iconPath = '../../../assets/icon.png'