finished

components/Board.jsx

@@ -1,9 +1,135 @@
 import React from 'react';
+import NewListForm from './NewListForm';
+import List from './List';
+import Lists from './Lists';
 
-export default class Board extends React.Component {
-    render() {
-        return (
-            <div>Board!</div>
-        );
+function insertCard(lists, listName, cardName) {
+  return lists.map((l)=> {
+    if (l.name === listName) {
+      return { ...l, cards: l.cards.concat(cardName)};
+    }
+    return l;
+  });
+}
+
+function deleteCard(lists, listName, cardName) {
+  return lists.map((l)=> {
+    if (l.name === listName) {
+      return { ...l, cards: l.cards.filter((c) => c === cardName ? false : true) };
+    }
+    return l;
+  });
+}
+
+function renameCard(lists, listName, newCardName, oldCardName) {
+  return lists.map((l)=> {
+    if (l.name === listName) {
+      return { ...l,
+        cards: l.cards.map((c) => {
+          if (c === oldCardName) {
+            return newCardName;
+          }
+          return c;
+        })
+      };
+    }
+    return l;
+  });
+}
+
+function renameList(lists, newName, oldName) {
+  return lists.map((l)=> {
+    if (l.name === oldName) {
+      return { ...l, name: newName };
     }
+    return l;
+  });
+}
+
+export default class Board extends React.Component {
+  state = {
+    lists: [],
+    pageNum: 0,
+    offset: 4,
+    maxPages: 0,
+  }
+
+  onNewList = listName => {
+    this.setState({
+      lists: this.state.lists.concat({name: listName, cards: []}),
+      maxPages: this.maxCountPages()
+    })
+  }
+
+  onDeleteList = listName => {
+    this.setState({
+      lists: this.state.lists.filter((l) => {
+        if (l.name === listName) {
+          return false;
+        }
+        return true;
+      })
+    })
+  }
+
+  onNewCard = (listName, cardName) => {
+    this.setState({
+      lists: insertCard(this.state.lists, listName, cardName)
+    })
+  }
+
+  onDeleteCard = (listName, cardName) => {
+    this.setState({
+      lists: deleteCard(this.state.lists, listName, cardName)
+    })
+  }
+
+  onRenameCard = (listName, newCardName, oldCardName) => {
+    this.setState({
+      lists: renameCard(this.state.lists, listName, newCardName, oldCardName),
+    })
+  }
+
+  onRenameList = (newName, oldName) => {
+    this.setState({
+      lists: renameList(this.state.lists, newName, oldName)
+    })
+  }
+
+  maxCountPages = () => {
+    return Math.floor(this.state.lists.length / 4);
+  }
+
+  onPrevPageClick = () => {
+    this.setState({
+      pageNum: this.state.pageNum <= 0 ? 0 : this.state.pageNum - 1,
+    })
+  }
+
+  onNextPageClick = () => {
+    this.setState({
+      pageNum: this.state.maxPages >= this.state.pageNum ? this.state.pageNum + 1 : this.state.pageNum,
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <NewListForm onNewList={this.onNewList}></NewListForm>
+        <Lists
+          lists={this.state.lists}
+          pageNum={this.state.pageNum}
+          offset={this.state.offset}
+          onNewCard={this.onNewCard}
+          onDeleteList={this.onDeleteList}
+          onRenameList={this.onRenameList}
+          onDeleteCard={this.onDeleteCard}
+          maxPages={this.state.maxPages}
+          onNextPageClick={this.onNextPageClick}
+          onRenameCard={this.onRenameCard}
+          onPrevPageClick={this.onPrevPageClick}>
+        </Lists>
+      </div>
+    );
+  }
 }

components/Button.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Button = ({onClick, children}) => (
+   <input type="submit" onClick={onClick} value={children}/>
+);
+
+export default Button;

components/Card.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Input from './Input';
+import Button from './Button';
+
+export default class Card extends React.Component {
+  state = {
+    cardNameChanged: ''
+  }
+
+  onDeleteCard = () => {
+    this.props.onDeleteCardinList(this.props.name);
+  }
+
+  onRenameCardNameChanged = (e) => {
+    this.setState({
+        cardNameChanged: e.target.value,
+    });
+  }
+
+  onRenameCard = () => {
+    this.props.onRenameCardinList(this.state.cardNameChanged, this.props.name);
+  }
+
+  render() {
+    return (
+      <div style={{backgroundColor: '#b7b7b7'}}>
+      <div>
+        <h3>{this.props.name}</h3>
+        <Button onClick={this.onDeleteCard}>Delete Card</Button>
+      </div>
+      <Input onChange={this.onRenameCardNameChanged} value={this.props.name}/>
+      <Button onClick={this.onRenameCard}>Rename Task</Button>
+      </div>
+    )
+  }
+}

components/Input.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class Input extends React.Component {
+  render() {
+    return (
+      <input type="text" onChange={this.props.onChange} value={this.props.children} />
+    )
+  }
+}

components/List.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Card from './Card';
+import Input from './Input';
+import Button from './Button';
+
+export default class List extends React.Component {
+  state = {
+    newCardName: '',
+    listNameChanged: ''
+  }
+
+  onNewCardNameChanged = (e) => {
+    this.setState({
+        newCardName: e.target.value,
+    });
+  }
+
+  onDeleteList = () => {
+    this.props.onDeleteList(this.props.name);
+  }
+
+  onRenameListNameChanged = (e) => {
+    this.setState({
+        listNameChanged: e.target.value,
+    });
+  }
+
+  onRenameList = () => {
+    this.props.onRenameList(this.state.listNameChanged, this.props.name);
+  }
+
+  onCreateNewCard = () => {
+    this.props.onNewCard(this.props.name, this.state.newCardName);
+  }
+
+  onDeleteCard = (cardName) => {
+    this.props.onDeleteCard(this.props.name, cardName);
+  }
+
+  onRenameCard = (newCardName, oldCardName) => {
+    this.props.onRenameCard(this.props.name, newCardName, oldCardName);
+  }
+
+  render() {
+    const listStyle = {
+      padding: '2%',
+      width: '23%',
+      backgroundColor: '#e6e6e6',
+      marginLeft: '2%',
+      float: 'left',
+      listStyle: 'none'
+    }
+    let cards = null;
+    if (this.props.cards)
+     cards = this.props.cards.map(c => (<Card key={c} name={c}
+       onDeleteCardinList={this.onDeleteCard} onRenameCardinList={this.onRenameCard}/>) );
+    return (
+      <li style={listStyle}>
+        <div>
+          <h1>{this.props.name}</h1>
+          <Button onClick={this.onDeleteList}>Delete List</Button>
+        </div>
+        <div>
+          <Input onChange={this.onRenameListNameChanged} value={this.state.listNameChanged}/>
+          <Button onClick={this.onRenameList}>Rename List</Button>
+        </div>
+        <Input onChange={this.onNewCardNameChanged} value={this.state.newCardName}/>
+        <Button onClick={this.onCreateNewCard}>Add Task</Button>
+        {cards}
+      </li>
+    )
+  }
+}

components/Lists.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import List from './List';
+import Button from './Button';
+
+export default class Lists extends React.Component  {
+  onPrevPageClick = () => {
+    this.props.onPrevPageClick();
+  }
+
+  onNextPageClick = () => {
+    this.props.onNextPageClick();
+  }
+
+  render() {
+    const listsStyle = {
+
+    };
+    const paginationItemStyle = {
+      display: 'inline-block',
+      margin: '10%'
+    };
+    const paginationStyle = {
+      border: '1px dashed gray',
+      width: '8%',
+      padding: '0 1%',
+      marginTop: '1%'
+    };
+    const pageNum = this.props.pageNum;
+    const offset = this.props.offset;
+
+    return (
+      <div>
+        <div style={paginationStyle}>
+          <Button style={paginationItemStyle} onClick={this.onPrevPageClick}>Prev</Button>
+          <h4 style={paginationItemStyle}>{pageNum + 1}...{this.props.maxPages + 1}</h4>
+          <Button style={paginationItemStyle} onClick={this.onNextPageClick}>Next</Button>
+        </div>
+        <ul style={listsStyle}>
+          {this.props.lists.map((l, i) => {
+            if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) {
+              return (<List
+                key={l.name}
+                name={l.name}
+                onNewCard={this.props.onNewCard}
+                onDeleteList={this.props.onDeleteList}
+                onRenameList={this.props.onRenameList}
+                onDeleteCard={this.props.onDeleteCard}
+                onRenameCard={this.props.onRenameCard}
+                cards={l.cards}/>)
+            }
+          })}
+        </ul>
+      </div>
+    );
+  }
+}

components/NewListForm.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Input from './Input';
+import Button from './Button';
+
+export default class NewListForm extends React.Component {
+  state = {
+    newListName: '',
+  }
+
+  onNewListNameChanged = (e) => {
+    this.setState({
+        newListName: e.target.value,
+    });
+  }
+
+  onCreateNewList = () => {
+    this.props.onNewList(this.state.newListName)
+  }
+
+  render() {
+    return (
+      <div>
+        <Input onChange={this.onNewListNameChanged} value={this.state.newListName} />
+        <Button onClick={this.onCreateNewList}>Add List</Button>
+      </div>
+    )
+  }
+}

package.json

@@ -5,16 +5,19 @@
   "main": "webpack.config.js",
   "scripts": {
     "start": "http-server",
-    "build": "webpack ./webpack.config.js"
+    "build": "webpack ./webpack.config.js",
+    "watch": "webpack ./webpack.config.js --color --watch"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.5.0",
+    "extract-text-webpack-plugin": "^1.0.1",
     "http-server": "^0.9.0",
     "webpack": "^1.13.1"
   },
@@ -23,10 +26,15 @@
       "react",
       "stage-1",
       "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
   },
   "dependencies": {
+    "css-loader": "^0.23.1",
     "react": "^15.2.1",
-    "react-dom": "^15.2.1"
+    "react-dom": "^15.2.1",
+    "style-loader": "^0.13.1"
   }
 }