Add first features (add / moveup / movedown / delete) to stops list

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>
Signed-off-by: Paul-Xavier Ceccaldi <paul-xavier.ceccaldi@af83.com>
Signed-off-by: Mickael Gaeta <mickael.gaeta@af83.com>
Signed-off-by: Jean-Paul Lescouzeres <jean-paul.lescouzeres@af83.com>

12 files changed, 99 insertions, 157 deletions

diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js
index 99b50384a..e90631c7f 100644
--- a/app/assets/javascripts/es6_browserified/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/actions/index.js
@@ -1,25 +1,31 @@
 let nextTodoId = 0
 module.exports = {
 
-  addTodo : (text) => {
+  addStop : () => {
     return {
-      type: 'ADD_TODO',
-      id: nextTodoId++,
-      text
+      type: 'ADD_STOP',
+      id: nextTodoId++
     }
   },
 
-  setVisibilityFilter : (filter) => {
+  moveStopUp : (index) => {
     return {
-      type: 'SET_VISIBILITY_FILTER',
-      filter
+      type: 'MOVE_STOP_UP',
+      index
     }
   },
 
-  toggleTodo : (id) => {
+  moveStopDown : (index) => {
     return {
-      type: 'TOGGLE_TODO',
-      id
+      type: 'MOVE_STOP_DOWN',
+      index
     }
   },
+
+  deleteStop: (index) => {
+    return {
+      type: 'DELETE_STOP',
+      index
+    }
+  }
 }
diff --git a/app/assets/javascripts/es6_browserified/components/App.js b/app/assets/javascripts/es6_browserified/components/App.js
index 62db53da1..7488b0b39 100644
--- a/app/assets/javascripts/es6_browserified/components/App.js
+++ b/app/assets/javascripts/es6_browserified/components/App.js
@@ -1,5 +1,4 @@
 var React = require('react')
-var Footer = require('./Footer')
 var AddTodo = require('../containers/AddTodo')
 var VisibleTodoList = require('../containers/VisibleTodoList')
 
@@ -7,7 +6,6 @@ const App = () => (
   <div>
     <AddTodo />
     <VisibleTodoList />
-    <Footer />
   </div>
 )
 
diff --git a/app/assets/javascripts/es6_browserified/components/Footer.js b/app/assets/javascripts/es6_browserified/components/Footer.js
deleted file mode 100644
index de839f11f..000000000
--- a/app/assets/javascripts/es6_browserified/components/Footer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 54daea2b6..000000000
--- a/app/assets/javascripts/es6_browserified/components/Link.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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
index d0a83917f..a64c38c63 100644
--- a/app/assets/javascripts/es6_browserified/components/Todo.js
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -1,21 +1,45 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
 
-const Todo = ({ onClick, completed, text }) => (
-  <li
-    onClick={onClick}
-    style={{
-      textDecoration: completed ? 'line-through' : 'none'
-    }}
+const Todo = (props)  => (
+  <div
+    className="list-group-item"
   >
-    {text}
-  </li>
+    <div>
+      <em className="small">{props.id}</em>
+    </div>
+    <div className="text-right">
+      <div className="btn-group btn-group-sm">
+        <div className="btn btn-default">
+          <span className="fa fa-times"></span>
+        </div>
+        <div
+          className="btn btn-primary"
+          onClick={props.onMoveUpClick}
+        >
+          <span className="fa fa-arrow-up"></span>
+        </div>
+        <div
+          className="btn btn-primary"
+          onClick={props.onMoveDownClick}
+        >
+          <span className="fa fa-arrow-down"></span>
+        </div>
+        <div
+          className="btn btn-danger"
+          onClick={props.onDeleteClick}
+        >
+          <span className="fa fa-trash"></span>
+        </div>
+      </div>
+    </div>
+  </div>
 )
 
 Todo.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  completed: PropTypes.bool.isRequired,
-  text: PropTypes.string.isRequired
+  onDeleteClick: PropTypes.func.isRequired,
+  onMoveUpClick: PropTypes.func.isRequired,
+  onMoveDownClick: PropTypes.func.isRequired
 }
 
 module.exports = Todo
diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js
index beabfb2c2..f81b8171d 100644
--- a/app/assets/javascripts/es6_browserified/components/TodoList.js
+++ b/app/assets/javascripts/es6_browserified/components/TodoList.js
@@ -2,25 +2,27 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 var Todo = require('./Todo')
 
-const TodoList = ({ todos, onTodoClick }) => (
-  <ul>
-    {todos.map(todo =>
+const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick }) => (
+  <div className='list-group'>
+    {todos.map((todo, index) =>
       <Todo
         key={todo.id}
         {...todo}
-        onClick={() => onTodoClick(todo.id)}
+        onDeleteClick={() => onDeleteClick(index)}
+        onMoveUpClick={() => onMoveUpClick(index)}
+        onMoveDownClick={() => onMoveDownClick(index)}
       />
     )}
-  </ul>
+  </div>
 )
 
 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
+  onDeleteClick: PropTypes.func.isRequired,
+  onMoveUpClick: PropTypes.func.isRequired,
+  onMoveDownClick: 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
index 41c37063b..90a187f5f 100644
--- a/app/assets/javascripts/es6_browserified/containers/AddTodo.js
+++ b/app/assets/javascripts/es6_browserified/containers/AddTodo.js
@@ -1,6 +1,6 @@
 var React = require('react')
 var connect = require('react-redux').connect
-var addTodo = require('../actions').addTodo
+var addTodo = require('../actions').addStop
 
 let AddTodo = ({ dispatch }) => {
   let input
@@ -9,15 +9,8 @@ let AddTodo = ({ dispatch }) => {
     <div>
       <form onSubmit={e => {
         e.preventDefault()
-        if (!input.value.trim()) {
-          return
-        }
-        dispatch(addTodo(input.value))
-        input.value = ''
+        dispatch(addTodo())
       }}>
-        <input ref={node => {
-          input = node
-        }} />
         <button type="submit">
           Add Todo
         </button>
diff --git a/app/assets/javascripts/es6_browserified/containers/FilterLink.js b/app/assets/javascripts/es6_browserified/containers/FilterLink.js
deleted file mode 100644
index 7f6778277..000000000
--- a/app/assets/javascripts/es6_browserified/containers/FilterLink.js
+++ /dev/null
@@ -1,24 +0,0 @@
-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
index 5a70582e0..a6452018b 100644
--- a/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js
+++ b/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js
@@ -1,28 +1,26 @@
 var connect = require('react-redux').connect
 var toggleTodo = require('../actions').toggleTodo
+var deleteStop = require('../actions').deleteStop
+var moveStopUp = require('../actions').moveStopUp
+var moveStopDown = require('../actions').moveStopDown
 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)
+    todos: state.todos
   }
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onTodoClick: (id) => {
-      dispatch(toggleTodo(id))
+    onDeleteClick: (index) =>{
+      dispatch(deleteStop(index))
+    },
+    onMoveUpClick: (index) =>{
+      dispatch(moveStopUp(index))
+    },
+    onMoveDownClick: (index) =>{
+      dispatch(moveStopDown(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/reducers/index.js b/app/assets/javascripts/es6_browserified/reducers/index.js
index 67dbfa862..ae8423673 100644
--- a/app/assets/javascripts/es6_browserified/reducers/index.js
+++ b/app/assets/javascripts/es6_browserified/reducers/index.js
@@ -1,10 +1,8 @@
 var  combineReducers  = require('redux').combineReducers
 var todos = require('./todos')
-var visibilityFilter = require('./visibilityFilter')
 
 const todoApp = combineReducers({
-  todos,
-  visibilityFilter
+  todos
 })
 
 module.exports = todoApp
diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js
index a99c781ea..f2af9452a 100644
--- a/app/assets/javascripts/es6_browserified/reducers/todos.js
+++ b/app/assets/javascripts/es6_browserified/reducers/todos.js
@@ -1,19 +1,10 @@
 const todo = (state = {}, action) => {
+  console.log('action', action)
   switch (action.type) {
-    case 'ADD_TODO':
+    case 'ADD_STOP':
       return {
-        id: action.id,
-        text: action.text,
-        completed: false
+        id: action.id
       }
-    case 'TOGGLE_TODO':
-      if (state.id !== action.id) {
-        return state
-      }
-
-      return Object.assign({}, state, {
-        completed: !state.completed
-      })
 
     default:
       return state
@@ -22,15 +13,30 @@ const todo = (state = {}, action) => {
 
 const todos = (state = [], action) => {
   switch (action.type) {
-    case 'ADD_TODO':
+    case 'ADD_STOP':
       return [
         ...state,
         todo(undefined, action)
       ]
-    case 'TOGGLE_TODO':
-      return state.map(t =>
-        todo(t, action)
-      )
+    case 'MOVE_STOP_UP':
+      return [
+        ...state.slice(0, action.index - 1),
+        state[action.index],
+        state[action.index - 1],
+        ...state.slice(action.index + 1)
+      ]
+    case 'MOVE_STOP_DOWN':
+      return [
+        ...state.slice(0, action.index),
+        state[action.index + 1],
+        state[action.index],
+        ...state.slice(action.index + 2)
+      ]
+    case 'DELETE_STOP':
+      return [
+        ...state.slice(0, action.index),
+        ...state.slice(action.index + 1)
+      ]
     default:
       return state
   }
diff --git a/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js b/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js
deleted file mode 100644
index 1652ad90c..000000000
--- a/app/assets/javascripts/es6_browserified/reducers/visibilityFilter.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const visibilityFilter = (state = 'SHOW_ALL', action) => {
-  switch (action.type) {
-    case 'SET_VISIBILITY_FILTER':
-      return action.filter
-    default:
-      return state
-  }
-}
-
-module.exports = visibilityFilter