Sidebar: add board. WIP

src/client/components/sidebar.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { Board } from "../board"
+import { Mutator } from "../mutator"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
+	mutator: Mutator
 	workspaceTree: WorkspaceTree
 }
 
@@ -14,14 +16,20 @@ class Sidebar extends React.Component<Props> {
 
 		return (
 			<div className="octo-sidebar">
-				{ boards.map(board => {
-					const displayTitle = board.title || "(Untitled Board)"
-					return (
-						<div className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
-							{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
-						</div>
-					)
-				})}
+				{
+					boards.map(board => {
+						const displayTitle = board.title || "(Untitled Board)"
+						return (
+							<div key={board.id} className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
+								{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
+							</div>
+						)
+					})
+				}
+
+				<br />
+
+				<div className="octo-button" onClick={() => { this.addBoardClicked() }}>+ Add Board</div>
 			</div>
 		)
 	}
@@ -29,6 +37,13 @@ class Sidebar extends React.Component<Props> {
 	private boardClicked(board: Board) {
 		// TODO
 	}
+
+	async addBoardClicked() {
+		const { mutator } = this.props
+
+		const board = new Board()
+		await mutator.insertBlock(board)
+	}
 }
 
 export { Sidebar }

src/client/components/workspaceComponent.tsx

@@ -17,9 +17,11 @@ type Props = {
 
 class WorkspaceComponent extends React.Component<Props> {
 	render() {
+		const { mutator, workspaceTree } = this.props
+
 		const element =
 			<div className="octo-workspace">
-				<Sidebar workspaceTree={this.props.workspaceTree}></Sidebar>
+				<Sidebar mutator={mutator} workspaceTree={workspaceTree}></Sidebar>
 				{this.mainComponent()}
 			</div>