import builder from 'focus-core/component/builder';
let React = require('react');
import type from 'focus-core/component/types';
import {builtInStore as requestStore} from 'focus-core/network';
let assign = require('object-assign');
let ProgressBar = require('../../common/progress-bar').component;
let Icon = require('../../common/icon').component;
let LoadingBarMixin = {
    /** @inheriteddoc */
    getInitialState() {
        return this._getStateFromStore();
    },
    /** @inheriteddoc */
    componentWillMount() {
        requestStore.addUpdateRequestListener(this._handleRequestsUpdate);
        requestStore.addClearRequestsListener(this._handleClearRequests);
    },
    /** @inheriteddoc */
    componentWillUnmount: function cartridgeWillUnMount() {
        requestStore.removeUpdateRequestListener(this._handleRequestsUpdate);
        requestStore.removeClearRequestsListener(this._handleClearRequests);
    },
    _getStateFromStore: function getCartridgeStateFromStore() {
        return requestStore.getRequests();
    },
    _handleRequestsUpdate: function _handlePushMessage(messageId) {
        this.setState(this._getStateFromStore());
    },
    _handleClearRequests() {
        this.setState({requests: {}});
    },
    /** @inheriteddoc */
    render: function renderProgressBar() {
        var completed = +((this.state.total - this.state.pending)/this.state.total)*100;
        var visible = false;
        const {displayDevBar} = this.props;
        if(completed < 100) {
            visible = true;
        }
        //Else empty the loading list?
        return (
            <div data-focus='loading-bar'>
                {visible && <ProgressBar completed={completed} />}
                {displayDevBar &&
                    <ul className='fa-ul'>
                        <li><Icon name='swap_vert'/> pending {this.state.pending}</li>
                        <li><Icon name='not_interested'/> cancelled {this.state.cancelled}</li>
                        <li><Icon name='check_circle'/> success {this.state.success}</li>
                        <li><Icon name='error'/> error {this.state.error}</li>
                        <li><Icon name='functions'/> total {this.state.total}</li>
                    </ul>
                }
            </div>
        );
    }
};

module.exports = builder(LoadingBarMixin);

@@ -49,82 +49,32 @@
 r';%0A
-let React = require('react');%0A
 import 
-type
+React
  from '
-focus-core/component/types
+react
 ';%0Ai
@@ -80,16 +80,17 @@
 import %7B
+ 
 builtInS
@@ -109,16 +109,17 @@
 estStore
+ 
 %7D from '
@@ -143,50 +143,29 @@
 k';%0A
-let assign = require('object-assign');%0Alet
+import %7B component as
  Pro
@@ -173,26 +173,23 @@
 ressBar 
-= require(
+%7D from 
 '../../c
@@ -207,18 +207,27 @@
 ess-bar'
-).
+;%0Aimport %7B 
 componen
@@ -231,29 +231,24 @@
 nent
-;%0Alet
+ as
  Icon 
-= require(
+%7D from 
 '../
@@ -266,20 +266,10 @@
 con'
-).component
 ;
+%0A
 %0Alet
@@ -648,39 +648,8 @@
 ount
-: function cartridgeWillUnMount
 () %7B
@@ -837,45 +837,8 @@
 tore
-: function getCartridgeStateFromStore
 () %7B
@@ -917,37 +917,8 @@
 date
-: function _handlePushMessage
 (mes
@@ -1036,16 +1036,17 @@
 tState(%7B
+ 
 requests
@@ -1049,16 +1049,17 @@
 ests: %7B%7D
+ 
 %7D);%0A    
@@ -1100,36 +1100,8 @@
 nder
-: function renderProgressBar
 () %7B
@@ -1109,19 +1109,19 @@
         
-var
+let
  complet
@@ -1166,17 +1166,19 @@
 pending)
-/
+ / 
 this.sta
@@ -1186,17 +1186,19 @@
 e.total)
-*
+ * 
 100;%0A   
@@ -1206,11 +1206,11 @@
     
-var
+let
  vis
@@ -1238,16 +1238,17 @@
  const %7B
+ 
 displayD
@@ -1252,16 +1252,17 @@
 ayDevBar
+ 
 %7D = this
@@ -1279,16 +1279,17 @@
       if
+ 
 (complet
@@ -1631,16 +1631,17 @@
 ap_vert'
+ 
 /%3E pendi
@@ -1724,16 +1724,17 @@
 erested'
+ 
 /%3E cance
@@ -1819,16 +1819,17 @@
 _circle'
+ 
 /%3E succe
@@ -1903,16 +1903,17 @@
 ='error'
+ 
 /%3E error
@@ -1987,16 +1987,17 @@
 nctions'
+ 
 /%3E total
@@ -2109,22 +2109,34 @@
 %7D;%0A%0A
-module.exports
+const %7B mixin, component %7D
  = b
@@ -2160,8 +2160,74 @@
 Mixin);%0A
+export %7B mixin, component %7D;%0Aexport default %7B mixin, component %7D;%0A

clean application/loading-bar