added board editor form

src/actions/actionTypes.js

@@ -1,2 +1,3 @@
 
-export const ADD_POST = 'ADD_POST'
+export const ADD_POST = 'ADD_POST'
+export const CREATE_BOARD = 'CREATE_BOARD'

src/actions/board.js

@@ -0,0 +1,8 @@
+import { CREATE_BOARD } from './actionTypes'
+
+export function createBoard(board) {
+    return {
+        type: CREATE_BOARD,
+        board
+    }
+}

src/components/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom';
 import Boards from '../containers/Boards'
 import PostEditor from '../containers/PostEditor'
+import BoardEditor from '../containers/BoardEditor'
 import 'semantic-ui-css/semantic.css'
 
 class App extends Component {
@@ -9,6 +10,7 @@ class App extends Component {
     return (
       <Switch>
         <Route path='/p/new' component={PostEditor} />
+        <Route path='/b/new' component={BoardEditor} />
         <Route path='/' component={Boards} />
       </Switch>
     );

src/components/BoardForm.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { Form, Button } from 'semantic-ui-react'
+
+export default class BoardForm extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            title: props.title || ''
+        }
+    }
+
+    updateTitle(event) {
+        this.setState({ title: event.target.value })
+    }
+
+    render() {
+        const { title, content } = this.state
+        const { onSave } = this.props
+        return <Form>
+            <Form.Field>
+                <label>Title</label>
+                <input
+                    placeholder="What's this board about?"
+                    value={title}
+                    onChange={this.updateTitle.bind(this)}
+                />
+            </Form.Field>
+            <Button
+                type='submit'
+                onClick={() => onSave({ title, content })}
+            >Create</Button>
+        </Form>
+    }
+}

src/components/Boards.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import { List } from 'semantic-ui-react'
 import BoardsItem from './BoardsItem'
+import { Button } from 'semantic-ui-react'
 
-export default function Boards({ boards }) {
+export default function Boards({ boards, createBoard }) {
     return <List divided relaxed>
         {boards.map(board => <BoardsItem {...board} />)}
+        <Button onClick={createBoard}>New Board</Button>
     </List>
 }

src/components/PostForm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Form, Button } from 'semantic-ui-react'
 
-export default class PostEditor extends Component {
+export default class PostForm extends Component {
     constructor(props){
         super(props)
         this.state = {

src/containers/BoardEditor.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import BoardForm from '../components/BoardForm'
+import { createBoard } from '../actions/board'
+
+function BoardEditor({ board, createBoard }) {
+    return <BoardForm board={board} onSave={createBoard} />
+}
+
+function mapStateToProps(state){
+    return {
+        board: state.boardEditor.board
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        createBoard: board => dispatch(createBoard(board))
+    }
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(BoardEditor)

src/containers/Boards.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
 import BoardsComponent from '../components/Boards'
 
-function Boards({ boards }) {
+function Boards({ boards, createBoard }) {
-    return <BoardsComponent boards={boards} />
+    return <BoardsComponent boards={boards} createBoard={createBoard} />
 }
 
 function mapStateToProps(state){
@@ -14,7 +15,7 @@ function mapStateToProps(state){
 
 function mapDispatchToProps(dispatch){
     return {
-        
+       createBoard: () => dispatch(push('/b/new')) 
     }
 }
 

src/reducers/boardEditor.js

@@ -0,0 +1,18 @@
+import { CREATE_BOARD } from '../actions/actionTypes'
+
+function getInitialState() {
+    return {
+        board: {
+            title: ''
+        }
+    }
+}
+
+export default function BoardEditorReducer(state = getInitialState(), action) {
+    switch (action.type) {
+        case CREATE_BOARD:
+            return Object.assign({}, state, { board: action.board })
+        default:
+            return state
+    }
+}

src/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
 import postReducer from './post'
 import boardsReducer from './boards'
+import boardEditorReducer from './boardEditor'
 
 export default combineReducers({
     postEditor: postReducer,
-    boards: boardsReducer
+    boards: boardsReducer,
+    boardEditor: boardEditorReducer
 })