- Added total summary.

- Fixed hot-reload.
douglasjunior · Sep 5, 2018 · 75e0bdf · 75e0bdf
1 parent 48bda98
commit 75e0bdf
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 24 deletions.
diff --git a/.babelrc b/.babelrc
@@ -6,12 +6,5 @@
     ],
     "plugins": [
         "transform-class-properties"
-    ],
-    "env": {
-        "development": {
-            "plugins": [
-                "react-hot-loader/babel"
-            ]
-        }
-    }
+    ]
 }
diff --git a/.compilerc b/.compilerc
@@ -10,9 +10,6 @@
     ],
     "env": {
       "development": {
-        "plugins": [
-          "react-hot-loader/babel"
-        ],
         "sourceMaps": "both"
       },
       "production": {

diff --git a/app/App.js b/app/App.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 
 import { HashRouter } from 'react-router-dom';
-import { hot } from 'react-hot-loader';
 
 import { LocaleProvider } from './components/antd';
 import MainLayout from './layouts/MainLayout';
@@ -22,4 +21,4 @@ class App extends Component {
 
 }
 
-export default hot(module)(App);
+export default App;
diff --git a/app/components/TableProcesses.js b/app/components/TableProcesses.js
@@ -114,7 +114,7 @@ class ColumnSave extends PureComponent {
     render() {
         const { save } = this.state;
         return (
-            <span>{save.toFixed(1)} %</span>
+            <span>{save.toFixed(1)}%</span>
         );
     }
 

diff --git a/app/index.js b/app/index.js
@@ -15,11 +15,24 @@ document.addEventListener('dragover', e => {
 
 const React = require('react');
 const ReactDOM = require('react-dom');
+const { AppContainer } = require('react-hot-loader');
 
 require('./styles');
-const App = require('./App').default;
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root'),
-);
+const render = Comp => {
+    const NextApp = require('./App').default;
+    ReactDOM.render(
+        <AppContainer>
+            <NextApp />
+        </AppContainer>,
+        document.getElementById('root'),
+    );
+};
+
+render();
+
+if (module.hot) {
+    module.hot.accept('./App', () => {
+        render();
+    });
+}
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
     "name": "emage",
     "productName": "E-Mage",
-    "version": "0.0.2",
+    "version": "1.0.0",
     "description": "From developers to developers: a cross-platform tool to help with image compression.",
     "main": "./main.prod.js",
     "author": {

diff --git a/app/pages/HomePage.js b/app/pages/HomePage.js
@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
+import styles from './HomePage.scss';
 import {
     Upload, Icon, Card,
     Row, Col,
@@ -9,6 +10,7 @@ import TableProcesses from '../components/TableProcesses';
 import Process from '../utils/Process';
 import { arrayPush } from '../utils/arrays';
 import { isOS } from '../utils/platform';
+import { formatBytes } from '../utils/formatter';
 
 const { Dragger } = Upload;
 
@@ -57,7 +59,7 @@ const getOptions = (fileType, state) => {
     return undefined;
 };
 
-export default class HomePage extends Component {
+export default class HomePage extends PureComponent {
 
     constructor(props) {
         super(props);
@@ -68,9 +70,21 @@ export default class HomePage extends Component {
             svgOptions: SVG_OPTIONS.map(o => o.value),
             gifOptions: GIF_OPTIONS.map(o => o.value),
             processes: [],
+            total: {
+                originalSize: 0,
+                size: 0,
+                savedSum: 0,
+                savedAvg: 0,
+                savedMax: 0,
+            },
         };
     }
 
+    componentWillUnmount() {
+        const { processes } = this.state;
+        processes.forEach(p => p.removeListener('end', this._updateTotal));
+    }
+
     _onUploadChange = file => {
         if (Array.isArray(file)) {
             file.forEach(this._compress);
@@ -92,9 +106,11 @@ export default class HomePage extends Component {
             if (!Array.isArray(selectedOptions)) {
                 return null;
             }
+            const process = new Process(file, selectedOptions);
+            process.on('end', this._updateTotal);
             return {
                 processes: [
-                    new Process(file, selectedOptions),
+                    process,
                     ...processes,
                 ],
             };
@@ -117,6 +133,32 @@ export default class HomePage extends Component {
         this.setState({ svgOptions: checkedValues });
     }
 
+    _updateTotal = () => {
+        const { processes } = this.state;
+        const total = processes.reduce(
+            (result, process) => {
+                if (!process.isFinished()) {
+                    return result;
+                }
+                const newResult = {
+                    originalSize: result.originalSize + process.getOriginalSize(),
+                    size: result.size + process.getSize(),
+                    savedSum: result.savedSum + process.getSave(),
+                    savedMax: Math.max(result.savedMax, process.getSave()),
+                };
+                newResult.savedAvg = newResult.savedSum / processes.length;
+                return newResult;
+            }, {
+                originalSize: 0,
+                size: 0,
+                savedSum: 0,
+                savedAvg: 0,
+                savedMax: 0,
+            },
+        );
+        this.setState({ total });
+    }
+
     _renderOptions = () => {
         const {
             jpgOptions, pngOptions,
@@ -164,6 +206,26 @@ export default class HomePage extends Component {
         );
     }
 
+    _renderTotal = () => {
+        const { total } = this.state;
+        const {
+            originalSize, size,
+            savedAvg, savedMax,
+        } = total;
+        if (!originalSize) return null;
+        return (
+            <div className={styles.totalContainer}>
+                <span>
+                    Saved {formatBytes(originalSize - size)} out of {formatBytes(originalSize)}.
+                </span>
+                {' '}
+                <span>
+                    {savedAvg.toFixed(1)}% per file on avarage (up to {savedMax.toFixed(1)}%).
+                </span>
+            </div>
+        );
+    }
+
     render() {
         const { processes } = this.state;
         return (
@@ -185,7 +247,9 @@ export default class HomePage extends Component {
                         <p className="ant-upload-drag-icon">
                             <Icon type="picture" />
                         </p>
-                        <p className="ant-upload-text">Click or drag images to this area to optimize</p>
+                        <p className="ant-upload-text">
+                            Click or drag images to this area to optimize
+                        </p>
                         <p className="ant-upload-hint">
                             Support for a single or bulk upload.
                         </p>
@@ -194,6 +258,7 @@ export default class HomePage extends Component {
                 <Card>
                     <h2>3. See the magic!</h2>
                     <TableProcesses dataSource={processes} />
+                    {this._renderTotal()}
                 </Card>
             </div>
         );

diff --git a/app/pages/HomePage.scss b/app/pages/HomePage.scss
@@ -0,0 +1,3 @@
+.totalContainer {
+    margin-top: 8px;
+}
diff --git a/app/styles/default.less b/app/styles/default.less
@@ -12,3 +12,5 @@
 @import "~antd/lib/table/style/index.less";
 @import "~antd/lib/tooltip/style/index.less";
 @import "~antd/lib/upload/style/index.less";
+
+@primary-color: #ffc107;
diff --git a/app/utils/formatter.js b/app/utils/formatter.js
@@ -0,0 +1,19 @@
+
+export const formatBytes = bytes => {
+    let converted = parseFloat(bytes);
+    if (converted < 1024) {
+        return `${converted.toFixed(2)} bytes`;
+    }
+    converted /= 1024.0;
+    if (converted < 1024) {
+        return `${converted.toFixed(2)} KB`;
+    }
+    converted /= 1024.0;
+    if (converted < 1024) {
+        return `${converted.toFixed(2)} MB`;
+    }
+    converted /= 1024.0;
+    return `${converted.toFixed(2)} GB`;
+};
+
+export default {};
diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js
@@ -47,6 +47,7 @@ export default merge.smart(baseConfig, {
 
     entry: [
         'babel-polyfill',
+        'react-hot-loader/patch',
         `webpack-dev-server/client?http://localhost:${port}/`,
         'webpack/hot/only-dev-server',
         path.join(__dirname, 'app/index.js'),