summaryrefslogtreecommitdiff
path: root/frontend/views/page/components/tile.list.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/views/page/components/tile.list.js')
-rw-r--r--frontend/views/page/components/tile.list.js142
1 files changed, 0 insertions, 142 deletions
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
deleted file mode 100644
index 7e4f650..0000000
--- a/frontend/views/page/components/tile.list.js
+++ /dev/null
@@ -1,142 +0,0 @@
-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'
-
-const DOUBLE_CLICK_THRESHOLD = 250
-
-class TileList extends Component {
- state = {
- tiles: [],
- 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
- const { pages } = this.props.graph.show.res
- const pageTitles = pages.reduce((a,b) => {
- a[b.id] = b.title
- return a
- }, {})
- this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (this.didDoubleClick) return
- const { tiles } = this.state
- if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
- this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
- }
- // since we store the full tiles here (reversed!), they might change from under us
- // potentially later refactor to only use a sort order / lookup
- else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
- const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
- a[b.id] = b
- return a
- }, {})
- const newTiles = this.state.tiles.map(tile => {
- return tileLookup[tile.id]
- })
- this.setState({ tiles: newTiles })
- }
- }
-
- 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, pageTitles } = this.state
- return (
- <div className='box tileList'>
- <ReactSortable
- list={tiles}
- setList={newTiles => this.handleUpdate(newTiles)}
- onChoose={e => this.handleChoose(e)}
- >
- {tiles.map(tile => (
- tile.type === 'image'
- ? <TileListImage key={tile.id} tile={tile} />
- : tile.type === 'text'
- ? <TileListText key={tile.id} tile={tile} />
- : tile.type === 'link'
- ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
- : <TileListMisc key={tile.id} tile={tile} />
- ))}
- </ReactSortable>
- </div>
- )
- }
-}
-
-const TileListImage = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
- </div>
-)
-
-const TileListText = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
- </div>
-)
-
-const TileListLink = ({ tile, pageTitles }) => (
- <div className='row link' data-id={tile.id}>
- <span className='snippet'>
- {'Link: '}
- {tile.target_page_id === -1
- ? 'External'
- : !tile.target_page_id
- ? 'No link specified!'
- : tile.target_page_id in pageTitles
- ? pageTitles[tile.target_page_id]
- : 'Error, broken link!'}
- </span>
- </div>
-)
-
-const TileListMisc = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <span className='snippet'>{"Tile: "}{tile.type}</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)