Rename lists, fixes #5

src/components/List.js

@@ -21,6 +21,14 @@ const mapDispatchToProps = dispatch => {
       }
     }),
 
+    renameList: list => dispatch({
+      type: 'RENAME_LIST',
+      payload: {
+        id: list.id,
+        name: list.name
+      }
+    }),
+
     removeList: list => dispatch({
       type: 'REMOVE_LIST',
       payload: {
@@ -37,6 +45,8 @@ class ConnectedList extends Component {
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleClose = this.handleClose.bind(this);
+    this.renameList = this.renameList.bind(this);
+    this.removeFocus = this.removeFocus.bind(this);
     this.getRandom = this.getRandom.bind(this);
   }
 
@@ -58,6 +68,15 @@ class ConnectedList extends Component {
     this.props.removeList({ id: this.props.id });
   }
 
+  renameList(event) {
+    this.props.renameList({ id: this.props.id, name: event.target.value });
+  }
+
+  removeFocus(event) {
+    event.preventDefault();
+    document.activeElement.blur();
+  }
+
   getRandom() {
     let todos = this.props.todos.filter(todo => !todo.complete);
 
@@ -76,7 +95,9 @@ class ConnectedList extends Component {
       <div className="List">
         <FontAwesomeIcon icon="times" className="close" onClick={this.handleClose} />
         <div className="TodosContainer">
-          <h2>{ this.props.name }</h2>
+          <form onSubmit={this.removeFocus}>
+            <input className="List-name" type="text" value={this.props.name} onChange={this.renameList} />
+          </form>
 
           {this.props.todos.map(todo => (
             <Todo key={todo.id} id={todo.id} description={todo.description} complete={todo.complete} />

src/components/css/List.css

@@ -10,6 +10,18 @@
   box-shadow: 0 2px 5px #1B150F;
 }
 
+.List-name {
+  font-size: 1.5em;
+  font-weight: bold;
+  font-family: sans-serif;
+  color: #F7F4F1;
+  background-color: #1B150F;
+  border: none;
+  margin: 1em 0;
+  display: block;
+  width: 100%;
+}
+
 .TodosContainer {
   margin: 10px;
   padding: 20px 50px;

src/reducers/index.js

@@ -51,6 +51,16 @@ const rootReducer = (state = initialState, action) => {
           ...action.payload, id: lastListId + 1
         })
       };
+    case 'RENAME_LIST':
+      return {
+        ...state,
+        lists: state.lists.map(list => {
+          if (list.id === action.payload.id) {
+            list.name = action.payload.name;
+          }
+          return list;
+        })
+      };
     case 'REMOVE_LIST':
       return {
         ...state,