From 7791b885a64da8493ed55fa13aacd489cf7d3706 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 12:01:00 -0700
Subject: [PATCH] Sidebar: add board. WIP

---
 src/client/components/sidebar.tsx            | 31 +++++++++++++++-----
 src/client/components/workspaceComponent.tsx |  4 ++-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 1e004f29d..870cc6ee6 100644
--- a/src/client/components/sidebar.tsx
+++ b/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 }
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
index 5bbd04537..fff247acd 100644
--- a/src/client/components/workspaceComponent.tsx
+++ b/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>