debounce tile sort order

5 files changed, 16 insertions, 14 deletions

diff --git a/frontend/store.js b/frontend/store.js
index 9af2b96..e72c54e 100644
--- a/frontend/store.js
+++ b/frontend/store.js
@@ -1,7 +1,7 @@
 import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import { createBrowserHistory } from 'history'
-import createDebounce from 'redux-debounced';
+// import createDebounce from 'redux-debounced'
 import thunk from 'redux-thunk'
 // import { login } from './util'
 
@@ -34,7 +34,7 @@ const configureStore = (initialState = {}, history) => {
     composeEnhancers(
       applyMiddleware(
         thunk,
-        createDebounce(),
+        // createDebounce(),
         routerMiddleware(history)
       ),
     ),
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 232516d..1cdf4af 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -16,16 +16,12 @@ class TileList extends Component {
   componentDidMount(prevProps) {
     const { tiles } = this.props.page.show.res
     this.setState({ tiles })
-    // this.props.pageActions.setTileSortOrder(list)
   }
 
   componentDidUpdate(prevProps, prevState) {
     const { tiles } = this.state
-    const { tiles: oldTiles } = prevState
-    // const { tiles } = this.props.page.show.res
-    // const { tiles: oldTiles } = prevProps.page.show.res
-    if (tiles !== oldTiles) {
-      this.props.pageActions.setTileSortOrder(tiles)
+    if (tiles !== prevState.tiles) {
+      this.props.pageActions.setTileSortOrder(tiles, this.props.page.show.res.tiles)
     }
   }
 
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index dd94936..c382081 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -1,6 +1,7 @@
 import * as types from '../../types'
 import { store } from '../../store'
 import actions from '../../actions'
+import { default as debounce } from 'lodash.debounce'
 
 export const showAddTileForm = () => dispatch => {
   dispatch({ type: types.page.show_add_tile_form })
@@ -66,12 +67,13 @@ export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
   })
 )
 
-export const setTileSortOrder = tiles => dispatch => {
+export const setTileSortOrder = (tiles, oldTiles) => dispatch => {
   dispatch({ type: types.page.set_tile_sort_order, tiles })
-  updateTileSortOrder(tiles)(dispatch)
-}
-
-export const updateTileSortOrder = tiles => dispatch => {
-
+  updateTileSortOrder(tiles, oldTiles)
 }
 
+export const updateTileSortOrder = debounce((tiles, oldTiles) => {
+  if (tiles !== oldTiles) {
+    console.log('update tile sort order')
+  }
+}, 1000)
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index d828b82..7794254 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -35,6 +35,9 @@
   margin-bottom: 0.5rem;
   box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
 }
+.tileList .row:last-child {
+  margin-bottom: 0;
+}
 .tileList .row:nth-child(odd) {
   background: rgba(0,0,0,0.2);
 }
diff --git a/package.json b/package.json
index b3cfada..33456c3 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "fetch-jsonp": "^1.1.3",
     "file-saver": "^2.0.2",
     "history": "^4.10.1",
+    "lodash.debounce": "^4.0.8",
     "node-fetch": "^2.6.0",
     "preact": "^10.3.3",
     "preact-compat": "^3.19.0",