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/tile.list.js | 50 +++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

(limited to 'frontend/views/page/components/tile.list.js')

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