rename cards

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 (
       <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} onDeleteCard={this.onDeleteCard}
-           maxPages={this.state.maxPages} onNextPageClick={this.onNextPageClick}
+           maxPages={this.state.maxPages} onNextPageClick={this.onNextPageClick} onRenameCard={this.onRenameCard}
            onPrevPageClick={this.onPrevPageClick}></Lists>
       </div>
     );

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 (
       <div style={{backgroundColor: '#b7b7b7'}}>
       <h3>{this.props.name}</h3>
       <Button onClick={this.onDeleteCard}>Delete Card</Button>
+      <Input onChange={this.onRenameCardNameChanged} value={this.props.name}/>
+      <Button onClick={this.onRenameCard}>Rename Task</Button>
       </div>
     )
   }

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 => (<Card key={c} name={c} onDeleteCardinList={this.onDeleteCardinList}/>) );
+     cards = this.props.cards.map(c => (<Card key={c} name={c}
+       onDeleteCardinList={this.onDeleteCard} onRenameCardinList={this.onRenameCard}/>) );
     return (
       <div style={listStyle}>
         <h1>{this.props.name}</h1>

components/Lists.jsx

@@ -40,7 +40,7 @@ export default class Lists extends React.Component  {
           if ((i >= pageNum * offset) && (i < (pageNum + 1) * offset)) {
            return (<List key={l.name} name={l.name} onNewCard={this.props.onNewCard}
             onDeleteList={this.props.onDeleteList} onDeleteCard={this.props.onDeleteCard}
-            cards={l.cards}/>)
+            onRenameCard={this.props.onRenameCard} cards={l.cards}/>)
           }
           })}
       </div>