Prettier to basics folder (reduxjs#2386)

* Apply prettier to 'basics' folder * Remove an unnecessary semicolon * Fix broken indent * Improve formatting * Improve formatting * Revert to a multi-line statement * Revert to a multi-line statement
liqi600 · May 12, 2017 · b5db43d · b5db43d
1 parent 35e7394
commit b5db43d
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 85 deletions.
diff --git a/docs/basics/Actions.md b/docs/basics/Actions.md
@@ -89,8 +89,8 @@ dispatch(completeTodo(index))
 Alternatively, you can create a **bound action creator** that automatically dispatches:
 
 ```js
-const boundAddTodo = (text) => dispatch(addTodo(text))
-const boundCompleteTodo = (index) => dispatch(completeTodo(index))
+const boundAddTodo = text => dispatch(addTodo(text))
+const boundCompleteTodo = index => dispatch(completeTodo(index))
 ```
 
 Now you'll be able to call them directly:

diff --git a/docs/basics/DataFlow.md b/docs/basics/DataFlow.md
@@ -30,7 +30,7 @@ The data lifecycle in any Redux app follows these 4 steps:
     // The current application state (list of todos and chosen filter)
     let previousState = {
       visibleTodoFilter: 'SHOW_ALL',
-      todos: [ 
+      todos: [
         {
           text: 'Read the docs.',
           complete: false

diff --git a/docs/basics/ExampleTodoList.md b/docs/basics/ExampleTodoList.md
@@ -30,22 +30,22 @@ render(
 
 ```js
 let nextTodoId = 0
-export const addTodo = (text) => {
+export const addTodo = text => {
   return {
     type: 'ADD_TODO',
     id: nextTodoId++,
     text
   }
 }
 
-export const setVisibilityFilter = (filter) => {
+export const setVisibilityFilter = filter => {
   return {
     type: 'SET_VISIBILITY_FILTER',
     filter
   }
 }
 
-export const toggleTodo = (id) => {
+export const toggleTodo = id => {
   return {
     type: 'TOGGLE_TODO',
     id
@@ -74,7 +74,7 @@ const todo = (state = {}, action) => {
       return Object.assign({}, state, {
         completed: !state.completed
       })
-      
+
     default:
       return state
   }
@@ -84,7 +84,7 @@ const todos = (state = [], action) => {
   switch (action.type) {
     case 'ADD_TODO':
       return [
-        ...state,
+        ...state, 
         todo(undefined, action)
       ]
     case 'TOGGLE_TODO':
@@ -134,7 +134,7 @@ export default todoApp
 #### `components/Todo.js`
 
 ```js
-import React, from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 const Todo = ({ onClick, completed, text }) => (
@@ -166,22 +166,20 @@ import Todo from './Todo'
 
 const TodoList = ({ todos, onTodoClick }) => (
   <ul>
-    {todos.map(todo =>
-      <Todo
-        key={todo.id}
-        {...todo}
-        onClick={() => onTodoClick(todo.id)}
-      />
-    )}
+    {todos.map(todo => (
+      <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
+    ))}
   </ul>
 )
 
 TodoList.propTypes = {
-  todos: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    completed: PropTypes.bool.isRequired,
-    text: PropTypes.string.isRequired
-  }).isRequired).isRequired,
+  todos: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      completed: PropTypes.bool.isRequired,
+      text: PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired,
   onTodoClick: PropTypes.func.isRequired
 }
 
@@ -199,11 +197,12 @@ const Link = ({ active, children, onClick }) => {
   }
 
   return (
-    <a href="#"
-       onClick={e => {
-         e.preventDefault()
-         onClick()
-       }}
+    <a
+      href="#"
+      onClick={e => {
+        e.preventDefault()
+        onClick()
+      }}
     >
       {children}
     </a>
@@ -228,15 +227,15 @@ import FilterLink from '../containers/FilterLink'
 const Footer = () => (
   <p>
     Show:
-    {" "}
+    {' '}
     <FilterLink filter="SHOW_ALL">
       All
     </FilterLink>
-    {", "}
+    {', '}
     <FilterLink filter="SHOW_ACTIVE">
       Active
     </FilterLink>
-    {", "}
+    {', '}
     <FilterLink filter="SHOW_COMPLETED">
       Completed
     </FilterLink>
@@ -285,15 +284,15 @@ const getVisibleTodos = (todos, filter) => {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
     todos: getVisibleTodos(state.todos, state.visibilityFilter)
   }
 }
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
-    onTodoClick: (id) => {
+    onTodoClick: id => {
       dispatch(toggleTodo(id))
     }
   }
@@ -350,17 +349,21 @@ let AddTodo = ({ dispatch }) => {
 
   return (
     <div>
-      <form onSubmit={e => {
-        e.preventDefault()
-        if (!input.value.trim()) {
-          return
-        }
-        dispatch(addTodo(input.value))
-        input.value = ''
-      }}>
-        <input ref={node => {
-          input = node
-        }} />
+      <form
+        onSubmit={e => {
+          e.preventDefault()
+          if (!input.value.trim()) {
+            return
+          }
+          dispatch(addTodo(input.value))
+          input.value = ''
+        }}
+      >
+        <input
+          ref={node => {
+            input = node
+          }}
+        />
         <button type="submit">
           Add Todo
         </button>

diff --git a/docs/basics/Reducers.md b/docs/basics/Reducers.md
@@ -137,7 +137,7 @@ function todoApp(state = initialState, action) {
             completed: false
           }
         ]
-      })    
+      })
     default:
       return state
   }
@@ -188,7 +188,7 @@ function todoApp(state = initialState, action) {
     case TOGGLE_TODO:
       return Object.assign({}, state, {
         todos: state.todos.map((todo, index) => {
-          if(index === action.index) {
+          if (index === action.index) {
             return Object.assign({}, todo, {
               completed: !todo.completed
             })
@@ -252,7 +252,7 @@ Let's explore reducer composition more. Can we also extract a reducer managing j
 
 Below our imports, let's use [ES6 Object Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to declare `SHOW_ALL`:
 ```js
-const { SHOW_ALL } = VisibilityFilters;
+const { SHOW_ALL } = VisibilityFilters
 ```
 
 Then:
@@ -380,7 +380,12 @@ All [`combineReducers()`](../api/combineReducers.md) does is generate a function
 
 ```js
 import { combineReducers } from 'redux'
-import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions'
+import {
+  ADD_TODO,
+  TOGGLE_TODO,
+  SET_VISIBILITY_FILTER,
+  VisibilityFilters
+} from './actions'
 const { SHOW_ALL } = VisibilityFilters
 
 function visibilityFilter(state = SHOW_ALL, action) {

diff --git a/docs/basics/Store.md b/docs/basics/Store.md
@@ -31,7 +31,12 @@ let store = createStore(todoApp, window.STATE_FROM_SERVER)
 Now that we have created a store, let's verify our program works! Even without any UI, we can already test the update logic.
 
 ```js
-import { addTodo, toggleTodo, setVisibilityFilter, VisibilityFilters } from './actions'
+import {
+  addTodo,
+  toggleTodo,
+  setVisibilityFilter,
+  VisibilityFilters
+} from './actions'
 
 // Log the initial state
 console.log(store.getState())

diff --git a/docs/basics/UsageWithReact.md b/docs/basics/UsageWithReact.md
@@ -146,22 +146,20 @@ import Todo from './Todo'
 
 const TodoList = ({ todos, onTodoClick }) => (
   <ul>
-    {todos.map(todo =>
-      <Todo
-        key={todo.id}
-        {...todo}
-        onClick={() => onTodoClick(todo.id)}
-      />
-    )}
+    {todos.map(todo => (
+      <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
+    ))}
   </ul>
 )
 
 TodoList.propTypes = {
-  todos: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    completed: PropTypes.bool.isRequired,
-    text: PropTypes.string.isRequired
-  }).isRequired).isRequired,
+  todos: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      completed: PropTypes.bool.isRequired,
+      text: PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired,
   onTodoClick: PropTypes.func.isRequired
 }
 
@@ -180,11 +178,12 @@ const Link = ({ active, children, onClick }) => {
   }
 
   return (
-    <a href="#"
-       onClick={e => {
-         e.preventDefault()
-         onClick()
-       }}
+    <a
+      href="#"
+      onClick={e => {
+        e.preventDefault()
+        onClick()
+      }}
     >
       {children}
     </a>
@@ -209,15 +208,15 @@ import FilterLink from '../containers/FilterLink'
 const Footer = () => (
   <p>
     Show:
-    {" "}
+    {' '}
     <FilterLink filter="SHOW_ALL">
       All
     </FilterLink>
-    {", "}
+    {', '}
     <FilterLink filter="SHOW_ACTIVE">
       Active
     </FilterLink>
-    {", "}
+    {', '}
     <FilterLink filter="SHOW_COMPLETED">
       Completed
     </FilterLink>
@@ -264,7 +263,7 @@ const getVisibleTodos = (todos, filter) => {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
     todos: getVisibleTodos(state.todos, state.visibilityFilter)
   }
@@ -274,9 +273,9 @@ const mapStateToProps = (state) => {
 In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called `mapDispatchToProps()` that receives the [`dispatch()`](../api/Store.md#dispatch) method and returns callback props that you want to inject into the presentational component. For example, we want the `VisibleTodoList` to inject a prop called `onTodoClick` into the `TodoList` component, and we want `onTodoClick` to dispatch a `TOGGLE_TODO` action:
 
 ```js
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
-    onTodoClick: (id) => {
+    onTodoClick: id => {
       dispatch(toggleTodo(id))
     }
   }
@@ -347,15 +346,15 @@ const getVisibleTodos = (todos, filter) => {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
     todos: getVisibleTodos(state.todos, state.visibilityFilter)
   }
 }
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
-    onTodoClick: (id) => {
+    onTodoClick: id => {
       dispatch(toggleTodo(id))
     }
   }
@@ -383,17 +382,21 @@ let AddTodo = ({ dispatch }) => {
 
   return (
     <div>
-      <form onSubmit={e => {
-        e.preventDefault()
-        if (!input.value.trim()) {
-          return
-        }
-        dispatch(addTodo(input.value))
-        input.value = ''
-      }}>
-        <input ref={node => {
-          input = node
-        }} />
+      <form
+        onSubmit={e => {
+          e.preventDefault()
+          if (!input.value.trim()) {
+            return
+          }
+          dispatch(addTodo(input.value))
+          input.value = ''
+        }}
+      >
+        <input
+          ref={node => {
+            input = node
+          }}
+        />
         <button type="submit">
           Add Todo
         </button>