react toggle ToDo update via API

Author: mosufy

public/js/bundle.js

@@ -29440,9 +29440,12 @@
 	};
 
 	var toggleCompleted = exports.toggleCompleted = function toggleCompleted(id) {
+	  var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	
 	  return {
 	    type: 'TOGGLE_COMPLETED',
-	    id: id
+	    id: id,
+	    payload: payload
 	  };
 	};
 
@@ -30380,6 +30383,7 @@
 	exports.refreshToken = refreshToken;
 	exports.getTodos = getTodos;
 	exports.addTodo = addTodo;
+	exports.toggleTodo = toggleTodo;
 
 	var _constant = __webpack_require__(285);
 
@@ -30467,6 +30471,10 @@
 	    title: text
 	  }, config(accessToken));
 	}
+	
+	function toggleTodo(accessToken, id) {
+	  return _axios2.default.put(_constant2.default.apiUrl + '/todos/' + id + '/toggle', null, config(accessToken));
+	}
 
 /***/ },
 /* 285 */
@@ -32313,10 +32321,12 @@
 	    key: 'render',
 	    value: function render() {
 	      var addTodo = this.props.addTodo.bind(this, this.props.auth.accessToken);
+	      var toggleCompleted = this.props.toggleCompleted.bind(this, this.props.auth.accessToken);
+	
 	      return _react2.default.createElement(_MyTodo2.default, { items: this.props.todos,
 	        visibilityFilter: this.props.visibilityFilter,
 	        addTodo: addTodo,
-	        toggleCompleted: this.props.toggleCompleted,
+	        toggleCompleted: toggleCompleted,
 	        setVisibilityFilter: this.props.setVisibilityFilter,
 	        resetTodo: this.props.resetTodo,
 	        loading: this.props.loading });
@@ -32365,8 +32375,16 @@
 
 	      todoName.val('');
 	    },
-	    toggleCompleted: function toggleCompleted(e) {
+	    toggleCompleted: function toggleCompleted(accessToken, e) {
 	      var id = $(e.target).closest("input").attr('id');
+	
+	      (0, _sdk.toggleTodo)(accessToken, id).then(function (response) {
+	        dispatch(actionCreators.toggleCompleted(id, response));
+	      }).catch(function (error) {
+	        console.log('Failed to toggle ToDo');
+	        console.log(error);
+	      });
+	
 	      dispatch(actionCreators.toggleCompleted(id));
 	    },
 	    setVisibilityFilter: function setVisibilityFilter(e) {
@@ -33535,8 +33553,14 @@
 	          return todo;
 	        }
 
+	        if (Object.keys(action.payload).length === 0) {
+	          return _extends({}, todo, {
+	            completed: !todo.completed
+	          });
+	        }
+	
 	        return _extends({}, todo, {
-	          completed: !todo.completed
+	          completed: action.payload.data.data[0].attributes.is_completed
 	        });
 	      });
 	    case 'RESET_TODO':

public/js/bundle.js.map

@@ -13,10 +13,11 @@ export const addTodo = (payload) => {
   }
 };
 
-export const toggleCompleted = (id) => {
+export const toggleCompleted = (id, payload = {}) => {
   return {
     type: 'TOGGLE_COMPLETED',
-    id: id
+    id: id,
+    payload
   }
 };
 

resources/app/actions/index.js

@@ -10,7 +10,7 @@ import React from 'react';
 import MyTodo from './../components/MyTodo';
 import {connect} from 'react-redux';
 import * as actionCreators from './../actions';
-import {getTodos, addTodo} from './../helpers/sdk';
+import {getTodos, addTodo, toggleTodo} from './../helpers/sdk';
 
 class DashboardContainer extends React.Component {
   componentWillMount() {
@@ -19,11 +19,13 @@ class DashboardContainer extends React.Component {
 
   render() {
     var addTodo = this.props.addTodo.bind(this, this.props.auth.accessToken);
+    var toggleCompleted = this.props.toggleCompleted.bind(this, this.props.auth.accessToken);
+
     return (
       <MyTodo items={this.props.todos}
               visibilityFilter={this.props.visibilityFilter}
               addTodo={addTodo}
-              toggleCompleted={this.props.toggleCompleted}
+              toggleCompleted={toggleCompleted}
               setVisibilityFilter={this.props.setVisibilityFilter}
               resetTodo={this.props.resetTodo}
               loading={this.props.loading}/>
@@ -70,8 +72,16 @@ const mapDispatchToProps = (dispatch) => {
 
       todoName.val('');
     },
-    toggleCompleted: (e) => {
+    toggleCompleted: (accessToken, e) => {
       var id = $(e.target).closest("input").attr('id');
+
+      toggleTodo(accessToken, id).then(function (response) {
+        dispatch(actionCreators.toggleCompleted(id, response));
+      }).catch(function (error) {
+        console.log('Failed to toggle ToDo');
+        console.log(error);
+      });
+
       dispatch(actionCreators.toggleCompleted(id));
     },
     setVisibilityFilter: (e) => {

resources/app/containers/DashboardContainer.js

@@ -74,4 +74,8 @@ export function addTodo(accessToken, text) {
   return axios.post(Constant.apiUrl + '/todos', {
     title: text
   }, config(accessToken));
+}
+
+export function toggleTodo(accessToken, id) {
+  return axios.put(Constant.apiUrl + '/todos/' + id + '/toggle', null, config(accessToken));
 }

resources/app/helpers/sdk.js

@@ -25,9 +25,16 @@ const todos = (state = [], action) => {
           return todo;
         }
 
+        if (Object.keys(action.payload).length === 0) {
+          return {
+            ...todo,
+            completed: !todo.completed
+          }
+        }
+
         return {
           ...todo,
-          completed: !todo.completed
+          completed: action.payload.data.data[0].attributes.is_completed
         }
       });
     case 'RESET_TODO':