refactor frontend, add threshold slider

1 files changed, 103 insertions, 0 deletions

diff --git a/client/components/query.component.js b/client/components/query.component.js
new file mode 100644
index 0000000..bd98ce8
--- /dev/null
+++ b/client/components/query.component.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as actions from '../actions'
+
+import UploadImage from './uploadImage.component'
+class Query extends Component {
+  state = {
+    image: null,
+    blob: null,
+    url: "",
+    threshold: 20,
+  }
+
+  handleUpload(blob) {
+    const { image, threshold } = this.state
+    if (image) {
+      URL.revokeObjectURL(image)
+    }
+    const url = URL.createObjectURL(blob)
+    this.setState({ image: url, blob })
+    this.props.actions.upload(blob, threshold)
+  }
+
+  handleURL() {
+    const { url, threshold } = this.state
+    if (!url || url.indexOf('http') !== 0) return
+    this.setState({ image: url, blob: null })
+    this.props.actions.submit(url, threshold)
+  }
+
+  resubmit() {
+    const { image, blob } = this.state
+    if (blob) {
+      this.handleUpload(blob)
+    } else {
+      this.handleURL()
+    }
+  }
+
+  render() {
+    const { url, image, threshold } = this.state
+    const style = {}
+    if (image) {
+      style.maxWidth = 200
+      style.maxHeight = 200
+      style.backgroundImage = 'url(' + image + ')'
+      style.backgroundSize = 'cover'
+      style.opacity = 1
+    }
+    return (
+      <div className='query'>
+        <label>
+          <span>Query image</span>
+          <UploadImage onUpload={this.handleUpload.bind(this)} />
+        </label>
+      {/*
+        <label>
+          <span>Add a URL</span>
+          <input
+            type='text'
+            value={url}
+            onChange={e => this.setState({ url: e.target.value })}
+            onKeyDown={e => e.keyCode === 13 && this.handleURL()}
+            placeholder='https://'
+          />
+        </label>
+      */}
+        <label>
+          <span>Threshold</span>
+          <input
+            type='number'
+            value={threshold}
+            min={0}
+            max={64}
+            step={1}
+            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+          />
+          <input
+            type='range'
+            value={threshold}
+            min={0}
+            max={64}
+            step={1}
+            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+          />
+          <button onClick={this.resubmit}>Update</button>
+        </label>
+        {image && <div className='image' style={style} />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  ...state.api,
+})
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Query)