From 810dbf4859b6c45f9a8446017cce462448fe1fe2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 6 Jun 2020 20:07:16 +0200
Subject: editing tiles

---
 frontend/views/page/components/page.editor.js |  2 +-
 frontend/views/page/components/tile.edit.js   | 23 ++++++++----
 frontend/views/page/components/tile.list.js   | 50 +++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 13 deletions(-)

(limited to 'frontend/views/page/components')

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 38f74ea..81dd08c 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -168,7 +168,7 @@ class PageEditor extends Component {
     return (    
       <div className='page' ref={this.pageRef}>
         {res.tiles.map(tile => {
-          if (temporaryTile && temporaryTile.id === tile) {
+          if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
           }
           return (
diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
index 4943c10..cb339c9 100644
--- a/frontend/views/page/components/tile.edit.js
+++ b/frontend/views/page/components/tile.edit.js
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 // import { history } from '../../../store'
 import actions from '../../../actions'
+import * as pageActions from '../../page/page.actions'
 import * as tileActions from '../../tile/tile.actions'
 
 import { Loader } from '../../../common'
@@ -12,24 +13,33 @@ import { Loader } from '../../../common'
 import TileForm from '../components/tile.form'
 
 class TileEdit extends Component {
+  state = {
+    tile: null
+  }
   componentDidMount() {
-    console.log(this.props.match.params.id)
-    actions.tile.show(this.props.match.params.id)
+    const { currentEditTileId } = this.props.page.editor
+    const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0]
+    console.log('edit', currentEditTileId)
+    this.setState({ tile })
+    // actions.tile.show(this.props.match.params.id)
   }
 
   handleSubmit(data) {
     actions.tile.update(data)
       .then(response => {
         // response
-        console.log(response)
+        // console.log(response)
+        if (response.status === 'ok') {
+          this.props.pageActions.updatePageTile(response.res)
+        }
         this.props.pageActions.hideEditTileForm()
         this.props.tileActions.clearTemporaryTile()
       })
   }
 
   render() {
-    const { show } = this.props.tile
-    if (show.loading || !show.res) {
+    const { tile } = this.state
+    if (!tile) {
       return (
         <div className='form'>
           <Loader />
@@ -38,7 +48,7 @@ class TileEdit extends Component {
     }
     return (
       <TileForm
-        initialData={show.res}
+        initialData={tile}
         graph={this.props.graph.show.res}
         page={this.props.page.show.res}
         onSubmit={this.handleSubmit.bind(this)}
@@ -54,6 +64,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
   tileActions: bindActionCreators({ ...tileActions }, dispatch),
 })
 
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 1cdf4af..96025f7 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -8,10 +8,18 @@ import { ReactSortable } from "react-sortablejs"
 import * as tileActions from '../../tile/tile.actions'
 import * as pageActions from '../../page/page.actions'
 
+const DOUBLE_CLICK_THRESHOLD = 250
+
 class TileList extends Component {
   state = {
     tiles: [],
+    didDoubleClick: false,
+    lastTargetId: 0,
+    lastTimeStamp: 0,
   }
+  
+  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
+  didDoubleClick = false
 
   componentDidMount(prevProps) {
     const { tiles } = this.props.page.show.res
@@ -19,19 +27,49 @@ class TileList extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { tiles } = this.state
-    if (tiles !== prevState.tiles) {
-      this.props.pageActions.setTileSortOrder(tiles, this.props.page.show.res.tiles)
+    const { tiles, didDoubleClick } = this.state
+    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
+      this.props.pageActions.setTileSortOrder(tiles)
+    }
+    if (didDoubleClick) {
+      this.setState({ didDoubleClick: false })
+    }
+  }
+
+  componentWillUnmount() {
+    console.log('will unmount', this.state)
+  }
+
+  handleChoose(e) {
+    const { lastTargetId, lastTimeStamp } = this.state
+    if (lastTimeStamp
+      && parseInt(e.item.dataset.id) === lastTargetId
+      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
+      ) {
+      console.log('selected', lastTargetId)
+      this.didDoubleClick = true
+      this.props.pageActions.showEditTileForm(lastTargetId)
+    } else {
+      this.setState({
+        lastTargetId: parseInt(e.item.dataset.id),
+        lastTimeStamp: e.timeStamp,
+      })
     }
   }
 
+  handleUpdate(newTiles) {
+    if (this.didDoubleClick) return
+    this.setState({ tiles: newTiles })
+  }
+
   render() {
     const { tiles } = this.state
     return (
       <div className='box tileList'>
         <ReactSortable
           list={tiles}
-          setList={newTiles => this.setState({ tiles: newTiles })}
+          setList={newTiles => this.handleUpdate(newTiles)}
+          onChoose={e => this.handleChoose(e)}
         >
           {tiles.map(tile => (
             tile.type === 'image'
@@ -45,13 +83,13 @@ class TileList extends Component {
 }
 
 const TileListImage = ({ tile }) => (
-  <div className='row'>
+  <div className='row' data-id={tile.id}>
     <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
   </div>
 )
 
 const TileListText = ({ tile }) => (
-  <div className='row'>
+  <div className='row' data-id={tile.id}>
     <span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
   </div>
 )
-- 
cgit v1.2.3-70-g09d2