1 files changed, 55 insertions, 32 deletions
diff --git a/client/components/query.component.js b/client/components/query.component.js
index bd98ce8..715ea92 100644
--- a/client/components/query.component.js
+++ b/client/components/query.component.js
@@ -5,12 +5,15 @@ 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,
+    searchType: 'file',
+    thresholdChanged: false,
   }
 
   handleUpload(blob) {
@@ -19,14 +22,14 @@ class Query extends Component {
       URL.revokeObjectURL(image)
     }
     const url = URL.createObjectURL(blob)
-    this.setState({ image: url, blob })
+    this.setState({ image: url, blob, thresholdChanged: false })
     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.setState({ image: url, blob: null, thresholdChanged: false })
     this.props.actions.submit(url, threshold)
   }
 
@@ -40,62 +43,82 @@ class Query extends Component {
   }
 
   render() {
-    const { url, image, threshold } = this.state
+    const { url, image, threshold, thresholdChanged, searchType } = 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>
-      */}
+        <div>
+          <span>Search by</span>
+          <label>
+            <input
+              type='radio'
+              name='searchType'
+              value='file'
+              checked={searchType === 'file'}
+              onChange={e => this.setState({ searchType: e.target.value })}
+            /> File
+          </label>
+          <label>
+            <input
+              type='radio'
+              name='searchType'
+              value='url'
+              checked={searchType === 'url'}
+              onChange={e => this.setState({ searchType: e.target.value })}
+            /> URL
+          </label>
+        </div>
+        {searchType === 'file'
+          ? <label>
+              <span>Upload image</span>
+              <UploadImage onUpload={this.handleUpload.bind(this)} />
+            </label>
+          : <label>
+              <span>Fetch 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'
+            type='range'
             value={threshold}
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
           />
           <input
-            type='range'
+            type='number'
             value={threshold}
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
           />
-          <button onClick={this.resubmit}>Update</button>
+          {thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>}
         </label>
-        {image && <div className='image' style={style} />}
+        {image &&
+          <div className='activeQuery'>
+            <b>Query image</b>
+            <div className='image' style={style} />
+          </div>
+        }
       </div>
     )
   }
 }
 
-const mapStateToProps = state => ({
-  ...state.api,
-})
+const mapStateToProps = state => ({})
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators({ ...actions }, dispatch),
 })