import React from 'react'; import { Page } from '../Page'; import { BoardCard } from './BoardCard'; import { connect } from 'react-redux'; import { fetchBoards } from '../../store/actions/boards'; import { fetchProjects } from '../../store/actions/projects'; import { selectBoardByUserProjects } from '../../store/selectors/boards'; export class HomePage extends React.Component { render() { return (
Nouveau tableau
{ this.renderBoards() }
); } renderBoards() { const { boards } = this.props; const rows = Object.values(boards) .reduce((boardRows, board, index) => { if (index % 3 === 0) { boardRows.push([]); } boardRows[boardRows.length-1].push(board); return boardRows; }, []) .map((row, rowIndex) => { const tiles = row.map((board) => { return (
); }); return (
{tiles}
); }); ; return (
{ rows }
); } componentDidMount() { this.props.dispatch(fetchBoards()); this.props.dispatch(fetchProjects()); } } export const ConnectedHomePage = connect(function(state) { return { boards: selectBoardByUserProjects(state.boards.byID, state.projects.byName) }; })(HomePage);