From 32858022edf1142d2b05e98290d8cca9b6a8c87a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 21 Jun 2017 20:59:00 +0200
Subject: details page

---
 client/components/Details.jsx | 98 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 client/components/Details.jsx

(limited to 'client/components/Details.jsx')

diff --git a/client/components/Details.jsx b/client/components/Details.jsx
new file mode 100644
index 0000000..fff06e0
--- /dev/null
+++ b/client/components/Details.jsx
@@ -0,0 +1,98 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+export default class Details extends Component {
+  constructor(){
+    super()
+  }
+  onWheel(e){
+    e.stopPropagation()
+  }
+  render() {
+    const painting = this.props.painting
+    if (! painting) return
+    const source_images = findImages(painting.parameters)
+    const parameters = breakUpJSON(painting.parameters)
+    return (
+      <div class='details' onWheel={this.onWheel}>
+        <Link to="/">&lt; Go back</Link>
+        <h1>{painting.title}</h1>
+        <div class='stats'>
+          {painting.medium}<br/>
+          {painting.date}<br/>
+          {painting.image.caption}
+        </div>
+        <img src={painting.image.uri} />
+        {painting.originalImage &&
+          <div>
+            <h2>Original Image</h2>
+            <img src={painting.originalImage.uri} />
+          </div>
+        }
+        {painting.parameters &&
+          <div>
+            <h2>Creation Parameters</h2>
+            <div class='parameters'>
+              {parameters}
+            </div>
+            <h2>Source Images</h2>
+            {source_images}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+class PossiblyBadImage extends Component {
+  constructor(){
+    super()
+    this.state = { error: false }
+    this.onError = this.onError.bind(this)
+  }
+  onError(){
+    this.setState({ error: true })
+  }
+  render(){
+    if (this.state.error) return
+    return (
+      <img src={this.props.source} onError={this.onError} />
+    )
+  }
+}
+
+function findImages(s) {
+  s = s || ""
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  let match = urlRegex.exec(s);
+  let urls = []
+  let url;
+  let seen = {};
+  while (match != null) {
+    url = match[0].replace(/",?/,"")
+    if (url && ! seen[url]) {
+      seen[url] = true
+      urls.push(
+        <a href={url} key={url}>
+          <PossiblyBadImage
+            source={url}
+          />
+        </a>
+      )
+    }
+    match = urlRegex.exec(s);
+  }
+  return urls
+}
+
+function breakUpJSON(ss){
+  return (ss || '').split("} {").map( (s) => {
+    return (
+      <div>
+        {s}
+        <br/>
+        <br/>
+      </div>
+    )
+  })
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2