Styled todos and add controlled state

Author: calvinl

common/js/containers/Todos/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { addTodo, toggleTodo, removeTodo } from 'actions/todos';
+import { Container, Header, Checkbox, List, Button, Form } from 'semantic-ui-react';
 import classnames from 'classnames';
 import css from './index.scss';
 
@@ -14,13 +15,15 @@ class TodosContainer extends Component {
     dispatch: PropTypes.func.isRequired
   }
 
+  state = { todoText: null };
+
   submitTodo = (ev) => {
     const { dispatch } = this.props;
-    const { todoText } = this.refs;
+    const { todoText } = this.state;
 
     ev.preventDefault();
-    dispatch(addTodo(todoText.value));
-    todoText.value = '';
+    dispatch(addTodo(todoText));
+    this.setState({ todoText: '' });
   }
 
   checkTodo = (id) => {
@@ -35,32 +38,51 @@ class TodosContainer extends Component {
     dispatch(removeTodo(id));
   }
 
+  onTodoChange = (ev) => {
+    this.setState({ todoText: ev.target.value });
+  }
+
   render() {
     const { todos } = this.props;
+    const { todoText } = this.state;
 
     return (
-      <div>
-        <h1>To-Dos</h1>
-        <div className={css.todos}>
+      <Container>
+        <Header>To-Dos</Header>
+        <List divided className={css.todos}>
           {todos.map((todo, idx) => {
             const { id, text, completed } = todo;
 
             return (
-              <li key={idx} className={css.todo}>
-                <span className={css.completeInput}>
-                  <input type="checkbox" onChange={() => this.checkTodo(id)} />
-                </span>
-                <span className={cx(css.text, { [css.completed]: completed })}>{text}</span>
-                <a onClick={() => this.removeTodo(id)} className={css.delete}>Remove</a>
-              </li>
+              <List.Item key={idx} className={classnames(css.todo, css.extra)}>
+                <List.Content floated="right">
+                  <Button
+                    onClick={() => this.removeTodo(id)}
+                    icon="remove"
+                    size="mini"
+                  />
+                </List.Content>
+                <List.Content floated="left">
+                  <Checkbox type="checkbox" onChange={() => this.checkTodo(id)} />
+                </List.Content>
+                <List.Content className={cx(css.text, { [css.completed]: completed })}>
+                  {text}
+                </List.Content>
+              </List.Item>
             );
           })}
-        </div>
-        <form className={css.todoForm} onSubmit={this.submitTodo}>
-          <input ref="todoText" type="text" placeholder="Add a todo..." />
-          <button type="submit">Add</button>
-        </form>
-      </div>
+        </List>
+        <Form className={css.todoForm} onSubmit={this.submitTodo}>
+          <Form.Group>
+            <Form.Input
+              onChange={this.onTodoChange}
+              value={todoText} 
+              type="text"
+              placeholder="Add a todo..." />
+            <Form.Button content="Add" icon="plus" />
+          </Form.Group>
+        </Form>
+      </Container>
     );
   }
 }

common/js/containers/Todos/index.scss

@@ -4,27 +4,17 @@
   padding: 0;
   list-style: none;
 
-  .todo {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 0;
-    border-bottom: 1px solid #eee;
-  }
-  .todo .completeInput {
-    flex: 0;
-    width: 25px;
+  .todo.extra {
+    padding: 10px;
   }
+  .todo .completeInput {}
   .todo .text {
-    flex: 1;
-    padding-left: 10px;
-
     &.completed {
       text-decoration: line-through;
       color: #ccc;
     }
   }
   .todo .delete {
-    flex: 0;
     cursor: pointer;
     color: blue;
     text-decoration: underline