From 434e53dea597f61ad59e14012f528ceac58ead85 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 6 Jun 2020 16:30:51 +0200
Subject: tile list. drag items to sort them

---
 frontend/views/page/components/tile.list.js | 73 +++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/views/page/components/tile.list.js

(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
new file mode 100644
index 0000000..232516d
--- /dev/null
+++ b/frontend/views/page/components/tile.list.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactSortable } from "react-sortablejs"
+
+// import actions from '../../../actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+class TileList extends Component {
+  state = {
+    tiles: [],
+  }
+
+  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)
+    }
+  }
+
+  render() {
+    const { tiles } = this.state
+    return (
+      <div className='box tileList'>
+        <ReactSortable
+          list={tiles}
+          setList={newTiles => this.setState({ tiles: newTiles })}
+        >
+          {tiles.map(tile => (
+            tile.type === 'image'
+            ? <TileListImage key={tile.id} tile={tile} />
+            : <TileListText key={tile.id} tile={tile} />
+          ))}
+        </ReactSortable>
+      </div>
+    )
+  }
+}
+
+const TileListImage = ({ tile }) => (
+  <div className='row'>
+    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
+  </div>
+)
+
+const TileListText = ({ tile }) => (
+  <div className='row'>
+    <span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileList)
-- 
cgit v1.2.3-70-g09d2