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 +++++++++++++++++++---------------
 client/components/results.component.js | 40 +++++++++++++++---
 2 files changed, 78 insertions(+), 37 deletions(-)

(limited to 'client/components')

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),
 })
diff --git a/client/components/results.component.js b/client/components/results.component.js
index 6332135..ac028d2 100644
--- a/client/components/results.component.js
+++ b/client/components/results.component.js
@@ -1,7 +1,11 @@
 import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-function Results({ loading, success, error, match, results }) {
+import * as actions from '../actions'
+import * as types from '../types'
+
+function Results({ actions, loading, success, error, match, results, added }) {
   if (!success && !error) {
     return (
       <div className='results'>
@@ -17,9 +21,10 @@ function Results({ loading, success, error, match, results }) {
   }
 
   if (error) {
+    console.log(error)
     return (
       <div className='results'>
-        <b>Error: {error.replace(/_/g, ' ')}</b>
+        <b>Error: {typeof error == 'string' ? error.replace(/_/g, ' ') : 'Server error'}</b>
       </div>
     )
   }
@@ -27,7 +32,10 @@ function Results({ loading, success, error, match, results }) {
   if (!match) {
     return (
       <div className='results'>
-        No match, image added to database
+        {added
+          ? "New image! Added URL to database"
+          : "No match found"
+        }
       </div>
     )
   }
@@ -36,7 +44,26 @@ function Results({ loading, success, error, match, results }) {
     <div className='results'>
       {results.map(({ phash, score, sha256, url }) => (
         <div className='result' key={sha256}>
-          <div className='img'><img src={url} /></div>
+          <div className='img'>
+            <img
+              src={url}
+              onClick={() => {
+                let searchURL = url
+                if (searchURL.indexOf('http') !== 0) {
+                  searchURL = window.location.origin + searchURL
+                }
+                actions.similar(searchURL, types.SIMILAR_THRESHOLD)
+                actions.updateQuery({
+                  image: url,
+                  blob: null,
+                  searchType: 'url',
+                  thresholdChanged: false,
+                  saveIfNotFound: false,
+                  threshold: types.SIMILAR_THRESHOLD,
+                })
+              }}
+            />
+          </div>
           <br />
           {score == 0
             ? <span className='score'><b>Exact match</b></span>
@@ -51,5 +78,8 @@ function Results({ loading, success, error, match, results }) {
 }
 
 const mapStateToProps = state => (state.api.similar || {})
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
 
-export default connect(mapStateToProps)(Results)
+export default connect(mapStateToProps, mapDispatchToProps)(Results)
-- 
cgit v1.2.3-70-g09d2