Add todo

components/Todos/AddTodo/index.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { func, string, bool } from 'prop-types'
+import { connect } from 'react-redux'
+import { Actions, Selectors } from 'redux-enterprise'
+import { Button, Container, Form, Input } from './styled'
+
+@connect((state) => ({
+  text: state.todoEditor.text,
+  isEditing: state.todoEditor.isEditing,
+  editingId: state.todoEditor.editingId
+}))
+export default class AddTodo extends Component {
+  static propTypes = {
+    dispatch: func.isRequired,
+    isEditing: bool.isRequired,
+    text: string,
+    editingId: string
+  }
+
+  onSubmit = (e) => {
+    e.preventDefault()
+    const { dispatch, text } = this.props
+
+    if (!text.trim()) {
+      return
+    }
+
+    dispatch(Actions.todos.create({ id: '4', text }))
+    dispatch(Actions.todoEditor.text.unset())
+  }
+
+  onInput = (e) => {
+    const { dispatch } = this.props;
+    dispatch(Actions.todoEditor.text.set(e.target.value))
+  }
+
+  onFocus = () => {
+    const { dispatch } = this.props
+    dispatch(Actions.todoEditor.isEditing.toggle())
+  }
+
+  render() {
+    const { text = '', isEditing } = this.props
+
+    return (
+      <Container
+        isEditing={isEditing}>
+        <Form onSubmit={this.onSubmit}>
+          <Input onFocus={this.onFocus} onInput={this.onInput} />
+          <Button>Add</Button>
+        </Form>
+      </Container>
+    )
+  }
+}
+

components/Todos/AddTodo/styled.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  border-bottom: 1px solid black;
+  padding: 5px 10px;
+  ${({ isSelected }) => isSelected && 'background: green;'}
+`
+
+export const Form = styled.form`
+`
+
+export const Input = styled.input.attrs({
+  type: 'text',
+  value: props => props.text
+})`
+  background: palevioletred;
+  border-radius: 3px;
+  border: none;
+  color: white;
+  padding: ${props => props.padding}
+`
+
+export const Button = styled.button.attrs({
+  type: 'submit',
+  value: 'Submit'
+})`
+  background: palevioletred;
+  border-radius: 3px;
+  border: none;
+  color: white;
+`;

components/Todos/index.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { arrayOf, string } from 'prop-types'
 import { Actions, Selectors } from 'redux-enterprise'
-import { Container } from './styled'
+import { Button, Container } from './styled'
 import Todo from './Todo'
+import AddTodo from './AddTodo'
 
 @connect((state) => ({
   todoIds: Selectors.todos.ids(state)
@@ -17,8 +18,9 @@ export default class Todos extends Component {
     return (
       <Container>
         {this.props.todoIds.map((id) =>
-          <Todo id={id} />
+          <Todo id={id} key={id} />
         )}
+        <AddTodo />
       </Container>
     )
   }

state.js

@@ -18,6 +18,7 @@ const { reducers } = defineState({
   selected: Index,
   todoEditor: {
     isEditing: Flag,
+    text: Field,
     editingId: Field,
   },
 })