react-task

scherbenok/components/Board.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Lists from './Lists/Lists.jsx'
+import NewListForm from './NewListForm/NewListForm'
+
+export default class Board extends React.Component {
+  state = {
+    lists: []
+  }
+
+  onListCreate = (name) => {
+    this.setState({
+      lists: [...this.state.lists, {
+        name,
+      }]
+    })
+  }
+
+  render() {
+      return (
+        <div>
+          <NewListForm onListCreate={this.onListCreate} />
+          <Lists lists={this.state.lists} />
+        </div>
+      );
+  }
+}

scherbenok/components/Card/Card.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Card extends React.Component {
+  render() {
+      return (
+          <div>
+            {this.props.content}
+          </div>
+      );
+  }
+};

scherbenok/components/Form/Form.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default class Form extends React.Component {
+  state = {
+    inputValue: '',
+  }
+
+  onInputValueChange = (e) => {
+    this.setState({
+      inputValue: e.target.value
+    })
+  }
+
+  onClick = (e) => {
+    this.props.onClick(this.state.inputValue)
+    this.setState({
+      inputValue: ''
+    })
+  }
+
+  render() {
+      return (
+          <div>
+            <input type="text" onChange={this.onInputValueChange} value={this.state.inputValue}></input>
+            <button onClick={this.onClick}>Add</button>
+          </div>
+      );
+  }
+};

scherbenok/components/List/List.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Card from '../Card/Card'
+import Form from '../Form/Form'
+
+export default class List extends React.Component {
+  state = {
+    cards: []
+  }
+
+  createNewCard = cardName => {
+    this.setState({
+      cards: [...this.state.cards, cardName]
+    })
+  }
+
+  render() {
+      return (
+          <div>
+            <h4>{this.props.name}</h4>
+            <Form onClick={this.createNewCard} />
+            { this.state.cards.map(elem => (<Card content={elem} />)) }
+          </div>
+      );
+  }
+};

scherbenok/components/Lists/Lists.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import List from '../List/List';
+
+export default class Lists extends React.Component {
+  render() {
+      return (
+        <div>
+          { this.props.lists.map(elem => (<List name={elem.name} />)) }
+        </div>
+      );
+  }
+};

scherbenok/components/NewListForm/NewListForm.css

@@ -0,0 +1,5 @@
+.new_list_form {
+  background: #aaa;
+  color: red;
+  width: 300px;
+}

scherbenok/components/NewListForm/NewListForm.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Form from '../Form/Form'
+import './NewListForm.css'
+
+export default class NewListForm extends React.Component {
+  render() {
+      return (
+          <div className='new_list_form'>
+            <h2>New list form</h2>
+            <Form onClick={this.props.onListCreate} />
+          </div>
+      );
+  }
+};

package.json → scherbenok/package.json

@@ -5,24 +5,31 @@
   "main": "webpack.config.js",
   "scripts": {
     "start": "http-server",
-    "build": "webpack ./webpack.config.js"
+    "build": "webpack ./webpack.config.js",
+    "watch": "webpack ./webpack.config.js --colors --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",
+    "css-loader": "^0.23.1",
     "http-server": "^0.9.0",
+    "style-loader": "^0.13.1",
     "webpack": "^1.13.1"
   },
   "babel": {
     "presets": [
       "react",
       "stage-1",
       "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
   },
   "dependencies": {

webpack.config.js → scherbenok/webpack.config.js

@@ -12,6 +12,12 @@ module.exports = {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel'
-        }]
-    }
+        },
+        {
+          test: /\.css$/,
+          loader: 'style!css'
+        }
+      ]
+    },
+    devtool: 'source-map'
 };