Add color and delay

src/actions/autoComplete.ts

@@ -44,5 +44,6 @@ export const saveEpic: Epic<any, any> = (action$) =>
     .mergeMap((action) =>
       Observable
         .of(action.item)
+        .delay((Math.floor(Math.random() * 10) + 1) * 1000)
         .map((response) => savedResult(response)),
     );

src/components/itemList/presenter.tsx

@@ -5,7 +5,12 @@ export class ItemList extends React.Component<any, any> {
     return (
       <ul>
         {this.props.items.map((item: any, index: number) => {
-           return <li key={item.abbr}>{item.name}</li>;
+           return (
+             <li
+              style={{color: item.saving ? 'red' : 'black'}}
+              key={item.abbr}>
+              {item.name}
+            </li>);
         })}
       </ul>
     );

src/index.tsx

@@ -11,8 +11,9 @@ const store = configureStore();
 ReactDOM.render(
   <Provider store={store}>
     <div>
-      <Autocomplete />
+      <h3>My Favorite States</h3>
       <ItemList />
+      <Autocomplete />
     </div>
   </Provider>,
   document.getElementById('app'),

src/reducers/itemList.ts

@@ -6,19 +6,35 @@ const initialState = {
 
 export default function(state = initialState, action: any) {
   switch (action.type) {
+    case actionTypes.SAVE:
+      return save(state, action);
     case actionTypes.SAVE_RESULT:
-      return saveItem(state, action);
+      return saveResult(state, action);
   }
   return state;
 }
 
-function saveItem(state: any, action: any) {
+function save(state: any, action: any) {
   const { item } = action;
   const { items } = state;
   for (const existing of items) {
     if (existing.abbr === item.abbr) {
       return state;
     }
   }
-  return {...state, items: [...items, item]};
+  return {...state, items: [...items, {
+    ...item,
+    saving: true,
+  }]};
+}
+
+function saveResult(state: any, action: any) {
+  const { item } = action;
+  const { items } = state;
+  return {...state, items: items.map((existing: any) => {
+    if (existing.abbr === item.abbr) {
+      return item;
+    }
+    return existing;
+  })};
 }