[todos] [refactor] improve the general style of the approach to React

Author: raunofreiberg

docs/basics/ExampleTodoList.md

@@ -11,10 +11,10 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
-import todoApp from './reducers'
+import reducer from './reducers'
 import App from './components/App'
 
-let store = createStore(todoApp)
+const store = createStore(reducer)
 
 render(
   <Provider store={store}>
@@ -30,27 +30,21 @@ render(
 
 ```js
 let nextTodoId = 0
-export const addTodo = text => {
-  return {
-    type: 'ADD_TODO',
-    id: nextTodoId++,
-    text
-  }
-}
+export const addTodo = text => ({
+  type: 'ADD_TODO',
+  id: nextTodoId++,
+  text
+})
 
-export const setVisibilityFilter = filter => {
-  return {
-    type: 'SET_VISIBILITY_FILTER',
-    filter
-  }
-}
+export const setVisibilityFilter = filter => ({
+  type: 'SET_VISIBILITY_FILTER',
+  filter
+})
 
-export const toggleTodo = id => {
-  return {
-    type: 'TOGGLE_TODO',
-    id
-  }
-}
+export const toggleTodo = id => ({
+  type: 'TOGGLE_TODO',
+  id
+})
 
 export const VisibilityFilters = {
   SHOW_ALL: 'SHOW_ALL',
@@ -154,11 +148,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Todo from './Todo'
 
-const TodoList = ({ todos, onTodoClick }) => (
+const TodoList = ({ todos, toggleTodo }) => (
   <ul>
-    {todos.map(todo => (
-      <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
-    ))}
+    {todos.map(todo =>
+      <Todo
+        key={todo.id}
+        {...todo}
+        onClick={() => toggleTodo(todo.id)}
+      />
+    )}
   </ul>
 )
 
@@ -170,7 +168,7 @@ TodoList.propTypes = {
       text: PropTypes.string.isRequired
     }).isRequired
   ).isRequired,
-  onTodoClick: PropTypes.func.isRequired
+  toggleTodo: PropTypes.func.isRequired
 }
 
 export default TodoList
@@ -181,23 +179,17 @@ export default TodoList
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Link = ({ active, children, onClick }) => {
-  if (active) {
-    return <span>{children}</span>
-  }
-
-  return (
-    <a
-      href=""
-      onClick={e => {
-        e.preventDefault()
-        onClick()
-      }}
-    >
-      {children}
-    </a>
-  )
-}
+const Link = ({ active, children, onClick }) => (
+  <button
+     onClick={onClick}
+     disabled={active}
+     style={{
+         marginLeft: '4px',
+     }}
+  >
+    {children}
+  </button>
+)
 
 Link.propTypes = {
   active: PropTypes.bool.isRequired,
@@ -216,21 +208,18 @@ import FilterLink from '../containers/FilterLink'
 import { VisibilityFilters } from '../actions'
 
 const Footer = () => (
-  <p>
-    Show:
-    {' '}
+  <div>
+    <span>Show: </span>
     <FilterLink filter={VisibilityFilters.SHOW_ALL}>
       All
     </FilterLink>
-    {', '}
     <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>
       Active
     </FilterLink>
-    {', '}
     <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
       Completed
     </FilterLink>
-  </p>
+  </div>
 )
 
 export default Footer
@@ -276,26 +265,18 @@ const getVisibleTodos = (todos, filter) => {
   }
 }
 
-const mapStateToProps = state => {
-  return {
-    todos: getVisibleTodos(state.todos, state.visibilityFilter)
-  }
-}
+const mapStateToProps = state => ({
+  todos: getVisibleTodos(state.todos, state.visibilityFilter)
+})
 
-const mapDispatchToProps = dispatch => {
-  return {
-    onTodoClick: id => {
-      dispatch(toggleTodo(id))
-    }
-  }
-}
+const mapDispatchToProps = dispatch => ({
+  toggleTodo: id => dispatch(toggleTodo(id))
+})
 
-const VisibleTodoList = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(TodoList)
-
-export default VisibleTodoList
 ```
 
 #### `containers/FilterLink.js`
@@ -305,26 +286,18 @@ import { connect } from 'react-redux'
 import { setVisibilityFilter } from '../actions'
 import Link from '../components/Link'
 
-const mapStateToProps = (state, ownProps) => {
-  return {
-    active: ownProps.filter === state.visibilityFilter
-  }
-}
+const mapStateToProps = (state, ownProps) => ({
+  active: ownProps.filter === state.visibilityFilter
+})
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-  return {
-    onClick: () => {
-      dispatch(setVisibilityFilter(ownProps.filter))
-    }
-  }
-}
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
+})
 
-const FilterLink = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Link)
-
-export default FilterLink
 ```
 
 ### Other Components
@@ -336,7 +309,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { addTodo } from '../actions'
 
-let AddTodo = ({ dispatch }) => {
+const AddTodo = ({ dispatch }) => {
   let input
 
   return (
@@ -351,19 +324,14 @@ let AddTodo = ({ dispatch }) => {
           input.value = ''
         }}
       >
-        <input
-          ref={node => {
-            input = node
-          }}
-        />
+        <input ref={node => input = node} />
         <button type="submit">
           Add Todo
         </button>
       </form>
     </div>
   )
 }
-AddTodo = connect()(AddTodo)
 
-export default AddTodo
+export default connect()(AddTodo)
 ```

examples/todos/src/actions/index.js

@@ -1,22 +1,22 @@
 let nextTodoId = 0
-export const addTodo = (text) => ({
+export const addTodo = text => ({
   type: 'ADD_TODO',
   id: nextTodoId++,
   text
 })
 
-export const setVisibilityFilter = (filter) => ({
+export const setVisibilityFilter = filter => ({
   type: 'SET_VISIBILITY_FILTER',
   filter
 })
 
-export const toggleTodo = (id) => ({
+export const toggleTodo = id => ({
   type: 'TOGGLE_TODO',
   id
 })
 
 export const VisibilityFilters = {
-  SHOW_ALL: 'SHOW_ALL',
-  SHOW_COMPLETED: 'SHOW_COMPLETED',
-  SHOW_ACTIVE: 'SHOW_ACTIVE'
+ SHOW_ALL: 'SHOW_ALL',
+ SHOW_COMPLETED: 'SHOW_COMPLETED',
+ SHOW_ACTIVE: 'SHOW_ACTIVE'
 }

examples/todos/src/components/Footer.js

@@ -3,21 +3,18 @@ import FilterLink from '../containers/FilterLink'
 import { VisibilityFilters } from '../actions'
 
 const Footer = () => (
-  <p>
-    Show:
-    {" "}
-    <FilterLink filter={ VisibilityFilters.SHOW_ALL }>
+  <div>
+    <span>Show: </span>
+    <FilterLink filter={VisibilityFilters.SHOW_ALL}>
       All
     </FilterLink>
-    {", "}
-    <FilterLink filter={ VisibilityFilters.SHOW_ACTIVE }>
+    <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>
       Active
     </FilterLink>
-    {", "}
-    <FilterLink filter={ VisibilityFilters.SHOW_COMPLETED }>
+    <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
       Completed
     </FilterLink>
-  </p>
+  </div>
 )
 
 export default Footer

examples/todos/src/components/Link.js

@@ -1,23 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Link = ({ active, children, onClick }) => {
-  if (active) {
-    return <span>{children}</span>
-  }
-
-  return (
-    // eslint-disable-next-line
-    <a href="#"
-       onClick={e => {
-         e.preventDefault()
-         onClick()
+const Link = ({ active, children, onClick }) => (
+    <button
+       onClick={onClick}
+       disabled={active}
+       style={{
+           marginLeft: '4px',
        }}
     >
       {children}
-    </a>
-  )
-}
+    </button>
+)
 
 Link.propTypes = {
   active: PropTypes.bool.isRequired,

examples/todos/src/components/TodoList.js

@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Todo from './Todo'
 
-const TodoList = ({ todos, onTodoClick }) => (
+const TodoList = ({ todos, toggleTodo }) => (
   <ul>
     {todos.map(todo =>
       <Todo
         key={todo.id}
         {...todo}
-        onClick={() => onTodoClick(todo.id)}
+        onClick={() => toggleTodo(todo.id)}
       />
     )}
   </ul>
@@ -20,7 +20,7 @@ TodoList.propTypes = {
     completed: PropTypes.bool.isRequired,
     text: PropTypes.string.isRequired
   }).isRequired).isRequired,
-  onTodoClick: PropTypes.func.isRequired
+  toggleTodo: PropTypes.func.isRequired
 }
 
 export default TodoList

examples/todos/src/containers/AddTodo.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { addTodo } from '../actions'
 
-let AddTodo = ({ dispatch }) => {
+const AddTodo = ({ dispatch }) => {
   let input
 
   return (
@@ -15,16 +15,13 @@ let AddTodo = ({ dispatch }) => {
         dispatch(addTodo(input.value))
         input.value = ''
       }}>
-        <input ref={node => {
-          input = node
-        }} />
+        <input ref={node => input = node} />
         <button type="submit">
           Add Todo
         </button>
       </form>
     </div>
   )
 }
-AddTodo = connect()(AddTodo)
 
-export default AddTodo
+export default connect()(AddTodo)