From 5bc358177769e82d4daca4f6e1d6ed0b59ebad51 Mon Sep 17 00:00:00 2001
From: Kostya Nesterovich <nesterovichke@gmail.com>
Date: Fri, 22 Jul 2016 15:55:01 +0300
Subject: [PATCH 1/2] add react task

---
 components/Board.jsx | 35 ++++++++++++++++++++++++++++++++-
 components/Card.jsx  | 18 +++++++++++++++++
 components/List.jsx  | 47 ++++++++++++++++++++++++++++++++++++++++++++
 index.html           |  1 +
 package.json         |  4 ++++
 style/style.css      | 22 +++++++++++++++++++++
 6 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 components/Card.jsx
 create mode 100644 components/List.jsx
 create mode 100644 style/style.css

diff --git a/components/Board.jsx b/components/Board.jsx
index e35ad4b..67c378d 100644
--- a/components/Board.jsx
+++ b/components/Board.jsx
@@ -1,9 +1,42 @@
 import React from 'react';
+import List from './List';
 
 export default class Board extends React.Component {
+    state = {
+        lists: [],
+        newListName: ''
+    }
+
+    addList = () => {
+        this.setState({
+            lists: this.state.lists.concat({listName: this.state.newListName}),
+            newListName: ''
+        });
+    };
+
+    onListChange = e => {
+        this.setState({
+          newListName: e.target.value
+        })
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    };
+
     render() {
+        let lists = [];
+        for (let i = 0; i < this.state.lists.length; i++) {
+            lists.push(< List listInfo = { this.state.lists[i] } />);
+        }
         return (
-            <div>Board!</div>
+            <div>
+                <form onSubmit={this.preventDefault} className='form'>
+                    <input type='text' onChange={this.onListChange} value={this.state.newListName}/>
+                    <button onClick={this.addList}>Add List</button>
+                </form>
+                { lists }
+            </div>
         );
     }
 }
diff --git a/components/Card.jsx b/components/Card.jsx
new file mode 100644
index 0000000..4879ba0
--- /dev/null
+++ b/components/Card.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+class Card extends React.Component {
+    state = {
+        task: this.props.cardInfo.task,
+    };
+
+
+    render() {
+        return (
+            <div className="card">
+                <p>{this.props.cardInfo.task}</p>
+            </div>
+        );
+    }
+}
+
+export default Card;
diff --git a/components/List.jsx b/components/List.jsx
new file mode 100644
index 0000000..a7fde80
--- /dev/null
+++ b/components/List.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Card from './Card';
+
+class List extends React.Component {
+    state = {
+        listName: this.props.listInfo.listName,
+        cards : [],
+        newTask: ''
+    };
+
+    addCard = () => {
+        this.setState({
+            cards: this.state.cards.concat({task: this.state.newTask}),
+            newTask: ''
+        });
+    };
+
+    onCardChange = e => {
+        this.setState({
+          newTask: e.target.value
+        })
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    };
+
+    render() {
+        let cards = [];
+        for (let i = 0; i < this.state.cards.length; i++) {
+            cards.push(< Card cardInfo = { this.state.cards[i] } />);
+        }
+        return (
+            <div className='list'>
+                <form onSubmit={this.preventDefault}>
+                    //<div onClick={this.removeList} className='remove'>x</div>
+                    <p>{this.props.listInfo.listName}</p>
+                    <input type='text' onChange={this.onCardChange} value={this.state.newTask}/>
+                    <button onClick={this.addCard}>Add Card</button>
+                </form>
+                { cards }
+            </div>
+        );
+    }
+}
+
+export default List;
diff --git a/index.html b/index.html
index 95760da..8eab94d 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Task Board</title>
+    <link rel="stylesheet" href="style/style.css">
 </head>
 
 <body>
diff --git a/package.json b/package.json
index 6e887d9..42064a1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "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",
@@ -23,6 +24,9 @@
       "react",
       "stage-1",
       "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
   },
   "dependencies": {
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..0151643
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,22 @@
+.list {
+    width: 300px;
+    float: left;
+    border: 1px solid #c7c4c4;
+    background: #d8d6d6;
+    padding: 5px;
+    color: #3c3939;
+    margin: 10px;
+}
+.card {
+    color: white;
+    margin-top: 5px;
+    background: #696565;
+    padding: 5px;
+}
+.card p {
+    margin: 0;
+}
+
+.form{
+      margin-left: 10px;
+}

From 6e5043cedb951f71223dac336defa9419b69ee84 Mon Sep 17 00:00:00 2001
From: Kostya Nesterovich <nesterovichke@gmail.com>
Date: Fri, 22 Jul 2016 16:40:20 +0300
Subject: [PATCH 2/2] add remove function

---
 components/Board.jsx | 10 +++++++++-
 components/Card.jsx  |  6 +++++-
 components/List.jsx  | 16 ++++++++++++++--
 style/style.css      |  8 ++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/components/Board.jsx b/components/Board.jsx
index 67c378d..3c26297 100644
--- a/components/Board.jsx
+++ b/components/Board.jsx
@@ -24,10 +24,18 @@ export default class Board extends React.Component {
         e.preventDefault();
     };
 
+    onRemoveList = i => {
+      this.setState({
+          lists: this.state.lists.filter((item,index) => {
+            return index != i;
+          }),
+      });
+    }
+
     render() {
         let lists = [];
         for (let i = 0; i < this.state.lists.length; i++) {
-            lists.push(< List listInfo = { this.state.lists[i] } />);
+            lists.push(< List listInfo = { this.state.lists[i] } removeList = {() => this.onRemoveList(i)}/>);
         }
         return (
             <div>
diff --git a/components/Card.jsx b/components/Card.jsx
index 4879ba0..6411e3f 100644
--- a/components/Card.jsx
+++ b/components/Card.jsx
@@ -2,13 +2,17 @@ import React from 'react';
 
 class Card extends React.Component {
     state = {
-        task: this.props.cardInfo.task,
+        task: this.props.cardInfo.task
     };
 
+    removeCard = () => {
+      this.props.removeCard();
+    }
 
     render() {
         return (
             <div className="card">
+                <div onClick={this.removeCard} className='remove'>x</div>
                 <p>{this.props.cardInfo.task}</p>
             </div>
         );
diff --git a/components/List.jsx b/components/List.jsx
index a7fde80..7b633c1 100644
--- a/components/List.jsx
+++ b/components/List.jsx
@@ -25,15 +25,27 @@ class List extends React.Component {
         e.preventDefault();
     };
 
+    removeList = () => {
+      this.props.removeList();
+    }
+
+    onRemoveCard = i => {
+      this.setState({
+          cards: this.state.cards.filter((item,index) => {
+            return index != i;
+          }),
+      });
+    }
+
     render() {
         let cards = [];
         for (let i = 0; i < this.state.cards.length; i++) {
-            cards.push(< Card cardInfo = { this.state.cards[i] } />);
+            cards.push(< Card cardInfo = { this.state.cards[i] } removeCard = {() => this.onRemoveCard(i)} />);
         }
         return (
             <div className='list'>
                 <form onSubmit={this.preventDefault}>
-                    //<div onClick={this.removeList} className='remove'>x</div>
+                    <div onClick={this.removeList} className='remove'>x</div>
                     <p>{this.props.listInfo.listName}</p>
                     <input type='text' onChange={this.onCardChange} value={this.state.newTask}/>
                     <button onClick={this.addCard}>Add Card</button>
diff --git a/style/style.css b/style/style.css
index 0151643..b26f1ce 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,4 +1,5 @@
 .list {
+  position: relative;
     width: 300px;
     float: left;
     border: 1px solid #c7c4c4;
@@ -8,6 +9,7 @@
     margin: 10px;
 }
 .card {
+  position: relative;
     color: white;
     margin-top: 5px;
     background: #696565;
@@ -20,3 +22,9 @@
 .form{
       margin-left: 10px;
 }
+
+.remove{
+  position: absolute;
+top: 0;
+right: 5px;
+}