adding loader spinners

readeral · Jul 21, 2017 · 9e2e494 · 9e2e494
1 parent afb7af0
commit 9e2e494
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 78 deletions.
diff --git a/src/App.js b/src/App.js
@@ -29,7 +29,9 @@ class App extends Component {
       skus: [],
       json: [],
       files: [],
-      valueMethod: "increment"
+      valueMethod: "increment",
+      submitted: false,
+      waiting: { a: false, b: false }
     };
   }
 
@@ -76,6 +78,9 @@ class App extends Component {
         );
       }
     });
+    this.setState(previousState => ({
+      submitted: true
+    }));
   }
 
   onPreview() {
@@ -86,7 +91,7 @@ class App extends Component {
       );
     } else {
       this.writeConsole(
-        "No CSV file data has been parsed. Please upload a file before attempting update."
+        "No CSV file data has been parsed. Please submit a file before attempting update."
       );
     }
     console.log(JSON.stringify(this.state.json));
@@ -104,15 +109,19 @@ class App extends Component {
       json: [],
       files: [],
       valueMethod: "increment",
-      inputValue: "Reorder Quantity"
+      inputValue: "Reorder Quantity",
+      submitted: false,
+      waiting: { a: false, b: false }
     }));
   }
 
   onDropped(acceptedFile) {
     if (!this.state.files.includes(acceptedFile[0].name)) {
       this.parseFile(acceptedFile)
         .then(response => {
-          this.writeConsole([acceptedFile[0].name] + " successfully uploaded!");
+          this.writeConsole(
+            [acceptedFile[0].name] + " successfully submitted!"
+          );
         })
         .then(response => {
           this.setState(previousState => ({
@@ -121,20 +130,22 @@ class App extends Component {
           console.log(this.state.files);
         })
         .catch(response => {
-          this.writeConsole([acceptedFile[0].name] + " failed to be uploaded.");
+          this.writeConsole(
+            [acceptedFile[0].name] + " failed to be submitted."
+          );
           console.log(response);
         });
     } else {
       this.writeConsole(
         [acceptedFile[0].name] +
-          " appears already to exist. Please upload a new file, or ensure all files are uniquely named."
+          " appears already to exist. Please submit a new file, or ensure all files are uniquely named."
       );
     }
   }
 
   onDropRejected(rejectedFile) {
     this.writeConsole(
-      [rejectedFile[0].name] + " failed to be uploaded. Incorrect file type."
+      [rejectedFile[0].name] + " failed to be submitted. Incorrect file type."
     );
   }
 
@@ -166,6 +177,7 @@ class App extends Component {
 
   send() {
     if (this.state.json.length > 0) {
+      this.setState({ waiting: { a: true } });
       var a = this;
       fetch(
         "https://cors-anywhere.herokuapp.com/" +
@@ -199,60 +211,74 @@ class App extends Component {
           );
           console.log("parsed json", json);
         })
+        .then(function(response) {
+          a.setState({ waiting: { a: false } });
+        })
         .catch(function(ex) {
           console.log("parsing failed", ex);
         });
     } else {
       console.log("no values");
       this.writeConsole(
-        "No CSV file data has been parsed. Please upload a file before attempting update."
+        "No CSV file data has been parsed. Please submit a file before attempting update."
       );
     }
   }
 
   receive() {
-    var a = this;
-    fetch(
-      "https://cors-anywhere.herokuapp.com/" +
-        "https://www.jetblackespresso.com.au/do/WS/NetoAPI",
-      {
-        method: "POST",
-        headers: {
-          NETOAPI_ACTION: "GetItem",
-          NETOAPI_KEY: "7cFrlopIR9QC7tBjJOEiE3vbvLjPxJ4m",
-          Accept: "application/json"
-        },
-        body: JSON.stringify({
-          Filter: {
-            SKU: this.state.skus,
-            OutputSelector: "WarehouseQuantity"
-          }
+    if (this.state.json.length > 0) {
+      this.setState({ waiting: { b: true } });
+      var a = this;
+      fetch(
+        "https://cors-anywhere.herokuapp.com/" +
+          "https://www.jetblackespresso.com.au/do/WS/NetoAPI",
+        {
+          method: "POST",
+          headers: {
+            NETOAPI_ACTION: "GetItem",
+            NETOAPI_KEY: "7cFrlopIR9QC7tBjJOEiE3vbvLjPxJ4m",
+            Accept: "application/json"
+          },
+          body: JSON.stringify({
+            Filter: {
+              SKU: this.state.skus,
+              OutputSelector: "WarehouseQuantity"
+            }
+          })
+        }
+      )
+        .then(function(response) {
+          return response.json();
         })
-      }
-    )
-      .then(function(response) {
-        return response.json();
-      })
-      .then(function(json) {
-        console.log("parsed json", json.Item);
-        a.writeConsole(
-          "Data retrieved: " +
-            json.Item
-              .map(item => {
-                let entry =
-                  "[" +
-                  item.SKU +
-                  " - " +
-                  item.WarehouseQuantity.Quantity +
-                  "]";
-                return entry;
-              })
-              .join(", ")
-        );
-      })
-      .catch(function(ex) {
-        console.log("parsing failed", ex);
-      });
+        .then(function(json) {
+          console.log("parsed json", json.Item);
+          a.writeConsole(
+            "Data retrieved: " +
+              json.Item
+                .map(item => {
+                  let entry =
+                    "[" +
+                    item.SKU +
+                    " - " +
+                    item.WarehouseQuantity.Quantity +
+                    "]";
+                  return entry;
+                })
+                .join(", ")
+          );
+        })
+        .then(function(response) {
+          a.setState({ waiting: { b: false } });
+        })
+        .catch(function(ex) {
+          console.log("parsing failed", ex);
+        });
+    } else {
+      console.log("no values");
+      this.writeConsole(
+        "SKU values are required for retrieval. Please submit a file before attempting to retrieve existing stock levels."
+      );
+    }
   }
 
   handleChange(option) {
@@ -269,25 +295,28 @@ class App extends Component {
     return (
       <div className="Home-body">
         <div id="left">
-          <h1>File upload</h1>
-          <div className="leftSub">
-            <Drop
-              onDropped={this.onDropped}
-              onDropRejected={this.onDropRejected}
-              console={this.state.console}
+          <h1>File submission</h1>
+          <div className="flipper">
+            <div className="leftSub">
+              <Drop
+                onDropped={this.onDropped}
+                onDropRejected={this.onDropRejected}
+                console={this.state.console}
+              />
+              <Reset hasdata={this.state.keyed.length} onClear={this.onClear} />
+            </div>
+            <ControlPanel
+              onParse={this.onParse}
+              onPreview={this.onPreview}
+              send={this.send}
+              receive={this.receive}
+              valueMethod={this.state.valueMethod}
+              handleChange={this.handleChange}
+              inputValue={this.state.inputValue}
+              handleType={this.handleType}
+              waiting={this.state.waiting}
             />
-            <Reset hasdata={this.state.keyed.length} onClear={this.onClear} />
           </div>
-          <ControlPanel
-            onParse={this.onParse}
-            onPreview={this.onPreview}
-            send={this.send}
-            receive={this.receive}
-            valueMethod={this.state.valueMethod}
-            handleChange={this.handleChange}
-            inputValue={this.state.inputValue}
-            handleType={this.handleType}
-          />
           <Console console={this.state.console} />
         </div>
         <div id="right">

diff --git a/src/Components/ControlPanel/ControlPanel.css b/src/Components/ControlPanel/ControlPanel.css
@@ -7,6 +7,11 @@
   height: 150px;
 }
 
+#button-group {
+  height: 110px;
+  margin-bottom: 20px;
+}
+
 #button-group button {
   width: 100%;
   height: 33.3%;
@@ -17,22 +22,18 @@
   text-decoration: none;
   display: inline-block;
   margin-bottom: 5px;
+font-size: 16px;
 }
 
-#button-group {
-  height: 110px;
-  margin-bottom: 20px;
-}
-
-#control-panel button .orange {
+.orange {
   border-color: orange;
 }
 
-#control-panel button .green {
+.green {
   border-color: green;
 }
 
-#control-panel button .blue {
+.blue {
   border-color: blue;
 }
 

diff --git a/src/Components/ControlPanel/ControlPanel.js b/src/Components/ControlPanel/ControlPanel.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { RadioGroup, Radio } from "react-radio-group";
+import Loader from "../../Components/Loader/Loader";
 import "./ControlPanel.css";
 
 class ControlPanel extends Component {
@@ -8,13 +9,16 @@ class ControlPanel extends Component {
       <div id="control-panel">
         <div id="button-group">
           <button onClick={this.props.onPreview} className="orange">
-            Preview API data before sending
+            Preview API call
           </button>
-          <button onClick={this.props.send} className="green">
-            Update stock levels
+          <button
+            onClick={this.props.send}
+            className="green {this.props.active}"
+          >
+            {this.props.waiting.a == true ? <Loader /> : "Update quantity"}
           </button>
           <button onClick={this.props.receive} className="blue">
-            Retrieve stock levels
+            {this.props.waiting.b == true ? <Loader /> : "Retrieve quantity"}
           </button>
         </div>
         <p className="small">API Update Action</p>

diff --git a/src/Components/Loader/Loader.css b/src/Components/Loader/Loader.css
@@ -0,0 +1,36 @@
+#preloader-1 {
+	position: relative;
+	top: -14px;
+	left: 40%;
+}
+#preloader-1 span {
+	position:absolute;
+	top: 0;
+	left: 0;
+	border: 2px solid black;
+	border-top: 2px solid transparent;
+	border-radius:50%;
+}
+
+#preloader-1 span:nth-child(1){
+	width:24px;
+	height:24px;
+	animation: spin-1 2s infinite linear;
+}
+#preloader-1 span:nth-child(2){
+	top: 6px;
+	left: 6px;
+	width:12px;
+	height:12px;
+	animation: spin-2 1s infinite linear;
+}
+@keyframes spin-1 {
+	0% {transform: rotate(360deg); opacity: 1;}
+	50% {transform: rotate(180deg); opacity: 0.5;}
+	100% {transform: rotate(0deg); opacity: 1;}
+}
+@keyframes spin-2 {
+	0% {transform: rotate(0deg); opacity: 0.5;}
+	50% {transform: rotate(180deg); opacity: 1;}
+	100% {transform: rotate(360deg); opacity: 0.5;}
+}
diff --git a/src/Components/Loader/Loader.js b/src/Components/Loader/Loader.js
@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import { RadioGroup, Radio } from "react-radio-group";
+import "./Loader.css";
+
+class Loader extends Component {
+  render() {
+    return (
+      <div id="preloader-1">
+        <span />
+        <span />
+      </div>
+    );
+  }
+}
+
+export default Loader;