[pwa] redux-form

Author: AntipovAndrey

pwa/package-lock.json

@@ -12,6 +12,7 @@
     "react-redux": "^6.0.0",
     "react-scripts": "2.1.3",
     "redux": "^4.0.1",
+    "redux-form": "^8.1.0",
     "redux-persist": "^5.10.0",
     "uuid": "^3.3.2"
   },

pwa/package.json

@@ -2,10 +2,11 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {withStyles} from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
+import {Field, reduxForm} from 'redux-form';
 
 import {addTodo} from '../actions';
 
-const styles = theme => ({
+const styles = {
   container: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -19,32 +20,35 @@ const styles = theme => ({
     marginLeft: 15,
     marginRight: 15,
   },
-});
+};
 
-const AddTodo = ({addTodo, classes}) => {
-  let input;
-  return (
-    <form
-      className={classes.form}
-      onSubmit={e => {
-        e.preventDefault();
-        if (input.value.trim()) {
-          addTodo(input.value);
-          input.value = '';
-        }
-      }}>
+const renderTodoTextField = ({input, ...other}) => (
+  <TextField
+    id="outlined-with-placeholder"
+    label="Enter todo here"
+    placeholder="Todo"
+    margin="normal"
+    variant="outlined"
+    autoComplete="off"
+    {...input}
+    {...other}/>
+);
 
-      <TextField
-        id="outlined-with-placeholder"
-        label="Enter todo here"
-        placeholder="Todo"
-        className={classes.textField}
-        margin="normal"
-        variant="outlined"
-        autoComplete="off"
-        inputRef={node => (input = node)}/>
+const AddTodo = ({addTodo, classes, handleSubmit, reset}) => {
+  return (
+    <form className={classes.form} onSubmit={handleSubmit(formValues => {
+      if (formValues.todo) {
+        addTodo(formValues.todo);
+        reset();
+      }
+    })}>
+      <Field name="todo"
+             className={classes.textField}
+             component={renderTodoTextField}/>
     </form>
   );
 };
 
-export default connect(null, {addTodo})(withStyles(styles)(AddTodo));
+export default connect(null, {addTodo})(reduxForm({
+  form: 'addTodo'
+})(withStyles(styles)(AddTodo)));

pwa/src/components/AddTodo.js

@@ -27,7 +27,8 @@ const TodoList = ({todo, toggleTodo, removeTodo, classes}) => {
 const mapReversed = (arr, cb) => arr.map((_, index) => cb(arr[arr.length - 1 - index]));
 
 const createItem = (todo, onToggled, onRemoved) => {
-  return <TodoListItem todo={todo}
+  return <TodoListItem key={todo.id}
+                       todo={todo}
                        onToggled={() => onToggled(todo.id)}
                        onRemoved={() => onRemoved(todo.id)}/>
 };

pwa/src/components/TodoList.js

@@ -9,7 +9,6 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 
 const styles = theme => ({
   completed: {
-
     textDecorationLine: 'line-through',
   },
   trash: {

pwa/src/components/TodoListItem.js

@@ -1,7 +1,9 @@
 import {combineReducers} from 'redux';
+import {reducer as formReducer} from 'redux-form';
 
 import todoReducer from './todoReducer';
 
 export default combineReducers({
   todo: todoReducer,
+  form: formReducer,
 });