diff options
17 files changed, 310 insertions, 13 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') +) diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim index 78d07c3d1..94d45039b 100644 --- a/app/views/routes/_form.html.slim +++ b/app/views/routes/_form.html.slim @@ -1,3 +1,4 @@ +div#root = simple_form_for [@referential, @line, @route] do |f| .row .col-lg-4.col-md-4.col-sm-4.col-xs-4 @@ -32,5 +33,3 @@ = f.button :submit, class: 'btn btn-danger' -// TEST ES6 -= javascript_include_tag 'es6_browserified/test.js' diff --git a/app/views/routes/new.html.slim b/app/views/routes/new.html.slim index e91ebf362..8cd0d2fb3 100644 --- a/app/views/routes/new.html.slim +++ b/app/views/routes/new.html.slim @@ -1,3 +1,6 @@ = title_tag t('routes.new.title') -== render 'form'
\ No newline at end of file +== render 'form' + +// TEST ES6 += javascript_include_tag 'es6_browserified/test.js' diff --git a/config/application.rb b/config/application.rb index b90950607..93a4cc8fd 100644 --- a/config/application.rb +++ b/config/application.rb @@ -28,6 +28,6 @@ module ChouetteIhm config.i18n.default_locale = :fr # Configure Browserify to use babelify to compile ES6 - config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] ]" + config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]" end end diff --git a/package.json b/package.json index a64f25f36..4ef792f7e 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,16 @@ { "name": "something", "dependencies": { + "babel-polyfill": "^6.16.0", "babel-preset-es2015": "^6.18.0", + "babel-preset-react": "^6.16.0", "babelify": "^7.3.0", - "browserify": "^10.2.6", - "browserify-incremental": "^3.1.1" + "browserify": "^13.1.1", + "browserify-incremental": "^3.1.1", + "react": "^15.3.2", + "react-dom": "^15.3.2", + "react-redux": "^4.4.5", + "redux": "^3.6.0" }, "license": "MIT", "engines": { |