finish refactor

Signed-off-by: Carlos Azuaje <carlosjazzc1@gmail.com>

app/static/javascript/src/App.css

@@ -16,14 +16,11 @@ html {
 }
 
 .File {
-  margin-top: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid #37989291;
-  padding: 0.7em 0;
-}
-
-.File-type {
-  margin-left: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1rem 0 0.5 0;
+  padding: 0.5rem 0 0 0;
 }
 
 .Div-Button {
@@ -50,3 +47,15 @@ html {
   color: white;
   margin: 0 0 1em 0;
 }
+
+.File > span {
+  padding-bottom: 10px;
+  display: block;
+  flex: 1;
+}
+
+.File > span.state {
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+}

app/static/javascript/src/actions/index.js

-import io from "../helpers/io";
+import { io, CHUNK_SIZE } from "../constants";
 
-export const readFileChunk = (ctx, offset, length) => {
-  let end_offset = offset + length;
+// Starting uploading reading the file
+export const readFileChunk = (ctx, offset) => {
+  let end_offset = offset + CHUNK_SIZE;
   if (end_offset > ctx.props.file.size) {
-    alert('HOLA')
-    end_offset = ctx.props.file.size
-  };
+    end_offset = ctx.props.file.size;
+  }
   let r = new FileReader();
   r.onload = function(file, offset, length, event) {
     if (event.target.error != null) {
@@ -13,49 +13,45 @@ export const readFileChunk = (ctx, offset, length) => {
     } else {
       onReadSuccess(ctx, offset, length, event.target.result);
     }
-  }.bind(r, ctx.props.file, offset, length);
-  r.readAsArrayBuffer(ctx.props.file.slice(offset, ctx.props.file.size /*end_offset*/));
+  }.bind(r, ctx.props.file, offset, CHUNK_SIZE);
+  r.readAsArrayBuffer(ctx.props.file.slice(offset, end_offset));
 };
 
+// Send chunk
 export const onReadSuccess = (ctx, offset, length, data) => {
-  // Read success callback
   if (ctx.state.done) return;
+  io.emit(
+    "write-chunk",
+    ctx.state.server_filename,
+    offset,
+    data,
+    function(offset, ack) {
+      if (!ack) {
+        onReadError(ctx, "Transfer aborted by server");
+      }
+    }.bind(this, offset)
+  );
 
-  setTimeout(() => {
-    alert('WRITE CHUNK')
-    io.emit(
-      "write-chunk",
-      ctx.state.server_filename,
-      offset,
-      data,
-      function(offset, ack) {
-        if (!ack) {
-          onReadError(ctx, "Transfer aborted by server");
-        }
-      }.bind(this, offset)
-    );
-  }, 1000);
-
-  let end_offset = offset + length,
-    color = "#48bd9666",
-    width =
-      (end_offset / ctx.props.file.size) * 100 < 100
-        ? (end_offset / ctx.props.file.size) * 100
-        : 100;
+  const end_offset = offset + length;
+  const porcentage = (end_offset / ctx.props.file.size) * 100;
+  const width = porcentage < 100 ? porcentage : 100;
 
-  ctx.setState({
-    progress: {
-      ...ctx.state.progress,
-      percent: width,
-      color: color
+  ctx.setState(
+    {
+      progress: {
+        ...ctx.state.progress,
+        percent: width,
+        color: "#48bd9666"
+      }
+    },
+    () => {
+      if (end_offset < ctx.props.file.size) {
+        readFileChunk(ctx, end_offset, CHUNK_SIZE);
+      } else {
+        ctx.setState({ done: true });
+      }
     }
-  });
-
-  if (end_offset < ctx.props.file.size) {
-    readFileChunk(ctx, end_offset, ctx.props.chunk_size);
-  } else {
-    ctx.setState({ done: true });
-  }
+  );
 };
 
 export const onReadError = (ctx, message) => {
@@ -66,7 +62,6 @@ export const onReadError = (ctx, message) => {
       color: "#ff000073",
       percent: 100
     },
-
     invalid: true
   });
 };

app/static/javascript/src/components/File.js

 import React, { PureComponent } from "react";
 import { Line } from "rc-progress";
 import { readFileChunk, onReadError } from "../actions";
-import io from "../helpers/io";
-
-const CHUNK_SIZE = 64 * 1024;
+import { io } from "../constants";
 
 export default class File extends PureComponent {
   constructor(props) {
@@ -18,7 +16,7 @@ export default class File extends PureComponent {
       }
     };
 
-    this.uploadFile = () => readFileChunk(this, 0, CHUNK_SIZE);
+    this.uploadFile = () => readFileChunk(this, 0);
     this.onReadError = () => onReadError(this, "Upload rejected by server");
   }
 
@@ -43,20 +41,26 @@ export default class File extends PureComponent {
 
   render() {
     return (
-      <div className="File">
-        <span className="File-name">Name: {this.props.file.name}</span>
-        <span className="File-type">
-          Type: {this.props.file.type || "unknown"}
-        </span>
-        <span className="File-type">Size: {this.props.file.size}</span>
-        {!this.state.done && (
-          <button
-            className="File-button-remove"
-            onClick={this.props.clickRemove}
-          >
-            Remove File
-          </button>
-        )}
+      <div>
+        <div className="File">
+          <span className="File-name">Name: {this.props.file.name}</span>
+          <span className="File-type">
+            Type: {this.props.file.type || "unknown"}
+          </span>
+          <span className="File-type">Size: {this.props.file.size}</span>
+          {!this.state.done && (
+            <button
+              className="File-button-remove"
+              onClick={this.props.clickRemove}
+            >
+              Remove File
+            </button>
+          )}
+          <span className='state'>
+            {this.state.done && "Done"}
+            {this.state.invalid && "Invalid"}
+          </span>
+        </div>
         {this.props.uploading && (
           <Line
             percent={this.state.progress.percent}
@@ -66,8 +70,6 @@ export default class File extends PureComponent {
             trailColor="#2fb9e224"
           />
         )}
-        {this.state.done && "Done"}
-        {this.state.invalid && "Invalid"}
       </div>
     );
   }

app/static/javascript/src/constants.js

+export const CHUNK_SIZE = 64 * 1024;
+export const io = require('socket.io-client')('http://' + document.domain + ':' + location.port);

app/static/javascript/src/helpers/io.js

-var io = require('socket.io-client')('http://' + document.domain + ':' + location.port);
-
-io.on('connect', () => {
-	io.emit('connected');
-});
-
-export default io;