summaryrefslogtreecommitdiff
path: root/frontend/views/page/components/tile.list.js
blob: 232516d180bb8db2e7a5b55201a724151b24a7e8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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)