From d349e62cf53eda4b1a6b3cdc75ae9302dc2d4d5d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 28 Apr 2019 17:12:15 +0200
Subject: browse by clicking results

---
 client/components/query.component.js | 75 +++++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 32 deletions(-)

(limited to 'client/components/query.component.js')

diff --git a/client/components/query.component.js b/client/components/query.component.js
index d28d3a0..22a3655 100644
--- a/client/components/query.component.js
+++ b/client/components/query.component.js
@@ -3,48 +3,38 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import * as actions from '../actions'
+import * as types from '../types'
 
 import UploadImage from './uploadImage.component'
 
-const MATCH_THRESHOLD = 6
-const SIMILAR_THRESHOLD = 20
-
 class Query extends Component {
-  state = {
-    image: null,
-    blob: null,
-    url: "",
-    threshold: SIMILAR_THRESHOLD,
-    searchType: 'file',
-    thresholdChanged: false,
-    saveIfNotFound: false,
-  }
-
   handleUpload(blob) {
-    const { image, threshold } = this.state
+    const { actions, query } = this.props
+    const { image, threshold } = query
     if (image) {
       URL.revokeObjectURL(image)
     }
     const url = URL.createObjectURL(blob)
-    this.setState({
+    actions.updateQuery({
       image: url,
       blob,
       thresholdChanged: false,
     })
-    this.props.actions.upload(blob, threshold)
+    actions.upload(blob, threshold)
   }
 
   handleURL() {
-    const { url, threshold, saveIfNotFound } = this.state
+    const { actions, query } = this.props
+    const { url, threshold, saveIfNotFound } = query
     if (!url || url.indexOf('http') !== 0) return
     let newThreshold = threshold
     if (saveIfNotFound) {
-      newThreshold = SIMILAR_THRESHOLD
-      this.props.actions.match(url, threshold)
+      newThreshold = types.SIMILAR_THRESHOLD
+      actions.match(url, threshold)
     } else {
-      this.props.actions.submit(url, threshold)
+      actions.similar(url, threshold)
     }
-    this.setState({
+    actions.updateQuery({
       image: url,
       blob: null,
       thresholdChanged: false,
@@ -54,7 +44,7 @@ class Query extends Component {
   }
 
   resubmit() {
-    const { image, blob } = this.state
+    const { image, blob } = this.props.query
     if (blob) {
       this.handleUpload(blob)
     } else {
@@ -63,7 +53,12 @@ class Query extends Component {
   }
 
   render() {
-    const { url, image, threshold, thresholdChanged, searchType } = this.state
+    const { actions, query } = this.props
+    const {
+      url, image,
+      threshold, thresholdChanged,
+      searchType, saveIfNotFound,
+    } = query
     const style = {}
     if (image) {
       style.backgroundImage = 'url(' + image + ')'
@@ -78,7 +73,7 @@ class Query extends Component {
               name='searchType'
               value='file'
               checked={searchType === 'file'}
-              onChange={e => this.setState({ searchType: e.target.value })}
+              onChange={e => actions.updateQuery({ searchType: e.target.value })}
             /> File
           </label>
           <label>
@@ -87,7 +82,7 @@ class Query extends Component {
               name='searchType'
               value='url'
               checked={searchType === 'url'}
-              onChange={e => this.setState({ searchType: e.target.value })}
+              onChange={e => actions.updateQuery({ searchType: e.target.value })}
             /> URL
           </label>
         </div>
@@ -101,7 +96,7 @@ class Query extends Component {
               <input
                 type='text'
                 value={url}
-                onChange={e => this.setState({ url: e.target.value })}
+                onChange={e => actions.updateQuery({ url: e.target.value })}
                 onKeyDown={e => e.keyCode === 13 && this.handleURL()}
                 placeholder='https://'
               />
@@ -115,7 +110,10 @@ class Query extends Component {
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
+            onChange={e => actions.updateQuery({
+              threshold: parseInt(e.target.value),
+              thresholdChanged: true,
+            }) }
           />
           <input
             type='number'
@@ -123,17 +121,28 @@ class Query extends Component {
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
+            onChange={e => actions.updateQuery({
+              threshold: parseInt(e.target.value),
+              thresholdChanged: true
+            }) }
           />
-          {thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>}
+          {thresholdChanged &&
+            <button onClick={this.resubmit.bind(this)}>Update</button>
+          }
         </label>
         {searchType === 'url' &&
           <label>
-            <span>Save if not found</span>
+            <span>Save if new?</span>
             <input
               type='checkbox'
               checked={saveIfNotFound}
-              onChange={e => this.setState({ saveIfNotFound: e.target.checked, threshold: e.target.checked ? MATCH_THRESHOLD : SIMILAR_THRESHOLD })}
+              onChange={e => actions.updateQuery({
+                saveIfNotFound: e.target.checked,
+                threshold: e.target.checked
+                  ? types.MATCH_THRESHOLD
+                  : types.SIMILAR_THRESHOLD,
+              })}
+            />
           </label>
         }
         {image &&
@@ -147,7 +156,9 @@ class Query extends Component {
   }
 }
 
-const mapStateToProps = state => ({})
+const mapStateToProps = state => ({
+  query: state.api.query || {}
+})
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators({ ...actions }, dispatch),
 })
-- 
cgit v1.2.3-70-g09d2