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 (
);
}
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);