editing tiles

5 files changed, 88 insertions, 20 deletions

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>
 )
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index c382081..255275f 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -15,8 +15,8 @@ export const toggleAddTileForm = () => dispatch => {
   dispatch({ type: types.page.toggle_add_tile_form })
 }
 
-export const showEditTileForm = () => dispatch => {
-  dispatch({ type: types.page.show_edit_tile_form })
+export const showEditTileForm = tile_id => dispatch => {
+  dispatch({ type: types.page.show_edit_tile_form, tile_id })
 }
 
 export const hideEditTileForm = () => dispatch => {
@@ -67,13 +67,24 @@ export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
   })
 )
 
-export const setTileSortOrder = (tiles, oldTiles) => dispatch => {
+export const setTileSortOrder = (tiles) => dispatch => {
   dispatch({ type: types.page.set_tile_sort_order, tiles })
-  updateTileSortOrder(tiles, oldTiles)
+  updateTileSortOrder(tiles)
 }
 
-export const updateTileSortOrder = debounce((tiles, oldTiles) => {
-  if (tiles !== oldTiles) {
-    console.log('update tile sort order')
+export const isSameTileOrder = (newTiles, oldTiles) => {
+  for (let i = 0; i < newTiles.length; i++) {
+    if (newTiles[i].id !== oldTiles[i].id) {
+      return false
+    }
   }
+  return true
+}
+
+export const updateTileSortOrder = debounce((tiles) => {
+  let oldTiles = store.getState().page.show.res.tiles
+  if (isSameTileOrder(tiles, oldTiles)) return
+  console.log('update tile sort order')
+  const newOrder = tiles.map((tile, i) => ({ id: tile.id, sort_order: i }))
+  console.log(newOrder)
 }, 1000)
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index 063e22d..82ea178 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -7,6 +7,7 @@ const initialState = crudState('page', {
   editor: {
     addingTile: false,
     editingTile: false,
+    currentEditTileId: 0,
     tileList: false,
   },
   options: {
@@ -58,6 +59,7 @@ export default function pageReducer(state = initialState, action) {
           ...state.editor,
           addingTile: true,
           editingTile: false,
+          tileList: false,
         }
       }
 
@@ -76,6 +78,8 @@ export default function pageReducer(state = initialState, action) {
         editor: {
           ...state.editor,
           addingTile: !state.editor.addingTile,
+          editingTile: false,
+          tileList: false,
         }
       }
 
@@ -87,6 +91,8 @@ export default function pageReducer(state = initialState, action) {
           ...state.editor,
           addingTile: false,
           editingTile: true,
+          currentEditTileId: action.tile_id,
+          tileList: false,
         }
       }
 
@@ -125,6 +131,8 @@ export default function pageReducer(state = initialState, action) {
         ...state,
         editor: {
           ...state.editor,
+          addingTile: false,
+          editingTile: false,
           tileList: !state.editor.tileList,
         }
       }