From 7f1ee881cb993955a77318f458d4be556f3b621d Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Fri, 5 Apr 2019 17:18:57 -0400
Subject: [PATCH] added ItemForm

---
 src/components/items/ItemForm.js | 17 ++++++++++++
 src/components/items/ItemList.js |  1 +
 src/components/items/Items.js    | 20 +++++++--------
 src/components/items/index.js    |  1 +
 src/components/main.js           | 44 +++++++++++++++++++++++++-------
 5 files changed, 63 insertions(+), 20 deletions(-)
 create mode 100644 src/components/items/ItemForm.js

diff --git a/src/components/items/ItemForm.js b/src/components/items/ItemForm.js
new file mode 100644
index 0000000..c4493b9
--- /dev/null
+++ b/src/components/items/ItemForm.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import {Form, Button} from 'react-bootstrap'
+
+const ItemForm = props => {
+  console.log(props)
+  return (
+    <Form onSubmit={props.handleSubmit}>
+      <Form.Group controlId="formBasicEmail">
+        <Form.Label>Enter Item Here</Form.Label>
+        <Form.Control value={props.itemText} onChange={props.updateItemText} />
+      </Form.Group>
+      <Button variant="dark" type='submit'>Submit Item</Button>
+    </Form>
+  )
+}
+
+export default ItemForm
diff --git a/src/components/items/ItemList.js b/src/components/items/ItemList.js
index b50f831..41b6698 100644
--- a/src/components/items/ItemList.js
+++ b/src/components/items/ItemList.js
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ItemRow from './ItemRow'
 const ItemList = props => {
   const { items } = props
diff --git a/src/components/items/Items.js b/src/components/items/Items.js
index fda98e3..2f6a85a 100644
--- a/src/components/items/Items.js
+++ b/src/components/items/Items.js
@@ -1,20 +1,18 @@
 import React from 'react'
 import ItemList from './ItemList'
-import {Container, Row, Col, Table} from 'react-bootstrap'
+import {Table, Row, Col} from 'react-bootstrap'
 
 const Items = props => {
   const { items } = props
+  if(items.length===0) return <div>No Items Found.</div>
   return (
-    <Container className="mt-5">
-      <Row><Col><h3>Items</h3></Col></Row>
-      <Row><Col><Table striped bordered hover>
-        <thead><tr>
-          <th>#</th>
-          <th>Item</th>
-        </tr></thead>
-        <ItemList items={items} />
-      </Table></Col></Row>
-    </Container>
+    <Table striped bordered hover>
+      <thead><tr>
+        <th>#</th>
+        <th>Item</th>
+      </tr></thead>
+      <ItemList items={items} />
+    </Table>
   )
 }
 
diff --git a/src/components/items/index.js b/src/components/items/index.js
index 713b28d..8dae24e 100644
--- a/src/components/items/index.js
+++ b/src/components/items/index.js
@@ -1,3 +1,4 @@
 export { default as Items } from './Items'
 export { default as ItemList } from './ItemList'
 export { default as ItemRow } from './ItemRow'
+export { default as ItemForm } from './ItemForm'
diff --git a/src/components/main.js b/src/components/main.js
index aa1985d..d08d24e 100644
--- a/src/components/main.js
+++ b/src/components/main.js
@@ -1,12 +1,24 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { Items } from './items'
+import { Items, ItemForm } from './items'
 import {Container, Row, Col} from 'react-bootstrap'
 
+const Error = () => {
+  return (
+    <Row><Col>
+      {`Hello! The client is working correctly, but no API was found.\n
+You can still submit items to the table, but they won't persist
+after refreshing the page.`}
+    </Col></Row>
+  )
+}
+
 class App extends Component {
   constructor() {
     super()
-    this.state = { loading: true }
+    this.state = { loading: true, items: [], itemText: '' }
+    this.updateItemText = this.updateItemText.bind(this)
+    this.handleSubmit = this.handleSubmit .bind(this)
   }
 
   componentDidMount() {
@@ -23,18 +35,32 @@ class App extends Component {
     }
   }
 
-  renderData() {
-    return <Items {...this.state} />
+  updateItemText(e) {
+    e.preventDefault()
+    console.log(e.target.value, this.state.itemText)
+    this.setState({itemText: e.target.value})
   }
 
-  renderApiNotFound() {
-    return <Container className="mt-5"><Row/><Row><Col/>
-      <Col>Hello! The client is working correctly, but no API was found.</Col>
-      <Col/></Row></Container>
+  handleSubmit(e) {
+    e.preventDefault()
+    console.log(e.target.value)
   }
+
+  renderData() {
+    return (
+      <>
+      <Container fluid className="mt-5">
+        <Row><Col sm={3}>
+          <ItemForm itemText={this.state.itemText} handleSubmit={this.handleSubmit} updateItemText={this.updateItemText}/>
+          <div className="mt-5">{this.state.apiNotFound ? <Error/> : ''}</div>
+        </Col><Col sm={8}><h3>Items</h3><Items {...this.state} /></Col></Row>
+      </Container>
+      </>
+    )
+  }
+
   render() {
     if (this.state.loading) return <div />
-    if(this.state.apiNotFound) return this.renderApiNotFound()
     if (this.state.items) return this.renderData()
     return <div />
   }