Added item list

src/actions/autoComplete.ts

@@ -21,14 +21,14 @@ function setItems(response: any) {
 export function save(value: string, item: any) {
   return {
     type: actionTypes.SAVE,
-    value,
+    item,
   };
 }
 
 function savedResult(response: any) {
   return {
     type: actionTypes.SAVE_RESULT,
-    response,
+    item: response,
   };
 }
 
@@ -43,8 +43,6 @@ export const saveEpic: Epic<any, any> = (action$) =>
   action$.ofType(actionTypes.SAVE)
     .mergeMap((action) =>
       Observable
-        .of([
-          {id: 1, value: 'apple'},
-        ])
+        .of(action.item)
         .map((response) => savedResult(response)),
     );

src/actions/index.ts

@@ -1,5 +1,5 @@
 import { combineEpics } from 'redux-observable';
-import { query, queryEpic, save, saveEpic } from './auto_complete';
+import { query, queryEpic, save, saveEpic } from './autoComplete';
 
 const rootEpic = combineEpics(
   queryEpic,

src/components/itemList/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { ItemList as Presenter } from './presenter';
+
+function mapStateToProps(state: any) {
+  const { items } = state.itemList;
+  return {
+    items,
+  };
+}
+
+function mapDispatchToProps() {
+  return {};
+}
+
+export const ItemList = connect(mapStateToProps, mapDispatchToProps)(Presenter);

src/components/itemList/presenter.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export class ItemList extends React.Component<any, any> {
+  public render() {
+    return (
+      <ul>
+        {this.props.items.map((item: any, index: number) => {
+           return <li key={item.abbr}>{item.name}</li>;
+        })}
+      </ul>
+    );
+  }
+}

src/index.tsx

@@ -4,12 +4,16 @@ import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import configureStore from './stores/configureStore';
 import { Autocomplete } from './components/autoComplete';
+import { ItemList } from './components/itemList';
 
 const store = configureStore();
 
 ReactDOM.render(
   <Provider store={store}>
-    <Autocomplete />
+    <div>
+      <Autocomplete />
+      <ItemList />
+    </div>
   </Provider>,
   document.getElementById('app'),
 );

src/reducers/autoComplete.ts

@@ -10,6 +10,8 @@ export default function(state = initialState, action: any) {
       return setValue(state, action);
     case actionTypes.SET_ITEMS:
       return setItems(state, action);
+    case actionTypes.SAVE:
+      return saveItem(state, action);
   }
   return state;
 }
@@ -23,3 +25,8 @@ function setValue(state: any, action: any) {
   const { value } = action;
   return { ...state, value };
 }
+
+function saveItem(state: any, action: any) {
+  const value = '';
+  return { ...state, value };
+}

src/reducers/index.ts

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux';
 import autoComplete from './autoComplete';
+import itemList from './itemList';
 
 export default combineReducers({
   autoComplete,
+  itemList,
 });

src/reducers/itemList.ts

@@ -0,0 +1,24 @@
+import * as actionTypes from '../constants/actionTypes';
+
+const initialState = {
+  items: [],
+};
+
+export default function(state = initialState, action: any) {
+  switch (action.type) {
+    case actionTypes.SAVE_RESULT:
+      return saveItem(state, action);
+  }
+  return state;
+}
+
+function saveItem(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]};
+}