1 files changed, 139 insertions, 0 deletions
diff --git a/client/app.js b/client/app.js
new file mode 100644
index 0000000..b1c5eb4
--- /dev/null
+++ b/client/app.js
@@ -0,0 +1,139 @@
+import React, { Component } from 'react'
+
+import UploadImage from './lib/uploadImage.component'
+import { post } from './util'
+
+const initialState = {
+  image: null,
+  url: "",
+  res: null,
+  loading: false,
+}
+
+export default class PhashApp extends Component {
+  state = { ...initialState }
+
+  upload(blob) {
+    if (this.state.image) {
+      URL.revokeObjectURL(this.state.image)
+    }
+    const url = URL.createObjectURL(blob)
+    this.setState({ image: url, loading: true })
+
+    const fd = new FormData()
+    fd.append('q', blob)
+    post('/api/v1/match', fd)
+    .then(res => {
+      console.log(res)
+      this.setState({ res, loading: false })
+    })
+    .catch(err => {
+      console.log(err)
+      this.setState({ loading: false })
+    })
+  }
+
+  submit() {
+    const { url } = this.state
+    if (!url || url.indexOf('http') !== 0) return
+    this.setState({ image: url, loading: true })
+
+    const fd = new FormData()
+    fd.append('url', url)
+    post('/api/v1/match', fd)
+    .then(res => {
+      console.log(res)
+      this.setState({ res, loading: false })
+    })
+    .catch(err => {
+      console.log(err)
+      this.setState({ loading: false })
+    })
+  }
+
+  render() {
+    return (
+      <div className='app'>
+        <h1>Search by Image</h1>
+        {this.renderQuery()}
+        {this.renderResults()}
+      </div>
+    )
+  }
+
+  renderQuery() {
+    const { image } = this.state
+    const style = {}
+    if (image) {
+      style.backgroundImage = 'url(' + image + ')'
+      style.backgroundSize = 'cover'
+      style.opacity = 1
+    }
+    return (
+      <div className='query'>
+        <label>
+          <span>Query image</span>
+          <UploadImage onUpload={this.upload.bind(this)} />
+        </label>
+        <br />
+        <label>
+          <span>Add a URL</span>
+          <input
+            type='text'
+            value={this.state.url}
+            onChange={e => this.setState({ url: e.target.value })}
+            onKeyDown={e => e.keyCode === 13 && this.submit()}
+            placeholder='https://'
+          />
+        </label>
+        {image && <div style={style} />}
+      </div>
+    )
+  }
+  renderResults() {
+    const { loading, res } = this.state
+    if (!res) {
+      return (
+        <div className='results'>
+        </div>
+      )
+    }
+    if (loading) {
+      return (
+        <div className='results'>
+          <i>Loading...</i>
+        </div>
+      )
+    }
+
+    const { success, error, match, matches } = 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'>
+        {matches.map(({ phash, score, sha256, url }) => (
+          <div className='result'>
+            <img src={url} /><br />
+            Match: {sha256}<br />
+            Score: {score}<br />
+            Phash: {phash.toString(16)}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+\ No newline at end of file