1 files changed, 32 insertions, 7 deletions

diff --git a/client/components/App.jsx b/client/components/App.jsx
index 841712b..5ab98cb 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -1,31 +1,56 @@
 import { h, Component } from 'preact'
 import { isMobile } from '../util'
 import db from '../db'
-import { Lethargy } from 'lethargy'
-import { Link } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom'
 
-import Scroller from './Scroller'
+import Scroller from './Scroller.jsx'
+import Details from './Details.jsx'
+import Modal from './Modal.jsx'
 
-export default class App extends Component {
-  constructor() {
+class App extends Component {
+  constructor(props) {
     super()
     this.state = {
       data: db.backupDB,
+      painting: null,
     }
     db.fetch( data => {
       document.body.parentNode.classList.remove('loading')
       this.setState({ data }) 
     })
   }
+  setIdFromLocation(props){
+    const id = props.location.pathname.split('/')[2]
+    if (id) {
+      this.setState({ painting: id })
+    }
+  }
+  componentWillMount(){
+    this.setIdFromLocation(this.props)
+  }
+  componentWillReceiveProps(props){
+    this.setIdFromLocation(props)
+  }
   render() {
+    let painting;
+    this.state.data.painting.some( (el) => {
+      if (el.id == this.state.painting) {
+        painting = el
+        return true
+      }
+      return false
+    })
     return (
       <div>
         <div class='header'>Procedural Paintings by Pepper</div>
         <Scroller data={this.state.data} />
+        <Modal visible={this.props.location.pathname !== '/'}>
+          <Details painting={painting} />
+        </Modal>
       </div>
     )
   }
 }
 
-//         <Modal visible={this.props.location !== '/'}>
-//         </Modal>
+
+export default withRouter(App)
\ No newline at end of file