1. search text/type is now redux store state

src/App.tsx

@@ -7,9 +7,7 @@ import { walleStore } from './WallEStore';
 import { Header, Icon, Segment } from 'semantic-ui-react';
 
 function mapStateToProps(state: any) {
-  return {
+  return { searchProp: state.search, lexicon: state.lexicon };
-    lexicon: state.lexicon
-  };
 }
 
 function mapDispachToProps(dispatch: any) {

src/LexComponents.tsx

@@ -66,6 +66,7 @@ export class LexEditor extends React.Component<any, any> {
             }));
             return [s, selectOptions];
           }));
+          this.forceUpdate();
         });
       })
       .catch((e) => {
@@ -74,18 +75,26 @@ export class LexEditor extends React.Component<any, any> {
   }
 
   public render() {
+    let searchLens = this.fieldMetaMap[this.props.searchProp.searchType].lens;
+    let searchText = this.props.searchProp.searchValue;
+    const matchedEntries = _.chain(this.allEntries)
+      .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
+      .take(10)
+      .value();
     return (
       <div>
         <LexSearch
-          {...{fieldMetaMap: this.fieldMetaMap}}
+          {...{ fieldMetaMap: this.fieldMetaMap }}
           handleOnSearch={(e: any) => this.handleOnSearch(e)}
+          searchValue={searchText}
+          searchType={this.props.searchProp.searchType}
         />
         <LexMatches
           {...{ fieldMetaMap: this.fieldMetaMap }}
-          matchedEntries={this.state.matchedEntries}
+          matchedEntries={matchedEntries}
           selectionMeta={this.selectFields}
-          searchText={this.state.searchText}
+          searchText={searchText}
-          searchLens={this.state.searchLens}
+          searchLens={searchLens}
         />
       </div>
     );
@@ -93,12 +102,13 @@ export class LexEditor extends React.Component<any, any> {
 
   private handleOnSearch(searchEvent: any): void {
     let searchText = searchEvent.searchValue;
+    let searchType = searchEvent.searchType;
     let searchLens = this.fieldMetaMap[searchEvent.searchType].lens;
     let matchedEntries = _.chain(this.allEntries)
       .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
       .take(10)
       .value();
-    this.props.search(searchText);
+    this.props.search(searchText, searchType);
     this.setState({ ...this.state, matchedEntries, searchText, searchLens });
   }
 }
@@ -117,7 +127,7 @@ class LexSearch extends React.Component<any, any> {
         <Dropdown
           options={dropOptions}
           onChange={(e, d) => this.handleChange(d, true)}
-          defaultValue={dropOptions[0].value}
+          value={this.props.searchType}
           compact={true}
           selection={true}
         />
@@ -125,6 +135,7 @@ class LexSearch extends React.Component<any, any> {
           type="text"
           placeholder="Search input"
           dir="auto"
+          value={this.props.searchValue}
           onChange={(e, d) => this.handleChange(d, false)}
         />
       </div>

src/LexEdit.tsx

@@ -15,14 +15,13 @@ export class LexEdit extends React.Component<any, any> {
   public render() {
     let li = this.props.lexItem;
     let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
-      let defaultText = _.get<any>(li, this.props.fieldMetaMap[field].lens, '');
+      let lens = this.props.fieldMetaMap[field].lens;
+      let defaultText = _.get<any>(li, lens, '');
       let sh = (e: any) => {
         let eventData = {};
         eventData[field] = e.target.value;
         this.handleOnChange(eventData);
       };
-      // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
-      // _.findIndex(['text', 'number'], pred) !== -1
       if (this.props.fieldMetaMap[field].type === 'text') {
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
@@ -37,6 +36,7 @@ export class LexEdit extends React.Component<any, any> {
           </LexSingleInput>
         );
       } else if (this.props.fieldMetaMap[field].type === 'select') {
+        let selOpts = _.get<any>(this.props.selectionMeta, field, []);
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <select
@@ -44,7 +44,7 @@ export class LexEdit extends React.Component<any, any> {
               style={{ width: '10em' }}
               defaultValue={defaultText}
             >
-              {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
+              {selOpts.map((k: any, i: any, c: any) => {
                 return <option key={i} value={k}> {k}</option>;
               })}
             </select>

src/WallEStore.tsx

@@ -2,7 +2,7 @@ import { createStore } from 'redux';
 import rootReducer from './reducers/index';
 
 const defaultState = {
-  search: 'world'
+  search: { searchValue: 'just', searchType: 'label' }
 };
 
 const devToolsKey = '__REDUX_DEVTOOLS_EXTENSION__';

src/actions/actionCreators.tsx

@@ -1,7 +1,15 @@
 
-export function search(searchKey: any) {
+export function search(searchValue: any, searchType: any) {
   return {
     type: 'ACTION_SEARCH_TEXT',
-    searchKey
+    searchType,
+    searchValue
+  };
+}
+
+export function save(lexItem: any) {
+  return {
+    type: 'ACTION_SAVE_LEXITEM',
+    lexItem,
   };
 }

src/reducers/index.tsx

@@ -1,12 +1,26 @@
 import { combineReducers } from 'redux';
 
-function search(state: any = [], action: any) {
+function search(state: any = {}, action: any) {
   if (action.type === 'ACTION_SEARCH_TEXT') {
-    console.log(state, action);
+    return {
+      ...state,
+      searchValue: action.searchValue,
+      searchType: action.searchType
+    };
   }
   return state;
 }
 
-const rootReducer = combineReducers({ search });
+function save(state: any = {}, action: any) {
+  if (action.type === 'ACTION_SAVE_LEXITEM') {
+    return {
+      ...state,
+      lexItem: action.lexItem,
+    };
+  }
+  return state;
+}
+
+const rootReducer = combineReducers({ search, save });
 
 export default rootReducer;