feat(widget-chat): add immediate state updates for flag actions

webex · Oct 28, 2016 · 3e19c25 · 3e19c25
1 parent 994d7e8
commit 3e19c25
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 16 deletions.
diff --git a/packages/widget-chat/src/actions/flags.js b/packages/widget-chat/src/actions/flags.js
@@ -1,15 +1,15 @@
-export const BEGIN_RECEIVE_FLAGS = `BEGIN_RECEIVE_FLAGS`;
-function actionBeginReceiveFlags() {
+export const ADD_FLAG = `ADD_FLAG`;
+function actionAddFlag(activity) {
   return {
-    type: BEGIN_RECEIVE_FLAGS
+    type: ADD_FLAG,
+    activity
   };
 }
 
-export const ADD_FLAG = `ADD_FLAG`;
-function actionAddFlag(flag) {
+export const BEGIN_RECEIVE_FLAGS = `BEGIN_RECEIVE_FLAGS`;
+function actionBeginReceiveFlags() {
   return {
-    type: ADD_FLAG,
-    flag
+    type: BEGIN_RECEIVE_FLAGS
   };
 }
 
@@ -29,6 +29,28 @@ function actionRemoveFlag(flag) {
   };
 }
 
+export const REMOVE_FLAG_FAIL = `REMOVE_FLAG_FAIL`;
+function actionRemoveFlagFail(flag) {
+  return {
+    type: REMOVE_FLAG_FAIL,
+    flag
+  };
+}
+
+export const UPDATE_FLAG = `UPDATE_FLAG`;
+function actionUpdateFlag(flag) {
+  return {
+    type: UPDATE_FLAG,
+    flag
+  };
+}
+
+/**
+ * Fetches all of the current user's flags
+ *
+ * @param {any} spark
+ * @returns {function}
+ */
 export function fetchFlags(spark) {
   return (dispatch) => {
     dispatch(actionBeginReceiveFlags());
@@ -39,18 +61,38 @@ export function fetchFlags(spark) {
   };
 }
 
+/**
+ * Flags a given activity. Updates state immediately then
+ * adds flag details given from api
+ *
+ * @param {any} activity
+ * @param {any} spark
+ * @returns {function}
+ */
 export function flagActivity(activity, spark) {
-  return (dispatch) =>
-    spark.flag.create(activity)
+  return (dispatch) => {
+    dispatch(actionAddFlag(activity));
+    return spark.flag.create(activity)
       .then((flag) => {
-        dispatch(actionAddFlag(flag));
+        dispatch(actionUpdateFlag(flag));
       });
+  };
 }
 
+/**
+ * Removes a flag from the server. Updates the state immediately
+ * but re-adds it if the delete fails
+ *
+ * @param {any} flag
+ * @param {any} spark
+ * @returns {function}
+ */
 export function removeFlag(flag, spark) {
-  return (dispatch) =>
-    spark.flag.delete(flag)
-      .then(() => {
-        dispatch(actionRemoveFlag(flag));
+  return (dispatch) => {
+    dispatch(actionRemoveFlag(flag));
+    return spark.flag.delete(flag)
+      .catch(() => {
+        dispatch(actionRemoveFlagFail(flag));
       });
+  };
 }
diff --git a/packages/widget-chat/src/reducers/flags.js b/packages/widget-chat/src/reducers/flags.js
@@ -2,9 +2,14 @@ import {
   ADD_FLAG,
   BEGIN_RECEIVE_FLAGS,
   RECEIVE_FLAGS,
-  REMOVE_FLAG
+  REMOVE_FLAG,
+  REMOVE_FLAG_FAIL,
+  UPDATE_FLAG
 } from '../actions/flags';
 
+const IN_FLIGHT_FLAG_ID = `IN_FLIGHT_FLAG_ID`;
+const IN_FLIGHT_FLAG_URL = `IN_FLIGHT_FLAG_URL`;
+
 function mapFlag(flag) {
   return {
     id: flag.id,
@@ -21,7 +26,11 @@ export default function conversation(state = {
   switch (action.type) {
 
   case ADD_FLAG: {
-    const flag = mapFlag(action.flag);
+    const flag = {
+      id: IN_FLIGHT_FLAG_ID,
+      url: IN_FLIGHT_FLAG_URL,
+      activityUrl: action.activity.url
+    };
     return Object.assign({}, state, {
       flags: [...state.flags, flag]
     });
@@ -49,6 +58,26 @@ export default function conversation(state = {
     });
   }
 
+  case REMOVE_FLAG_FAIL: {
+    const flag = action.flag;
+    return Object.assign({}, state, {
+      flags: [...state.flags, flag]
+    });
+  }
+
+  case UPDATE_FLAG: {
+    const updatedFlag = mapFlag(action.flag);
+    const flags = state.flags.map((flag) => {
+      if (flag.activityUrl === updatedFlag.activityUrl) {
+        return updatedFlag;
+      }
+      return flag;
+    });
+    return Object.assign({}, state, {
+      flags: [...flags]
+    });
+  }
+
   default: {
     return state;
   }