From a313f42b12fd58ae2db4561454c91eaf3b776c42 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 28 Apr 2019 16:20:29 +0200
Subject: stuff working

---
 client/components/query.component.js   | 87 +++++++++++++++++++++-------------
 client/components/results.component.js |  9 ++--
 client/components/timing.component.js  |  2 +-
 3 files changed, 60 insertions(+), 38 deletions(-)

(limited to 'client/components')

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),
 })
diff --git a/client/components/results.component.js b/client/components/results.component.js
index a6f3052..6332135 100644
--- a/client/components/results.component.js
+++ b/client/components/results.component.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-function Results({ loading, res }) {
-  if (!res) {
+function Results({ loading, success, error, match, results }) {
+  if (!success && !error) {
     return (
       <div className='results'>
       </div>
@@ -16,8 +16,7 @@ function Results({ loading, res }) {
     )
   }
 
-  const { success, error, match, results } = res
-  if (!success) {
+  if (error) {
     return (
       <div className='results'>
         <b>Error: {error.replace(/_/g, ' ')}</b>
@@ -51,6 +50,6 @@ function Results({ loading, res }) {
   )
 }
 
-const mapStateToProps = state => state.api
+const mapStateToProps = state => (state.api.similar || {})
 
 export default connect(mapStateToProps)(Results)
diff --git a/client/components/timing.component.js b/client/components/timing.component.js
index 7473a51..f536c22 100644
--- a/client/components/timing.component.js
+++ b/client/components/timing.component.js
@@ -8,6 +8,6 @@ function Timing({ timing }) {
   return null
 }
 
-const mapStateToProps = state => state.api
+const mapStateToProps = state => (state.api.similar || {})
 
 export default connect(mapStateToProps)(Timing)
-- 
cgit v1.2.3-70-g09d2