MVP

client/.eslintcache

@@ -1 +1 @@
-[{"/Users/jgo/Documents/Sonobi/fe-code-challenge/client/src/index.js":"1","/Users/jgo/Documents/Sonobi/fe-code-challenge/client/src/App.js":"2"},{"size":219,"mtime":1606160019328,"results":"3","hashOfConfig":"4"},{"size":528,"mtime":1606155683575,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1qz3yvt",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/jgo/Documents/Sonobi/fe-code-challenge/client/src/index.js",[],"/Users/jgo/Documents/Sonobi/fe-code-challenge/client/src/App.js",[]]
+[{"/home/bruno/fe-code-challenge/client/src/App.js":"1","/home/bruno/fe-code-challenge/client/src/index.js":"2"},{"size":2155,"mtime":1606199973499,"results":"3","hashOfConfig":"4"},{"size":220,"mtime":1606186125964,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"67sdn0",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/bruno/fe-code-challenge/client/src/App.js",["10"],"/home/bruno/fe-code-challenge/client/src/index.js",[],{"ruleId":"11","severity":1,"message":"12","line":5,"column":5,"nodeType":"13","messageId":"14","endLine":5,"endColumn":16},"no-unused-vars","'buttonStyle' is assigned a value but never used.","Identifier","unusedVar"]

client/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

client/src/App.js

@@ -1,23 +1,84 @@
-import logo from './logo.svg';
 import './App.css';
+import axios from 'axios';
+import React from 'react';
+
+var buttonStyle = {
+  margin: '10px 10px 10px 0'
+};
+
+
+class Inv extends React.Component {
+  constructor(props) {
+    super(props);
+    this.submitRecord = this.submitRecord.bind(this);
+    this.nameChange = this.nameChange.bind(this);
+    this.typeChange = this.typeChange.bind(this);
+    this.urlChange = this.urlChange.bind(this);
+    this.state = { list: [], name: "", type: "", url: "" };
+  }
+
+  nameChange(event) { this.setState({ name: event.target.value }); }
+  typeChange(event) { this.setState({ type: event.target.value }); }
+  urlChange(event) { this.setState({ url: event.target.value }); }
+
+  submitRecord(event) {
+
+    let payload = {
+      name: this.state.name,
+      type: this.state.type,
+      url: this.state.url
+    }
+
+    axios.post('http://localhost:3001/inventoryset', payload)
+      .then((response) => {
+        console.log(response);
+        this.getInv();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+
+    event.preventDefault();
+  }
+
+  getInv() {
+    axios.get('http://localhost:3001/inventoryget')
+      .then((response) => {
+        let temp = []
+        for (let x of response.data.result)
+          temp.push(<li>{x.id}, {x.name}, {x.type}, {x.url}</li>);
+        console.log(temp);
+        this.setState({ list: temp })
+      })
+      .catch((error) => {
+        console.log(error);
+        this.setState({ list: [<li>Could not grab inventory</li>] })
+      })
+  }
+
+  componentDidMount() {
+    this.getInv();
+  }
+
+  render() {
+    return <div>
+      <form onSubmit={this.submitRecord}>
+        <label>Name: <input type="text" value={this.state.name} onChange={this.nameChange} /></label>
+        <label>Type: <input type="text" value={this.state.type} onChange={this.typeChange} /></label>
+        <label>Url: <input type="text" value={this.state.url} onChange={this.urlChange} /></label>
+        <input type="submit" value="Submit Record" />
+      </form>
+      <ul>{this.state.list}</ul>
+    </div>;
+  }
+}
+
+
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Inv />
     </div>
   );
 }

client/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

server/package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.17.1",
     "sequelize": "^6.3.5",
     "sqlite3": "^5.0.0"

server/src/routes/index.js

@@ -1,7 +1,12 @@
 const express = require('express');
+const cors = require('cors'); //needed to make sure it runs locally
 const app = express();
 const port = 3001;
 
+app.use(cors())
+app.use(express.urlencoded({ extened: true }))
+app.use(express.json())
+
 const inventory = require('./inventory.route');
 
 module.exports = function routes(sequelize) {

server/src/routes/inventory.route.js

@@ -1,9 +1,19 @@
 module.exports = function inventoryRoute(app, sequelize) {
-    app.get('/inventory', async (req, res) => {
+    app.get('/inventoryget', async (req, res) => {
         const inventories = await sequelize.models.Inventory.findAll();
         res.statusCode = 200;
         res.send({
             result: inventories
         });
     });
+
+    app.post('/inventoryset', async (req, res) => {
+        const inventories = await sequelize.models.Inventory.create({
+            name: req.body.name,
+            type: req.body.type,
+            url: req.body.url
+        });
+        res.statusCode = 200;
+        res.send();
+    })
 };