refactor

1 files changed, 7 insertions, 52 deletions

diff --git a/client/components/App.jsx b/client/components/App.jsx
index ae030c7..841712b 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -2,75 +2,30 @@ import { h, Component } from 'preact'
 import { isMobile } from '../util'
 import db from '../db'
 import { Lethargy } from 'lethargy'
+import { Link } from 'react-router-dom'
+
+import Scroller from './Scroller'
 
 export default class App extends Component {
   constructor() {
     super()
     this.state = {
-      index: 0,
       data: db.backupDB,
     }
-    this.lastScroll = Date.now()
-    this.onScroll = this.onScroll.bind(this)
-    this.lethargy = new Lethargy(8, 100, 1.1, 1000)
     db.fetch( data => {
       document.body.parentNode.classList.remove('loading')
       this.setState({ data }) 
     })
-//     document.body.addEventListener('mousewheel', this.onScroll)
-//     document.body.addEventListener('DOMMouseScroll', this.onScroll)
-    document.body.addEventListener('wheel', this.onScroll)
-  }
-  onScroll(e) {
-    e.preventDefault()
-    e.stopPropagation()
-    const scrollDirection = this.lethargy.check(e)
-    const now = Date.now()
-    if (scrollDirection !== false && now - this.lastScroll > 500) {
-      this.lastScroll = now
-      const cellCount = this.state.data.painting.length
-      const index = (this.state.index + cellCount - scrollDirection) % cellCount
-      this.setState({ index })
-    }
   }
   render() {
-    const paintings = this.state.data.painting.map( (painting, i) => {
-      return (
-        <div class='cell' key={i}>
-          <div class='painting'>
-            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
-          </div>
-          <div class='about'>
-            {painting.title}<br/>
-            {painting.medium}<br/>
-            {painting.date}<br/>
-            {painting.image.caption}<br/>
-          </div>
-        </div>
-      )
-    })
-    const about = this.state.data.page[0]
-    const body = (about.body || '').replace(/\n/g,'<br>')
-    const page = (
-      <div class='cell'>
-        <div class='painting'>
-          <div class='image' style={'background-image: url(' + about.image.uri + ')'} />
-        </div>
-        <div class='about' dangerouslySetInnerHTML={{ __html: body }}>
-        </div>
-      </div>
-    )
-    const scrollPercentage = this.state.index * -100
     return (
       <div>
         <div class='header'>Procedural Paintings by Pepper</div>
-        <div class='scroller'
-             style={'transform:translateY(' + scrollPercentage + 'vh)'}
-        >
-          {paintings}
-          {page}
-        </div>
+        <Scroller data={this.state.data} />
       </div>
     )
   }
 }
+
+//         <Modal visible={this.props.location !== '/'}>
+//         </Modal>