From 7935c3909319a05181bf6eda96c6decf1d0a3240 Mon Sep 17 00:00:00 2001 From: Anastasia Date: Fri, 22 Jul 2016 18:09:48 +0300 Subject: [PATCH 1/7] finished --- components/Board.jsx | 116 +++++++++++++++++++++++++++++++++++++++++-- package.json | 7 ++- webpack.config.js | 1 + 3 files changed, 118 insertions(+), 6 deletions(-) diff --git a/components/Board.jsx b/components/Board.jsx index e35ad4b..242a6f3 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -1,9 +1,115 @@ import React from 'react'; -export default class Board extends React.Component { - render() { - return ( -
Board!
- ); +const Button = ({onClick, children}) => ( + +); + +class Input extends React.Component { + render() { + return ( + + ) + } +} + +class NewListForm extends React.Component { + state = { + newListName: '', + } + + onNewListNameChanged = (e) => { + this.setState({ + newListName: e.target.value, + }); + } + + onCreateNewList = () => { + this.props.onNewList(this.state.newListName) + } + + render() { + return ( +
+ + +
+ ) + } +} + +class Card extends React.Component { + render() { + return ( +

{this.props.name}

+ ) + } +} + +class List extends React.Component { + state = { + newCardName: '' + } + + onNewCardNameChanged = (e) => { + this.setState({ + newCardName: e.target.value, + }); + } + + onCreateNewCard = () => { + this.props.onNewCard(this.props.name, this.state.newCardName); + /*this.setState({ + cards: this.state.cards.concat(this.state.newCardName), + });*/ + } + + render() { + let cards = null; + if (this.props.cards) + cards = this.props.cards.map(c => () ); + return ( +
+

{this.props.name}

+ + + {cards} +
+ ) + } +} + +function insertCard(lists, listName, cardName) { + return lists.map((l)=> { + if (l.name === listName) { + return { ...l, cards: l.cards.concat(cardName)}; } + return l; + }); +} + +export default class Board extends React.Component { + state = { + lists: [], + } + + onNewList = listName => { + this.setState({ + lists: this.state.lists.concat({name: listName, cards: []}) + }) + } + + onNewCard = (listName, cardName) => { + this.setState({ + lists: insertCard(this.state.lists, listName, cardName), + }) + } + + render() { + return ( +
+ + {this.state.lists.map((l) => () )} +
+ ); + } } diff --git a/package.json b/package.json index 6e887d9..7a50267 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,15 @@ "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", @@ -23,6 +25,9 @@ "react", "stage-1", "es2015" + ], + "plugins": [ + "transform-class-properties" ] }, "dependencies": { diff --git a/webpack.config.js b/webpack.config.js index 16f9de4..62c1b4c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,6 +7,7 @@ module.exports = { resolve: { extensions: ['', '.js', '.jsx'] }, + devtool: "source-map", module: { loaders: [{ test: /\.jsx?$/, From 5e751403916a66333ef14ec30370909e6641e215 Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 15:25:29 +0300 Subject: [PATCH 2/7] Separate files for classes --- components/Board.jsx | 80 +------------------------------------- components/Button.jsx | 7 ++++ components/Card.jsx | 9 +++++ components/Input.jsx | 9 +++++ components/List.jsx | 34 ++++++++++++++++ components/NewListForm.jsx | 28 +++++++++++++ 6 files changed, 89 insertions(+), 78 deletions(-) create mode 100644 components/Button.jsx create mode 100644 components/Card.jsx create mode 100644 components/Input.jsx create mode 100644 components/List.jsx create mode 100644 components/NewListForm.jsx diff --git a/components/Board.jsx b/components/Board.jsx index 242a6f3..8d08337 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -1,82 +1,6 @@ import React from 'react'; - -const Button = ({onClick, children}) => ( - -); - -class Input extends React.Component { - render() { - return ( - - ) - } -} - -class NewListForm extends React.Component { - state = { - newListName: '', - } - - onNewListNameChanged = (e) => { - this.setState({ - newListName: e.target.value, - }); - } - - onCreateNewList = () => { - this.props.onNewList(this.state.newListName) - } - - render() { - return ( -
- - -
- ) - } -} - -class Card extends React.Component { - render() { - return ( -

{this.props.name}

- ) - } -} - -class List extends React.Component { - state = { - newCardName: '' - } - - onNewCardNameChanged = (e) => { - this.setState({ - newCardName: e.target.value, - }); - } - - onCreateNewCard = () => { - this.props.onNewCard(this.props.name, this.state.newCardName); - /*this.setState({ - cards: this.state.cards.concat(this.state.newCardName), - });*/ - } - - render() { - let cards = null; - if (this.props.cards) - cards = this.props.cards.map(c => () ); - return ( -
-

{this.props.name}

- - - {cards} -
- ) - } -} +import NewListForm from './NewListForm'; +import List from './List'; function insertCard(lists, listName, cardName) { return lists.map((l)=> { diff --git a/components/Button.jsx b/components/Button.jsx new file mode 100644 index 0000000..4a601dd --- /dev/null +++ b/components/Button.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Button = ({onClick, children}) => ( + +); + +export default Button; diff --git a/components/Card.jsx b/components/Card.jsx new file mode 100644 index 0000000..da96ca2 --- /dev/null +++ b/components/Card.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default class Card extends React.Component { + render() { + return ( +

{this.props.name}

+ ) + } +} diff --git a/components/Input.jsx b/components/Input.jsx new file mode 100644 index 0000000..89756d4 --- /dev/null +++ b/components/Input.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default class Input extends React.Component { + render() { + return ( + + ) + } +} diff --git a/components/List.jsx b/components/List.jsx new file mode 100644 index 0000000..f148b81 --- /dev/null +++ b/components/List.jsx @@ -0,0 +1,34 @@ +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: '' + } + + onNewCardNameChanged = (e) => { + this.setState({ + newCardName: e.target.value, + }); + } + + onCreateNewCard = () => { + this.props.onNewCard(this.props.name, this.state.newCardName); + } + + render() { + let cards = null; + if (this.props.cards) + cards = this.props.cards.map(c => () ); + return ( +
+

{this.props.name}

+ + + {cards} +
+ ) + } +} diff --git a/components/NewListForm.jsx b/components/NewListForm.jsx new file mode 100644 index 0000000..219a70a --- /dev/null +++ b/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 ( +
+ + +
+ ) + } +} From ae7256fbbaafba40035cb4b7669bc8d387e14620 Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 15:55:00 +0300 Subject: [PATCH 3/7] delete list --- components/Board.jsx | 13 ++++++++++++- components/List.jsx | 5 +++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/components/Board.jsx b/components/Board.jsx index 8d08337..65423c9 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -22,6 +22,17 @@ export default class Board extends React.Component { }) } + 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), @@ -32,7 +43,7 @@ export default class Board extends React.Component { return (
- {this.state.lists.map((l) => () )} + {this.state.lists.map((l) => () )}
); } diff --git a/components/List.jsx b/components/List.jsx index f148b81..3ad4004 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -14,6 +14,10 @@ export default class List extends React.Component { }); } + onDeleteList = () => { + this.props.onDeleteList(this.props.name); + } + onCreateNewCard = () => { this.props.onNewCard(this.props.name, this.state.newCardName); } @@ -27,6 +31,7 @@ export default class List extends React.Component {

{this.props.name}

+ {cards} ) From cbd6ecdd924fb9ce98bde0fd7eedb5e045fcb1c8 Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 18:34:28 +0300 Subject: [PATCH 4/7] added pagination --- components/Board.jsx | 28 ++++++++++++++++++++++--- components/List.jsx | 7 ++++++- components/Lists.jsx | 49 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 components/Lists.jsx diff --git a/components/Board.jsx b/components/Board.jsx index 65423c9..155907e 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -1,6 +1,7 @@ import React from 'react'; import NewListForm from './NewListForm'; import List from './List'; +import Lists from './Lists'; function insertCard(lists, listName, cardName) { return lists.map((l)=> { @@ -14,11 +15,15 @@ function insertCard(lists, listName, cardName) { 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: []}) + lists: this.state.lists.concat({name: listName, cards: []}), + maxPages: this.maxCountPages() }) } @@ -35,15 +40,32 @@ export default class Board extends React.Component { onNewCard = (listName, cardName) => { this.setState({ - lists: insertCard(this.state.lists, listName, cardName), + lists: insertCard(this.state.lists, listName, cardName) }) } + 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 (
- {this.state.lists.map((l) => () )} +
); } diff --git a/components/List.jsx b/components/List.jsx index 3ad4004..aeb9da9 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -23,11 +23,16 @@ export default class List extends React.Component { } render() { + const listStyle = { + display: 'table-cell', + padding: '2%', + width: '23%' + } let cards = null; if (this.props.cards) cards = this.props.cards.map(c => () ); return ( -
+

{this.props.name}

diff --git a/components/Lists.jsx b/components/Lists.jsx new file mode 100644 index 0000000..a43b4e8 --- /dev/null +++ b/components/Lists.jsx @@ -0,0 +1,49 @@ +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 = { + display: 'table' + }; + 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 ( +
+
+ +

{pageNum + 1}...{this.props.maxPages + 1}

+ +
+
+ {this.props.lists.map((l, i) => { + if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) { + return () + } + })} +
+
+ ); + } +} From 8bc9bd98720b25c8c4473e7c401e07bbc7fe60c2 Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 19:14:06 +0300 Subject: [PATCH 5/7] delete cards --- components/Board.jsx | 20 ++++++++++++++++++-- components/Card.jsx | 9 +++++++++ components/List.jsx | 8 ++++++-- components/Lists.jsx | 3 ++- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/components/Board.jsx b/components/Board.jsx index 155907e..8609bc1 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -12,6 +12,15 @@ function insertCard(lists, listName, cardName) { }); } +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; + }); +} + export default class Board extends React.Component { state = { lists: [], @@ -44,6 +53,12 @@ export default class Board extends React.Component { }) } + onDeleteCard = (listName, cardName) => { + this.setState({ + lists: deleteCard(this.state.lists, listName, cardName) + }) + } + maxCountPages = () => { return Math.floor(this.state.lists.length / 4); } @@ -64,8 +79,9 @@ export default class Board extends React.Component {
+ onNewCard={this.onNewCard} onDeleteList={this.onDeleteList} onDeleteCard={this.onDeleteCard} + maxPages={this.state.maxPages} onNextPageClick={this.onNextPageClick} + onPrevPageClick={this.onPrevPageClick}>
); } diff --git a/components/Card.jsx b/components/Card.jsx index da96ca2..eb2afc5 100644 --- a/components/Card.jsx +++ b/components/Card.jsx @@ -1,9 +1,18 @@ import React from 'react'; +import Input from './Input'; +import Button from './Button'; export default class Card extends React.Component { + onDeleteCard = () => { + this.props.onDeleteCardinList(this.props.name); + } + render() { return ( +

{this.props.name}

+ +
) } } diff --git a/components/List.jsx b/components/List.jsx index aeb9da9..266e684 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -22,15 +22,19 @@ export default class List extends React.Component { this.props.onNewCard(this.props.name, this.state.newCardName); } + onDeleteCardinList = (cardName) => { + this.props.onDeleteCard(this.props.name, cardName); + } render() { const listStyle = { display: 'table-cell', padding: '2%', - width: '23%' + width: '23%', + backgroundColor: '#e6e6e6' } let cards = null; if (this.props.cards) - cards = this.props.cards.map(c => () ); + cards = this.props.cards.map(c => () ); return (

{this.props.name}

diff --git a/components/Lists.jsx b/components/Lists.jsx index a43b4e8..f62d386 100644 --- a/components/Lists.jsx +++ b/components/Lists.jsx @@ -39,7 +39,8 @@ export default class Lists extends React.Component { {this.props.lists.map((l, i) => { if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) { return () + onDeleteList={this.props.onDeleteList} onDeleteCard={this.props.onDeleteCard} + cards={l.cards}/>) } })}
From bd6398afb26c7175b09a72f350ad21ed9e96b02d Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 19:42:33 +0300 Subject: [PATCH 6/7] rename cards --- components/Board.jsx | 26 +++++++++++++++++++++++++- components/Card.jsx | 16 ++++++++++++++++ components/List.jsx | 10 ++++++++-- components/Lists.jsx | 2 +- 4 files changed, 50 insertions(+), 4 deletions(-) diff --git a/components/Board.jsx b/components/Board.jsx index 8609bc1..18b0ed9 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -21,6 +21,22 @@ function deleteCard(lists, listName, cardName) { }); } +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; + }); +} + export default class Board extends React.Component { state = { lists: [], @@ -59,6 +75,13 @@ export default class Board extends React.Component { }) } + onRenameCard = (listName, newCardName, oldCardName) => { + console.log(`${listName} ${newCardName} ${oldCardName}`); + this.setState({ + lists: renameCard(this.state.lists, listName, newCardName, oldCardName), + }) + } + maxCountPages = () => { return Math.floor(this.state.lists.length / 4); } @@ -74,13 +97,14 @@ export default class Board extends React.Component { pageNum: this.state.maxPages >= this.state.pageNum ? this.state.pageNum + 1 : this.state.pageNum, }) } + render() { return (
); diff --git a/components/Card.jsx b/components/Card.jsx index eb2afc5..537c5f2 100644 --- a/components/Card.jsx +++ b/components/Card.jsx @@ -3,15 +3,31 @@ 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 (

{this.props.name}

+ +
) } diff --git a/components/List.jsx b/components/List.jsx index 266e684..93c7c6e 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -22,9 +22,14 @@ export default class List extends React.Component { this.props.onNewCard(this.props.name, this.state.newCardName); } - onDeleteCardinList = (cardName) => { + onDeleteCard = (cardName) => { this.props.onDeleteCard(this.props.name, cardName); } + + onRenameCard = (newCardName, oldCardName) => { + this.props.onRenameCard(this.props.name, newCardName, oldCardName); + } + render() { const listStyle = { display: 'table-cell', @@ -34,7 +39,8 @@ export default class List extends React.Component { } let cards = null; if (this.props.cards) - cards = this.props.cards.map(c => () ); + cards = this.props.cards.map(c => () ); return (

{this.props.name}

diff --git a/components/Lists.jsx b/components/Lists.jsx index f62d386..c1d3916 100644 --- a/components/Lists.jsx +++ b/components/Lists.jsx @@ -40,7 +40,7 @@ export default class Lists extends React.Component { if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) { return () + onRenameCard={this.props.onRenameCard} cards={l.cards}/>) } })}
From 270262076f906a1c6427491bc7e18674262010a0 Mon Sep 17 00:00:00 2001 From: Anastasia Kostyukova Date: Sun, 24 Jul 2016 20:36:54 +0300 Subject: [PATCH 7/7] rename list --- components/Board.jsx | 33 ++++++++++++++++++++++++++++----- components/Card.jsx | 6 ++++-- components/List.jsx | 33 ++++++++++++++++++++++++++------- components/Lists.jsx | 24 +++++++++++++++--------- package.json | 5 ++++- 5 files changed, 77 insertions(+), 24 deletions(-) diff --git a/components/Board.jsx b/components/Board.jsx index 18b0ed9..96bfa91 100644 --- a/components/Board.jsx +++ b/components/Board.jsx @@ -37,6 +37,15 @@ function renameCard(lists, listName, newCardName, oldCardName) { }); } +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: [], @@ -76,12 +85,17 @@ export default class Board extends React.Component { } onRenameCard = (listName, newCardName, oldCardName) => { - console.log(`${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); } @@ -102,10 +116,19 @@ export default class Board extends React.Component { return (
- + +
); } diff --git a/components/Card.jsx b/components/Card.jsx index 537c5f2..8622aa9 100644 --- a/components/Card.jsx +++ b/components/Card.jsx @@ -24,8 +24,10 @@ export default class Card extends React.Component { render() { return (
-

{this.props.name}

- +
+

{this.props.name}

+ +
diff --git a/components/List.jsx b/components/List.jsx index 93c7c6e..609ed58 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -5,7 +5,8 @@ import Button from './Button'; export default class List extends React.Component { state = { - newCardName: '' + newCardName: '', + listNameChanged: '' } onNewCardNameChanged = (e) => { @@ -18,6 +19,16 @@ export default class List extends React.Component { 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); } @@ -32,23 +43,31 @@ export default class List extends React.Component { render() { const listStyle = { - display: 'table-cell', padding: '2%', width: '23%', - backgroundColor: '#e6e6e6' + backgroundColor: '#e6e6e6', + marginLeft: '2%', + float: 'left', + listStyle: 'none' } let cards = null; if (this.props.cards) cards = this.props.cards.map(c => () ); return ( -
-

{this.props.name}

+
  • +
    +

    {this.props.name}

    + +
    +
    + + +
    - {cards} -
    • + ) } } diff --git a/components/Lists.jsx b/components/Lists.jsx index c1d3916..201e640 100644 --- a/components/Lists.jsx +++ b/components/Lists.jsx @@ -13,7 +13,7 @@ export default class Lists extends React.Component { render() { const listsStyle = { - display: 'table' + }; const paginationItemStyle = { display: 'inline-block', @@ -35,15 +35,21 @@ export default class Lists extends React.Component {

    {pageNum + 1}...{this.props.maxPages + 1}

    -
    - {this.props.lists.map((l, i) => { - if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) { - return () - } +
      + {this.props.lists.map((l, i) => { + if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) { + return () + } })} -
    +
    ); } diff --git a/package.json b/package.json index 7a50267..3a26a11 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "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" }, @@ -31,7 +32,9 @@ ] }, "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" } }