First commit

readeral · Jul 19, 2017 · 77a3033 · 77a3033
commit 77a3033
Show file tree

Hide file tree

Showing 24 changed files with 9,154 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "netoupload",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "gh-pages": "^1.0.0",
+    "papaparse": "^4.3.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-dropzone": "^3.13.3"
+  },
+  "devDependencies": {
+    "react-scripts": "1.0.10"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "homepage": "http://readeral.github.io/netoupload"
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,46 @@
+#header {
+  display: block;
+  height: 100px;
+  padding: 5px;
+  margin: 4px;
+}
+
+.main {
+  width: 100%;
+}
+
+#left {
+  display: inline-block;
+  vertical-align: top;
+  width: 38%;
+  margin: 0 1% 0 1%;
+}
+
+#right {
+  display: inline-block;
+  vertical-align: top;
+  width: 58%;
+  margin: 0 1% 0 1%;
+}
+
+.left-box {
+  height: 80px;
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+#your-files {
+  background-color: #f3e3e3;
+}
+#error-console {
+  background-color: #1f1f1f;
+}
+#control-panel {
+  border: 1px solid lightblue;
+}
+
+#table-box {
+  height: 500px;
+  padding: 20px;
+  background-color: #3f3e3e;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,191 @@
+import React, { Component } from "react";
+import "./App.css";
+import Drop from "./Components/Drop/Drop";
+import Console from "./Components/Console/Console";
+import Table from "./Components/Table/Table";
+import ItemUpdate from "./Components/ItemUpdate";
+import Papa from "papaparse";
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.onTestButton = this.onTestButton.bind(this);
+    this.onResultButton = this.onResultButton.bind(this);
+    this.onClearButton = this.onClearButton.bind(this);
+    this.onDropped = this.onDropped.bind(this);
+    this.onDropRejected = this.onDropRejected.bind(this);
+    this.handleFileUpload = this.handleFileUpload.bind(this);
+    this.send = this.send.bind(this);
+    this.receive = this.receive.bind(this);
+    this.state = {
+      tabled: [],
+      console: [],
+      keyed: [],
+      items: ["SKU", "Reorder Quantity"],
+      itemValues: {},
+      json: []
+    };
+  }
+
+  onTestButton() {
+    var collection = this.state.keyed.map(obj => {
+      return Object.keys(obj)
+        .filter(key => {
+          return this.state.items.includes(key);
+        })
+        .map(key => {
+          return { [key]: obj[key] };
+        });
+    });
+    collection.forEach(value => {
+      var eachNewItem = new ItemUpdate(
+        value[1].SKU,
+        value[0]["Reorder Quantity"]
+      );
+      console.log(eachNewItem);
+      this.setState(previousState => ({
+        json: [...previousState.json, eachNewItem]
+      }));
+    });
+  }
+
+  onResultButton() {
+    console.log(this.state.json);
+    console.log(JSON.stringify(this.state.json));
+    console.log(this.state.console);
+  }
+
+  onClearButton() {
+    this.setState(previousState => ({
+      tabled: [],
+      console: [],
+      keyed: [],
+      items: ["SKU", "Reorder Quantity"],
+      itemValues: {},
+      json: []
+    }));
+  }
+
+  onDropped(acceptedFile) {
+    this.setState(previousState => ({
+      console: [...previousState.console, acceptedFile]
+    }));
+    this.handleFileUpload(acceptedFile);
+  }
+
+  onDropRejected(rejectedFile) {
+    this.setState(previousState => ({
+      console: [...previousState.console, rejectedFile]
+    }));
+  }
+
+  handleFileUpload(file) {
+    Papa.parse(file[0], {
+      header: true,
+      complete: results => {
+        this.setState(previousState => ({
+          keyed: results.data
+        }));
+      }
+    });
+    Papa.parse(file[0], {
+      header: false,
+      complete: results => {
+        this.setState(previousState => ({
+          tabled: results.data
+        }));
+      }
+    });
+  }
+
+  send() {
+    fetch(
+      "https://cors-anywhere.herokuapp.com/" +
+        "https://www.jetblackespresso.com.au/do/WS/NetoAPI",
+      {
+        method: "POST",
+        headers: {
+          NETOAPI_ACTION: "UpdateItem",
+          NETOAPI_KEY: "7cFrlopIR9QC7tBjJOEiE3vbvLjPxJ4m",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({
+          Item: this.state.json
+        })
+      }
+    )
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(json) {
+        console.log("parsed json", json);
+      })
+      .catch(function(ex) {
+        console.log("parsing failed", ex);
+      });
+  }
+
+  receive() {
+    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: ["30569", "64494"],
+            OutputSelector: "WarehouseQuantity"
+          }
+        })
+      }
+    )
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(json) {
+        console.log("parsed json", json.Item);
+      })
+      .catch(function(ex) {
+        console.log("parsing failed", ex);
+      });
+  }
+
+  render() {
+    return (
+      <div className="Home-body">
+        <div id="main">
+          <div id="left">
+            <h1>File upload</h1>
+            <h2>Only CSV is accepted</h2>
+            <Drop
+              onDropped={this.onDropped}
+              onDropRejected={this.onDropRejected}
+              console={this.state.console}
+            />
+            <Console console={this.state.console} />
+            <div id="control-panel" className="left-box">
+              All buttons exist here
+              <button onClick={this.send}>Update new values</button>
+              <button onClick={this.receive}>Download split CSV</button>
+              <button onClick={this.onTestButton}>Test button</button>
+              <button onClick={this.onResultButton}>Result button</button>
+              <button onClick={this.onClearButton}>CLEAR</button>
+            </div>
+          </div>
+          <div id="right">
+            <h1>CSV Preview</h1>
+            <h2>Please check details before hitting submit</h2>
+            <Table tabled={this.state.tabled} keyed={this.state.keyed} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/Components/Console/Console.css b/src/Components/Console/Console.css
@@ -0,0 +1,12 @@
+#error-console {
+  color: #efefef;
+  height: 200px;
+}
+
+ul {
+  padding-left: 0;
+}
+
+li {
+  list-style: none;
+}
diff --git a/src/Components/Console/Console.js b/src/Components/Console/Console.js
@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import "./Console.css";
+
+class Console extends Component {
+  render() {
+    return (
+      <div>
+        <div id="error-console" className="left-box">
+          Any errors will be output here
+          <div>
+            <ul>
+              {this.props.console.map((f, index) => (
+                <li key={index}>
+                  {index} - {f[0].name} - {f[0].size} successfully uploaded
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Console;