From b5db43d53370fa780feda674ee21ffb8a899212b Mon Sep 17 00:00:00 2001 From: CodinCat Date: Fri, 12 May 2017 12:31:14 -0500 Subject: [PATCH] Prettier to basics folder (#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 --- docs/basics/Actions.md | 4 +- docs/basics/DataFlow.md | 2 +- docs/basics/ExampleTodoList.md | 83 ++++++++++++++++++---------------- docs/basics/Reducers.md | 13 ++++-- docs/basics/Store.md | 7 ++- docs/basics/UsageWithReact.md | 77 ++++++++++++++++--------------- 6 files changed, 101 insertions(+), 85 deletions(-) diff --git a/docs/basics/Actions.md b/docs/basics/Actions.md index 0446a36bcf..13b7040965 100644 --- 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 index f0665f2d4c..9629f3acfb 100644 --- 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 index ea81a095c5..61b5bdb4b9 100644 --- a/docs/basics/ExampleTodoList.md +++ b/docs/basics/ExampleTodoList.md @@ -30,7 +30,7 @@ render( ```js let nextTodoId = 0 -export const addTodo = (text) => { +export const addTodo = text => { return { type: 'ADD_TODO', id: nextTodoId++, @@ -38,14 +38,14 @@ export const addTodo = (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 }) => ( ) 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 ( - { - e.preventDefault() - onClick() - }} + { + e.preventDefault() + onClick() + }} > {children} @@ -228,15 +227,15 @@ import FilterLink from '../containers/FilterLink' const Footer = () => (

Show: - {" "} + {' '} All - {", "} + {', '} Active - {", "} + {', '} Completed @@ -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 (

-
{ - e.preventDefault() - if (!input.value.trim()) { - return - } - dispatch(addTodo(input.value)) - input.value = '' - }}> - { - input = node - }} /> + { + e.preventDefault() + if (!input.value.trim()) { + return + } + dispatch(addTodo(input.value)) + input.value = '' + }} + > + { + input = node + }} + /> diff --git a/docs/basics/Reducers.md b/docs/basics/Reducers.md index 2ae31501ea..1462849f9a 100644 --- 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 index 4bdc250e55..e3fd3a562a 100644 --- 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 index 198f4b2a75..8a05b5e8e3 100644 --- a/docs/basics/UsageWithReact.md +++ b/docs/basics/UsageWithReact.md @@ -146,22 +146,20 @@ import Todo from './Todo' const TodoList = ({ todos, onTodoClick }) => (
    - {todos.map(todo => - onTodoClick(todo.id)} - /> - )} + {todos.map(todo => ( + onTodoClick(todo.id)} /> + ))}
) 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 ( - { - e.preventDefault() - onClick() - }} + { + e.preventDefault() + onClick() + }} > {children} @@ -209,15 +208,15 @@ import FilterLink from '../containers/FilterLink' const Footer = () => (

Show: - {" "} + {' '} All - {", "} + {', '} Active - {", "} + {', '} Completed @@ -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 (

- { - e.preventDefault() - if (!input.value.trim()) { - return - } - dispatch(addTodo(input.value)) - input.value = '' - }}> - { - input = node - }} /> + { + e.preventDefault() + if (!input.value.trim()) { + return + } + dispatch(addTodo(input.value)) + input.value = '' + }} + > + { + input = node + }} + />