refactor frontend, add threshold slider

1 files changed, 56 insertions, 0 deletions

diff --git a/client/components/results.component.js b/client/components/results.component.js
new file mode 100644
index 0000000..a6f3052
--- /dev/null
+++ b/client/components/results.component.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+function Results({ loading, res }) {
+  if (!res) {
+    return (
+      <div className='results'>
+      </div>
+    )
+  }
+  if (loading) {
+    return (
+      <div className='results'>
+        <i>Loading...</i>
+      </div>
+    )
+  }
+
+  const { success, error, match, results } = res
+  if (!success) {
+    return (
+      <div className='results'>
+        <b>Error: {error.replace(/_/g, ' ')}</b>
+      </div>
+    )
+  }
+
+  if (!match) {
+    return (
+      <div className='results'>
+        No match, image added to database
+      </div>
+    )
+  }
+
+  return (
+    <div className='results'>
+      {results.map(({ phash, score, sha256, url }) => (
+        <div className='result' key={sha256}>
+          <div className='img'><img src={url} /></div>
+          <br />
+          {score == 0
+            ? <span className='score'><b>Exact match</b></span>
+            : <span className='score'>Score: {score}</span>
+          }<br />
+          <span className='sha256'>{sha256}</span>
+          Phash: {phash.toString(16)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const mapStateToProps = state => state.api
+
+export default connect(mapStateToProps)(Results)