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/results.component.js | 40 +++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

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

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