Base générale d'UI

client/src/components/HomePage/HomePage.jsx

@@ -1,12 +1,76 @@
 import React from 'react';
 import { Page } from '../Page';
+import { BoardCard } from './BoardCard';
+import { connect } from 'react-redux';
+import { fetchBoards } from '../../store/actions/boards';
 
 export class HomePage extends React.Component {
   render() {
     return (
       <Page>
-
+        <div className="container is-fluid">
+          <div className="level">
+            <div className="level-left"></div>
+            <div className="level-right">
+              <div className="buttons">
+                <a className="button is-primary" href="#/boards/new">
+                  <span className="icon">
+                    <i className="fas fa-plus"></i>
+                  </span>
+                  <span>Nouveau tableau</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          { this.renderBoards() }
+        </div>
       </Page>
     );
   }
-}
+
+  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 (
+            <div key={`board-${board.id}`} className={`tile is-parent is-4`}>
+              <div className="tile is-child">
+                <BoardCard board={board} />
+              </div>
+            </div>
+          );
+        });
+        return (
+          <div key={`boards-row-${rowIndex}`} className="tile">
+            {tiles}
+          </div>
+        );
+      });
+    ;
+
+    return (
+      <div className="tile is-ancestor is-vertical">
+        { rows }
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    this.props.dispatch(fetchBoards());
+  }
+
+}
+
+export const ConnectedHomePage = connect(function(state) {
+  return {
+    boards: state.boards.byID,
+  };
+})(HomePage);