Add react redux and form example

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

13 files changed, 296 insertions, 7 deletions

diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js
new file mode 100644
index 000000000..99b50384a
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/actions/index.js
@@ -0,0 +1,25 @@
+let nextTodoId = 0
+module.exports = {
+
+  addTodo : (text) => {
+    return {
+      type: 'ADD_TODO',
+      id: nextTodoId++,
+      text
+    }
+  },
+
+  setVisibilityFilter : (filter) => {
+    return {
+      type: 'SET_VISIBILITY_FILTER',
+      filter
+    }
+  },
+
+  toggleTodo : (id) => {
+    return {
+      type: 'TOGGLE_TODO',
+      id
+    }
+  },
+}
diff --git a/app/assets/javascripts/es6_browserified/components/App.js b/app/assets/javascripts/es6_browserified/components/App.js
new file mode 100644
index 000000000..62db53da1
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/App.js
@@ -0,0 +1,14 @@
+var React = require('react')
+var Footer = require('./Footer')
+var AddTodo = require('../containers/AddTodo')
+var VisibleTodoList = require('../containers/VisibleTodoList')
+
+const App = () => (
+  <div>
+    <AddTodo />
+    <VisibleTodoList />
+    <Footer />
+  </div>
+)
+
+module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/components/Footer.js b/app/assets/javascripts/es6_browserified/components/Footer.js
new file mode 100644
index 000000000..de839f11f
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/Footer.js
@@ -0,0 +1,22 @@
+var React = require('react')
+var FilterLink = require('../containers/FilterLink')
+
+const Footer = () => (
+  <p>
+    Show:
+    {" "}
+    <FilterLink filter="SHOW_ALL">
+      All
+    </FilterLink>
+    {", "}
+    <FilterLink filter="SHOW_ACTIVE">
+      Active
+    </FilterLink>
+    {", "}
+    <FilterLink filter="SHOW_COMPLETED">
+      Completed
+    </FilterLink>
+  </p>
+)
+
+module.exports = Footer
diff --git a/app/assets/javascripts/es6_browserified/components/Link.js b/app/assets/javascripts/es6_browserified/components/Link.js
new file mode 100644
index 000000000..54daea2b6
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/Link.js
@@ -0,0 +1,27 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const Link = ({ active, children, onClick }) => {
+  if (active) {
+    return <span>{children}</span>
+  }
+
+  return (
+    <a href="#"
+       onClick={e => {
+         e.preventDefault()
+         onClick()
+       }}
+    >
+      {children}
+    </a>
+  )
+}
+
+Link.propTypes = {
+  active: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired
+}
+
+module.exports = Link
diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js
new file mode 100644
index 000000000..d0a83917f
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -0,0 +1,21 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const Todo = ({ onClick, completed, text }) => (
+  <li
+    onClick={onClick}
+    style={{
+      textDecoration: completed ? 'line-through' : 'none'
+    }}
+  >
+    {text}
+  </li>
+)
+
+Todo.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  completed: PropTypes.bool.isRequired,
+  text: PropTypes.string.isRequired
+}
+
+module.exports = Todo
diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js
new file mode 100644
index 000000000..beabfb2c2
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/TodoList.js
@@ -0,0 +1,26 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+var Todo = require('./Todo')
+
+const TodoList = ({ todos, onTodoClick }) => (
+  <ul>
+    {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,
+  onTodoClick: PropTypes.func.isRequired
+}
+
+module.exports = TodoList
diff --git a/app/assets/javascripts/es6_browserified/containers/AddTodo.js b/app/assets/javascripts/es6_browserified/containers/AddTodo.js
new file mode 100644
index 000000000..41c37063b
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/containers/AddTodo.js
@@ -0,0 +1,30 @@
+var React = require('react')
+var connect = require('react-redux').connect
+var addTodo = require('../actions').addTodo
+
+let AddTodo = ({ dispatch }) => {
+  let input
+
+  return (
+    <div>
+      <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>
+      </form>
+    </div>
+  )
+}
+AddTodo = connect()(AddTodo)
+
+module.exports = AddTodo
diff --git a/app/assets/javascripts/es6_browserified/containers/FilterLink.js b/app/assets/javascripts/es6_browserified/containers/FilterLink.js
new file mode 100644
index 000000000..7f6778277
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/containers/FilterLink.js
@@ -0,0 +1,24 @@
+var connect = require('react-redux').connect
+var setVisibilityFilter = require('../actions').setVisibilityFilter
+var Link = require('../components/Link')
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    active: ownProps.filter === state.visibilityFilter
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    onClick: () => {
+      dispatch(setVisibilityFilter(ownProps.filter))
+    }
+  }
+}
+
+const FilterLink = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Link)
+
+module.exports = FilterLink
diff --git a/app/assets/javascripts/es6_browserified/containers/visibleTodoList.js b/app/assets/javascripts/es6_browserified/containers/visibleTodoList.js
new file mode 100644
index 000000000..5a70582e0
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/containers/visibleTodoList.js
@@ -0,0 +1,35 @@
+var connect = require('react-redux').connect
+var toggleTodo = require('../actions').toggleTodo
+var TodoList = require('../components/TodoList')
+
+const getVisibleTodos = (todos, filter) => {
+  switch (filter) {
+    case 'SHOW_ALL':
+      return todos
+    case 'SHOW_COMPLETED':
+      return todos.filter(t => t.completed)
+    case 'SHOW_ACTIVE':
+      return todos.filter(t => !t.completed)
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    todos: getVisibleTodos(state.todos, state.visibilityFilter)
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onTodoClick: (id) => {
+      dispatch(toggleTodo(id))
+    }
+  }
+}
+
+const VisibleTodoList = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList)
+
+module.exports = VisibleTodoList
diff --git a/app/assets/javascripts/es6_browserified/reducers/index.js b/app/assets/javascripts/es6_browserified/reducers/index.js
new file mode 100644
index 000000000..67dbfa862
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/reducers/index.js
@@ -0,0 +1,10 @@
+var  combineReducers  = require('redux').combineReducers
+var todos = require('./todos')
+var visibilityFilter = require('./visibilityFilter')
+
+const todoApp = combineReducers({
+  todos,
+  visibilityFilter
+})
+
+module.exports = todoApp
diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js
new file mode 100644
index 000000000..a99c781ea
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/reducers/todos.js
@@ -0,0 +1,39 @@
+const todo = (state = {}, action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return {
+        id: action.id,
+        text: action.text,
+        completed: false
+      }
+    case 'TOGGLE_TODO':
+      if (state.id !== action.id) {
+        return state
+      }
+
+      return Object.assign({}, state, {
+        completed: !state.completed
+      })
+
+    default:
+      return state
+  }
+}
+
+const todos = (state = [], action) => {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return [
+        ...state,
+        todo(undefined, action)
+      ]
+    case 'TOGGLE_TODO':
+      return state.map(t =>
+        todo(t, action)
+      )
+    default:
+      return state
+  }
+}
+
+module.exports = todos
diff --git a/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js b/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js
new file mode 100644
index 000000000..1652ad90c
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js
@@ -0,0 +1,10 @@
+const visibilityFilter = (state = 'SHOW_ALL', action) => {
+  switch (action.type) {
+    case 'SET_VISIBILITY_FILTER':
+      return action.filter
+    default:
+      return state
+  }
+}
+
+module.exports = visibilityFilter
diff --git a/app/assets/javascripts/es6_browserified/test.js b/app/assets/javascripts/es6_browserified/test.js
index 757e61e95..9e8b62fbc 100644
--- a/app/assets/javascripts/es6_browserified/test.js
+++ b/app/assets/javascripts/es6_browserified/test.js
@@ -1,9 +1,15 @@
-// get json statham
+var React = require('react')
+var render = require('react-dom').render
+var Provider = require('react-redux').Provider
+var createStore = require('redux').createStore
+var todoApp = require('./reducers')
+var App = require('./components/App')
 
-class Welcome {
-  constructor() {
-    console.log('Welcome');
-  }
-}
+let store = createStore(todoApp)
 
-new Welcome();
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)