redux example rename

docs/examples/todos-redux/src/actions/index.js

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

docs/examples/todos-redux/src/components/App.js

@@ -0,0 +1,15 @@
+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

docs/examples/todos-redux/src/components/Footer.js

@@ -0,0 +1,15 @@
+import FilterLink from '../containers/FilterLink.js'
+import { VisibilityFilters } from '../actions/index.js'
+
+const h = React.createElement
+
+const Footer = () => (
+  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

docs/examples/todos-redux/src/components/Link.js

@@ -0,0 +1,13 @@
+const h = React.createElement
+
+const Link = ({ active, children, onClick }) => (
+    h('button', {
+       onClick,
+       disabled: active,
+       style:{
+           marginLeft: '4px',
+       }
+    }, children)
+)
+
+export default Link

docs/examples/todos-redux/src/components/Todo.js

@@ -0,0 +1,12 @@
+const h = React.createElement
+
+const Todo = ({ onClick, completed, text }) => (
+  h('li', {
+    onClick,
+    style: {
+      textDecoration: completed ? 'line-through' : 'none'
+    },
+  }, text)
+)
+
+export default Todo

docs/examples/todos-redux/src/components/TodoList.js

@@ -0,0 +1,17 @@
+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),
+      })
+    )
+  )
+)
+
+export default TodoList

docs/examples/todos-redux/src/containers/AddTodo.js

@@ -0,0 +1,26 @@
+import { addTodo } from '../actions/index.js'
+
+const h = React.createElement
+
+const AddTodo = ({ dispatch }) => {
+  const inputref = {}
+
+  return (
+    h('div', null,
+      h('form', { 
+        onSubmit: e => {
+          e.preventDefault()
+          if (inputref.input.value.trim()) {
+            dispatch(addTodo(inputref.input.value))
+            Object.assign(inputref.input, {value: ''})
+          }
+        }
+      },
+        h('input', {ref: input => Object.assign(inputref, {input})}),
+        h('button', {type: 'submit'}, 'Add Todo')
+      )
+    )
+  )
+}
+
+export default ReactRedux.connect()(AddTodo)

docs/examples/todos-redux/src/containers/FilterLink.js

@@ -0,0 +1,15 @@
+import { setVisibilityFilter } from '../actions/index.js'
+import Link from '../components/Link.js'
+
+const mapStateToProps = (state, ownProps) => ({
+  active: ownProps.filter === state.visibilityFilter
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
+})
+
+export default ReactRedux.connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Link)

docs/examples/todos-redux/src/containers/VisibleTodoList.js

@@ -0,0 +1,28 @@
+import { toggleTodo } from '../actions/index.js'
+import TodoList from '../components/TodoList.js'
+import { VisibilityFilters } from '../actions/index.js'
+
+const getVisibleTodos = (todos, filter) => {
+  if(filter == VisibilityFilters.SHOW_ALL) {
+    return todos
+  } else if(filter == VisibilityFilters.SHOW_COMPLETED) {
+    return todos.filter(t => t.completed)
+  } else if(filter == VisibilityFilters.SHOW_ACTIVE) {
+    return todos.filter(t => !t.completed)
+  } else {
+    throw new Error('Unknown filter: ' + filter)
+  }
+}
+
+const mapStateToProps = state => ({
+  todos: getVisibleTodos(state.todos, state.visibilityFilter)
+})
+
+const mapDispatchToProps = dispatch => ({
+  toggleTodo: id => dispatch(toggleTodo(id))
+})
+
+export default ReactRedux.connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList)

docs/examples/todos-redux/src/index.js

@@ -0,0 +1,11 @@
+import App from './components/App.js'
+import rootReducer from './reducers/index.js'
+
+const h = React.createElement
+
+const store = Redux.createStore(rootReducer)
+
+ReactDOM.render(
+  h(ReactRedux.Provider, {store}, h(App)),
+  document.getElementById('root')
+)

docs/examples/todos-redux/src/reducers/index.js

@@ -0,0 +1,7 @@
+import todos from './todos.js'
+import visibilityFilter from './visibilityFilter.js'
+
+export default Redux.combineReducers({
+  todos,
+  visibilityFilter
+})

docs/examples/todos-redux/src/reducers/todos.js

@@ -0,0 +1,22 @@
+const todos = (state = [], action) => {
+  if(action.type == 'ADD_TODO') {
+    return [
+      ...state,
+      {
+        id: action.id,
+        text: action.text,
+        completed: false
+      }
+    ]
+  } else if(action.type == 'TOGGLE_TODO') {
+    return state.map(todo =>
+      (todo.id === action.id)
+        ? {...todo, completed: !todo.completed}
+        : todo
+    )
+  } else {
+    return state
+  }
+}
+
+export default todos

docs/examples/todos-redux/src/reducers/visibilityFilter.js

@@ -0,0 +1,11 @@
+import { VisibilityFilters } from '../actions/index.js'
+
+const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
+  if(action.type == 'SET_VISIBILITY_FILTER') {
+    return action.filter
+  } else {
+    return state
+  }
+}
+
+export default visibilityFilter