added search

.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
   ]
-}
+}

package-lock.json

@@ -99,6 +99,20 @@
         "@babel/types": "^7.4.0"
       }
     },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.3.tgz",
+      "integrity": "sha512-UMl3TSpX11PuODYdWGrUeW6zFkdYhDn7wRLrOuNVM6f9L+S9CzmDXYyrp3MTHcwWjnzur1f/Op8A7iYZWya2Yg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.1.0",
+        "@babel/helper-member-expression-to-functions": "^7.0.0",
+        "@babel/helper-optimise-call-expression": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.4.0",
+        "@babel/helper-split-export-declaration": "^7.4.0"
+      }
+    },
     "@babel/helper-define-map": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.4.0.tgz",
@@ -300,6 +314,16 @@
         "@babel/plugin-syntax-async-generators": "^7.2.0"
       }
     },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.0.tgz",
+      "integrity": "sha512-t2ECPNOXsIeK1JxJNKmgbzQtoG27KIlVE61vTqX0DKR9E9sZlVVxWUtEW9D5FlZ8b8j7SBNCHY47GgPKCKlpPg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.4.0",
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-proposal-json-strings": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz",
@@ -3029,8 +3053,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3071,8 +3094,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3082,8 +3104,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3200,8 +3221,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3213,7 +3233,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3339,8 +3358,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3473,7 +3491,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3493,7 +3510,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }

package.json

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",

src/components/items/ItemForm.js

@@ -5,7 +5,7 @@ const ItemForm = props => {
   console.log(props)
   return (
     <Form onSubmit={props.handleSubmit}>
-      <Form.Group controlId="formBasicEmail">
+      <Form.Group controlId="item">
         <Form.Label>Enter Item Here</Form.Label>
         <Form.Control value={props.itemText} onChange={props.updateItemText} />
       </Form.Group>

src/components/items/ItemSearch.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Form, Button} from 'react-bootstrap'
+
+const ItemSearch = props => {
+  return (
+    <Form className = "mt-5" onSubmit={props.handleRead}>
+      <Form.Group controlId="search">
+        <Form.Control type="text" placeholder="Search" />
+      </Form.Group>
+      <Button variant="dark" type="submit">Search</Button>
+    </Form>
+  )
+}
+
+export default ItemSearch

src/components/items/ItemSearchResult.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {Form, Row, Col, Button} from 'react-bootstrap'
+
+const ItemSearch = props => {
+  const {item, handleUpdate, updateItemText} = props
+  const {id, name} = item
+  return (
+    <Form className = "mt-5" onSubmit={handleUpdate}>
+    Search Results    
+      <Form.Group as={Row} controlId="searchResult">
+        <Form.Label column sm="2">ID:</Form.Label>
+        <Col sm="10">
+          <Form.Control plaintext readOnly defaultValue={id} />
+        </Col>
+        <Form.Control
+          name="name"
+          type="text"
+          onChange={updateItemText}
+          value={name} />
+      </Form.Group>
+      <Button variant="dark" type="submit">Update</Button>
+    </Form>
+  )
+}
+
+export default ItemSearch

src/components/items/Items.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ItemList from './ItemList'
-import {Table, Row, Col} from 'react-bootstrap'
+import {Table} from 'react-bootstrap'
 
 const Items = props => {
   const { items } = props

src/components/items/index.js

@@ -2,3 +2,5 @@ export { default as Items } from './Items'
 export { default as ItemList } from './ItemList'
 export { default as ItemRow } from './ItemRow'
 export { default as ItemForm } from './ItemForm'
+export { default as ItemSearch } from './ItemSearch'
+export { default as ItemSearchResult } from './ItemSearchResult'

src/components/main.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { Items, ItemForm } from './items'
+import { Items, ItemForm, ItemSearch, ItemSearchResult } from './items'
 import {Container, Row, Col} from 'react-bootstrap'
 
 const Error = () => {
@@ -18,19 +18,22 @@ class App extends Component {
     super()
     this.state = { loading: true, items: [], itemText: '' }
     this.updateItemText = this.updateItemText.bind(this)
-    this.handleSubmit = this.handleSubmit .bind(this)
+    this.handleCreate = this.handleCreate.bind(this)
+    this.handleRead = this.handleRead.bind(this)
+    this.handleUpdate = this.handleUpdate.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
   }
 
-  componentDidMount() {
-    this.fetchApi()
-  }
+  componentDidMount = () => this.fetchApi()
+
+  clearItemText = () => this.setState({itemText: ''})
 
   async fetchApi() {
     try {
       const { data } = await axios.get('/api/items')
       this.setState({ loading: false, items: data })
     } catch (e) {
-      console.log(e)
+      console.log('The api is not available.')
       this.setState({loading: false, apiNotFound: true})
     }
   }
@@ -41,17 +44,59 @@ class App extends Component {
     this.setState({itemText: e.target.value})
   }
 
-  handleSubmit(e) {
+  async handleCreate(e) {
     e.preventDefault()
-    console.log(e.target.value)
+    const name = e.target.item.value
+    const id = this.state.items.length
+    try{
+      const res = await axios.post('api/items', {name})
+      await this.setState({itemText: '', items: this.state.items.concat(res.data)})
+    } catch(e) {
+      console.log(e)
+      await this.setState({itemText: '', items: this.state.items.concat({id, name})})
+    }
   }
 
+  async handleRead(e) {
+    e.preventDefault()
+    const id = e.target.search.value
+    try{
+      const res = await axios.get(`api/items/${id}`)
+      this.setState({searchItem: res.data, searchText: res.data.name, itemText: ''})
+    }
+    catch(e) {
+      console.log(e)
+    }
+  }
+
+  async handleUpdate(e) {
+    e.preventDefault()
+    console.log(e.target.name)
+  }
+
+  async handleDelete(e) {
+    e.preventDefault()
+    console.log(e.target)
+  }
   renderData() {
     return (
       <>
       <Container fluid className="mt-5">
         <Row><Col sm={3}>
-          <ItemForm itemText={this.state.itemText} handleSubmit={this.handleSubmit} updateItemText={this.updateItemText}/>
+          <ItemForm
+            itemText={this.state.itemText}
+            handleSubmit={this.handleCreate}
+            updateItemText={this.updateItemText}/>
+          <ItemSearch
+            searchText={this.state.searchText}
+            handleRead={this.handleRead} />
+          {this.state.searchItem ?
+            <ItemSearchResult
+              item={this.state.searchItem}
+              searchText={this.state.searchText}
+              updateItemText={this.updateItemText}
+              handleUpdate={this.handleUpdate}/> :
+            <div/>}
           <div className="mt-5">{this.state.apiNotFound ? <Error/> : ''}</div>
         </Col><Col sm={8}><h3>Items</h3><Items {...this.state} /></Col></Row>
       </Container>

src/components/navbar.js

@@ -1,10 +1,7 @@
 import React from 'react'
 import {
   Navbar,
-  Nav,
-  FormControl,
-  Form,
-  Button
+  Nav,  
 } from 'react-bootstrap'
 
 const MainNav = () => {
@@ -16,10 +13,7 @@ const MainNav = () => {
         <Nav className="mr-auto">
           <Nav.Link href="/">Home</Nav.Link>
         </Nav>
-        <Form inline>
-          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-          <Button variant="outline-success">Search</Button>
-        </Form>
+
       </Navbar.Collapse>
     </Navbar>
   )

webpack.config.js

@@ -30,6 +30,7 @@ module.exports = {
     historyApiFallback: true,
     allowedHosts: [
       'localhost',
+      'opsqtua3b5dpg6zy.onion',
     ],
     proxy: {
       '/api': 'http://localhost:1337',