iofjuupasli · barysmarukhin · Jul 22, 2016 · Jul 24, 2016 · Jul 24, 2016
diff --git a/maruhin/README.md b/maruhin/README.md
@@ -0,0 +1,22 @@
+Task Board
+===
+
+Create Board with lists as in Trello.
+
+Board should have input with button to create new list.
+
+Each list have input with button for new items creating.
+
+
+More (optional)
+---
+
+Implement list and items remove.
+
+Add names editing
+
+
+Super Advanced
+---
+
+Implement drag and drop items from list to list.
diff --git a/maruhin/components/Board.jsx b/maruhin/components/Board.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import List from './List.jsx';
+import ListForm from './ListForm.jsx';
+
+export default class Board extends React.Component {
+    state = {
+      lists:[]
+    };
+    addList = (listName) => {
+      let arr = this.state.lists;
+      arr.push(listName);
+      this.setState({lists:arr});
+    };
+    removeList = (i) => {
+      let arr = this.state.lists;
+      arr.splice(i,1);
+      this.setState({lists: arr});
+    };
+    eachList = (list,i) =>{
+      return(
+        <List key={i}
+          index={i}
+          onRemove = {this.removeList}
+        >{list}</List>
+      )
+    };
+
+    render() {
+        return(
+          <div className = "board">
+            <ListForm createList = {this.addList}/>
+            {this.state.lists.map(this.eachList)}
+          </div>
+        )
+    }
+}
diff --git a/maruhin/components/List.jsx b/maruhin/components/List.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import TaskForm from './TaskForm.jsx';
+import Task from './Task.jsx'
+
+export default class List extends React.Component {
+    state = {
+      tasks: [],
+    };
+    componentDidMount = () =>{
+      $(this.getDOMNode()).draggable();
+    };
+    addTask = (taskName) => {
+      let arr = this.state.tasks;
+      arr.push(taskName);
+      this.setState({tasks:arr});
+    };
+    eachTask = (task,i) => {
+      return(
+        <Task key={i}
+          index={i}
+        >{task}</Task>
+      )
+    };
+    remove = () => {
+      this.props.onRemove(this.props.index);
+    };
+
+    render() {
+      return (
+        <div className = "list">
+          <div>
+            <h1>{this.props.children}</h1>
+            <TaskForm createTask = {this.addTask}/>
+            {this.state.tasks.map(this.eachTask)}
+          </div>
+          <span>
+            <button onClick={this.remove}>Remove List</button>
+          </span>
+        </div>
+      )
+    }
+}
diff --git a/maruhin/components/ListForm.jsx b/maruhin/components/ListForm.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class ListForm extends React.Component {
+  state = {
+    inputValue: ''
+  }
+
+  onInputValueChange = (e) => {
+    this.setState({inputValue: e.target.value})
+  }
+
+  onClick = (e) => {
+    this.props.createList(this.state.inputValue)
+    this.setState({inputValue: ''})
+  }
+
+  render() {
+    return (
+      <div>
+        <input type="text" onChange={this.onInputValueChange} placeholder="create a new list" value={this.state.inputValue}></input>
+        <button onClick={this.onClick}>Add New List</button>
+      </div>
+    );
+  }
+};
diff --git a/maruhin/components/Task.jsx b/maruhin/components/Task.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default class Task extends React.Component {
+
+    render() {
+      return (
+        <p>{this.props.children}</p>
+      )
+    }
+}
diff --git a/maruhin/components/TaskForm.jsx b/maruhin/components/TaskForm.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class TaskForm extends React.Component {
+  state = {
+    inputValue: ''
+  }
+
+  onInputValueChange = (e) => {
+    this.setState({inputValue: e.target.value})
+  }
+
+  onClick = (e) => {
+    this.props.createTask(this.state.inputValue)
+    this.setState({inputValue: ''})
+  }
+
+  render() {
+    return (
+      <div>
+        <input type="text" onChange={this.onInputValueChange} placeholder="create a new task" value={this.state.inputValue}></input>
+        <button onClick={this.onClick}>Add New Task</button>
+      </div>
+    );
+  }
+};
diff --git a/maruhin/index.html b/maruhin/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Task Board</title>
+</head>
+
+<body>
+
+    <div id="app"></div>
+    <script src="./build/bundle.js"></script>
+
+</body>
+
+</html>
diff --git a/maruhin/index.jsx b/maruhin/index.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Board from './components/Board';
+
+ReactDOM.render(
+    <Board />,
+    document.getElementById('app')
+);
diff --git a/maruhin/package.json b/maruhin/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-lecture-task",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "start": "http-server",
+    "build": "webpack ./webpack.config.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.11.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-1": "^6.5.0",
+    "http-server": "^0.9.0",
+    "webpack": "^1.13.1"
+  },
+  "babel": {
+    "presets": [
+      "react",
+      "stage-1",
+      "es2015"
+    ],
+    "plugins": [
+        "transform-class-properties"
+      ]
+  },
+  "dependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
+  }
+}
diff --git a/maruhin/webpack.config.js b/maruhin/webpack.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+    entry: __dirname + '/index.jsx',
+    output: {
+        path: __dirname + '/build',
+        filename: 'bundle.js'
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    module: {
+        loaders: [{
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel'
+        }]
+    }
+};