diff --git a/docs/examples/todos/public/index.html b/docs/examples/todos/public/index.html index 2e474bc..a48055a 100644 --- a/docs/examples/todos/public/index.html +++ b/docs/examples/todos/public/index.html @@ -4,18 +4,15 @@ Redux Todos Example + + + + + + +
- diff --git a/docs/examples/todos/src/actions/index.spec.js b/docs/examples/todos/src/actions/index.spec.js deleted file mode 100644 index 3759659..0000000 --- a/docs/examples/todos/src/actions/index.spec.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as actions from './index' - -describe('todo actions', () => { - it('addTodo should create ADD_TODO action', () => { - expect(actions.addTodo('Use Redux')).toEqual({ - type: 'ADD_TODO', - id: 0, - text: 'Use Redux' - }) - }) - - it('setVisibilityFilter should create SET_VISIBILITY_FILTER action', () => { - expect(actions.setVisibilityFilter('active')).toEqual({ - type: 'SET_VISIBILITY_FILTER', - filter: 'active' - }) - }) - - it('toggleTodo should create TOGGLE_TODO action', () => { - expect(actions.toggleTodo(1)).toEqual({ - type: 'TOGGLE_TODO', - id: 1 - }) - }) -}) diff --git a/docs/examples/todos/src/components/App.js b/docs/examples/todos/src/components/App.js index 6289393..11c7bb3 100644 --- a/docs/examples/todos/src/components/App.js +++ b/docs/examples/todos/src/components/App.js @@ -1,14 +1,15 @@ -import React from 'react' -import Footer from './Footer' -import AddTodo from '../containers/AddTodo' -import VisibleTodoList from '../containers/VisibleTodoList' +import Footer from './Footer.js' +import AddTodo from '../containers/AddTodo.js' +import VisibleTodoList from '../containers/VisibleTodoList.js' + +const h = React.createElement const App = () => ( -
- - -
+ h('div', null, + h(AddTodo), + h(VisibleTodoList), + h(Footer), + ) ) export default App diff --git a/docs/examples/todos/src/components/Footer.js b/docs/examples/todos/src/components/Footer.js index 60198e8..045df7c 100644 --- a/docs/examples/todos/src/components/Footer.js +++ b/docs/examples/todos/src/components/Footer.js @@ -1,20 +1,15 @@ -import React from 'react' -import FilterLink from '../containers/FilterLink' -import { VisibilityFilters } from '../actions' +import FilterLink from '../containers/FilterLink.js' +import { VisibilityFilters } from '../actions/index.js' + +const h = React.createElement const Footer = () => ( -
- Show: - - All - - - Active - - - Completed - -
+ h('div', null, + h('span', null, 'Show: '), + h(FilterLink, {filter: VisibilityFilters.SHOW_ALL}, 'All'), + h(FilterLink, {filter: VisibilityFilters.SHOW_ACTIVE}, 'Active'), + h(FilterLink, {filter: VisibilityFilters.SHOW_COMPLETED}, 'Completed'), + ) ) export default Footer diff --git a/docs/examples/todos/src/components/Link.js b/docs/examples/todos/src/components/Link.js index 9ae6af4..4375572 100644 --- a/docs/examples/todos/src/components/Link.js +++ b/docs/examples/todos/src/components/Link.js @@ -1,22 +1,13 @@ -import React from 'react' -import PropTypes from 'prop-types' +const h = React.createElement const Link = ({ active, children, onClick }) => ( - + } + }, children) ) -Link.propTypes = { - active: PropTypes.bool.isRequired, - children: PropTypes.node.isRequired, - onClick: PropTypes.func.isRequired -} - export default Link diff --git a/docs/examples/todos/src/components/Todo.js b/docs/examples/todos/src/components/Todo.js index 09b5b40..05649d9 100644 --- a/docs/examples/todos/src/components/Todo.js +++ b/docs/examples/todos/src/components/Todo.js @@ -1,21 +1,12 @@ -import React from 'react' -import PropTypes from 'prop-types' +const h = React.createElement const Todo = ({ onClick, completed, text }) => ( -
  • - {text} -
    • + }, + }, text) ) -Todo.propTypes = { - onClick: PropTypes.func.isRequired, - completed: PropTypes.bool.isRequired, - text: PropTypes.string.isRequired -} - export default Todo diff --git a/docs/examples/todos/src/components/TodoList.js b/docs/examples/todos/src/components/TodoList.js index 7591db6..d9d5401 100644 --- a/docs/examples/todos/src/components/TodoList.js +++ b/docs/examples/todos/src/components/TodoList.js @@ -1,26 +1,17 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Todo from './Todo' +import Todo from './Todo.js' + +const h = React.createElement const TodoList = ({ todos, toggleTodo }) => ( - + h('ul', null, + todos.map(todo => + h(Todo, { + key: todo.id, + ...todo, + onClick: () => toggleTodo(todo.id), + }) + ) + ) ) -TodoList.propTypes = { - todos: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.number.isRequired, - completed: PropTypes.bool.isRequired, - text: PropTypes.string.isRequired - }).isRequired).isRequired, - toggleTodo: PropTypes.func.isRequired -} - export default TodoList diff --git a/docs/examples/todos/src/containers/AddTodo.js b/docs/examples/todos/src/containers/AddTodo.js index 63cfc76..ca73276 100644 --- a/docs/examples/todos/src/containers/AddTodo.js +++ b/docs/examples/todos/src/containers/AddTodo.js @@ -1,27 +1,26 @@ -import React from 'react' -import { connect } from 'react-redux' -import { addTodo } from '../actions' +import { addTodo } from '../actions/index.js' + +const h = React.createElement const AddTodo = ({ dispatch }) => { let input return ( -
    -
    { - e.preventDefault() - if (!input.value.trim()) { - return + h('div', null, + h('form', { onSubmit: e => { + e.preventDefault() + if (!input.value.trim()) { + return + } + dispatch(addTodo(input.value)) + input.value = '' } - dispatch(addTodo(input.value)) - input.value = '' - }}> - input = node} /> - -
    -
    + }, + h('input', {ref: node => {input = node}}), + h('button', {type: 'submit'}, 'Add Todo') + ) + ) ) } -export default connect()(AddTodo) +export default ReactRedux.connect()(AddTodo) diff --git a/docs/examples/todos/src/containers/FilterLink.js b/docs/examples/todos/src/containers/FilterLink.js index a733d21..a772903 100644 --- a/docs/examples/todos/src/containers/FilterLink.js +++ b/docs/examples/todos/src/containers/FilterLink.js @@ -1,6 +1,5 @@ -import { connect } from 'react-redux' -import { setVisibilityFilter } from '../actions' -import Link from '../components/Link' +import { setVisibilityFilter } from '../actions/index.js' +import Link from '../components/Link.js' const mapStateToProps = (state, ownProps) => ({ active: ownProps.filter === state.visibilityFilter @@ -10,7 +9,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({ onClick: () => dispatch(setVisibilityFilter(ownProps.filter)) }) -export default connect( +export default ReactRedux.connect( mapStateToProps, mapDispatchToProps )(Link) diff --git a/docs/examples/todos/src/containers/VisibleTodoList.js b/docs/examples/todos/src/containers/VisibleTodoList.js index 1c69a9e..cfa69d3 100644 --- a/docs/examples/todos/src/containers/VisibleTodoList.js +++ b/docs/examples/todos/src/containers/VisibleTodoList.js @@ -1,19 +1,13 @@ -import { connect } from 'react-redux' -import { toggleTodo } from '../actions' -import TodoList from '../components/TodoList' -import { VisibilityFilters } from '../actions' +import { toggleTodo } from '../actions/index.js' +import TodoList from '../components/TodoList.js' +import { VisibilityFilters } from '../actions/index.js' const getVisibleTodos = (todos, filter) => { - switch (filter) { - case VisibilityFilters.SHOW_ALL: - return todos - case VisibilityFilters.SHOW_COMPLETED: - return todos.filter(t => t.completed) - case VisibilityFilters.SHOW_ACTIVE: - return todos.filter(t => !t.completed) - default: - throw new Error('Unknown filter: ' + filter) - } + return { + [VisibilityFilters.SHOW_ALL]: todos, + [VisibilityFilters.SHOW_COMPLETED]: todos.filter(t => t.completed), + [VisibilityFilters.SHOW_ACTIVE]: todos.filter(t => !t.completed), + }[filter] } const mapStateToProps = state => ({ @@ -24,7 +18,7 @@ const mapDispatchToProps = dispatch => ({ toggleTodo: id => dispatch(toggleTodo(id)) }) -export default connect( +export default ReactRedux.connect( mapStateToProps, mapDispatchToProps )(TodoList) diff --git a/docs/examples/todos/src/index.js b/docs/examples/todos/src/index.js index a82802c..6df61b9 100644 --- a/docs/examples/todos/src/index.js +++ b/docs/examples/todos/src/index.js @@ -1,15 +1,11 @@ -import React from 'react' -import { render } from 'react-dom' -import { createStore } from 'redux' -import { Provider } from 'react-redux' -import App from './components/App' -import rootReducer from './reducers' +import App from './components/App.js' +import rootReducer from './reducers/index.js' -const store = createStore(rootReducer) +const h = React.createElement -render( - - - , +const store = Redux.createStore(rootReducer) + +ReactDOM.render( + h(ReactRedux.Provider, {store}, h(App)), document.getElementById('root') ) diff --git a/docs/examples/todos/src/reducers/index.js b/docs/examples/todos/src/reducers/index.js index 54b8f0f..74e4c15 100644 --- a/docs/examples/todos/src/reducers/index.js +++ b/docs/examples/todos/src/reducers/index.js @@ -1,8 +1,7 @@ -import { combineReducers } from 'redux' -import todos from './todos' -import visibilityFilter from './visibilityFilter' +import todos from './todos.js' +import visibilityFilter from './visibilityFilter.js' -export default combineReducers({ +export default Redux.combineReducers({ todos, visibilityFilter }) diff --git a/docs/examples/todos/src/reducers/todos.spec.js b/docs/examples/todos/src/reducers/todos.spec.js deleted file mode 100644 index 88eca35..0000000 --- a/docs/examples/todos/src/reducers/todos.spec.js +++ /dev/null @@ -1,111 +0,0 @@ -import todos from './todos' - -describe('todos reducer', () => { - it('should handle initial state', () => { - expect( - todos(undefined, {}) - ).toEqual([]) - }) - - it('should handle ADD_TODO', () => { - expect( - todos([], { - type: 'ADD_TODO', - text: 'Run the tests', - id: 0 - }) - ).toEqual([ - { - text: 'Run the tests', - completed: false, - id: 0 - } - ]) - - expect( - todos([ - { - text: 'Run the tests', - completed: false, - id: 0 - } - ], { - type: 'ADD_TODO', - text: 'Use Redux', - id: 1 - }) - ).toEqual([ - { - text: 'Run the tests', - completed: false, - id: 0 - }, { - text: 'Use Redux', - completed: false, - id: 1 - } - ]) - - expect( - todos([ - { - text: 'Run the tests', - completed: false, - id: 0 - }, { - text: 'Use Redux', - completed: false, - id: 1 - } - ], { - type: 'ADD_TODO', - text: 'Fix the tests', - id: 2 - }) - ).toEqual([ - { - text: 'Run the tests', - completed: false, - id: 0 - }, { - text: 'Use Redux', - completed: false, - id: 1 - }, { - text: 'Fix the tests', - completed: false, - id: 2 - } - ]) - }) - - it('should handle TOGGLE_TODO', () => { - expect( - todos([ - { - text: 'Run the tests', - completed: false, - id: 1 - }, { - text: 'Use Redux', - completed: false, - id: 0 - } - ], { - type: 'TOGGLE_TODO', - id: 1 - }) - ).toEqual([ - { - text: 'Run the tests', - completed: true, - id: 1 - }, { - text: 'Use Redux', - completed: false, - id: 0 - } - ]) - }) - -}) diff --git a/docs/examples/todos/src/reducers/visibilityFilter.js b/docs/examples/todos/src/reducers/visibilityFilter.js index 1500d4f..613301c 100644 --- a/docs/examples/todos/src/reducers/visibilityFilter.js +++ b/docs/examples/todos/src/reducers/visibilityFilter.js @@ -1,4 +1,4 @@ -import { VisibilityFilters } from '../actions' +import { VisibilityFilters } from '../actions/index.js' const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => { switch (action.type) {