selection options are per language

src/App.tsx

@@ -7,7 +7,7 @@ import { walleStore } from './WallEStore';
 import { Header, Icon, Segment } from 'semantic-ui-react';
 
 function mapStateToProps(state: any) {
-  return { searchProp: state.search, lexicon: state.lexicon };
+  return {...state};
 }
 
 function mapDispachToProps(dispatch: any) {
@@ -26,7 +26,7 @@ export class Main extends React.Component<any, any> {
             </Header.Content>
           </Header>
         </Segment>
-        <LexEditor {...this.props} fileName="/new_es.xml" />
+        <LexEditor {...this.props} fileName="/new_es_orig.xml" />
       </div>
     );
   }

src/LexComponents.tsx

@@ -9,10 +9,6 @@ import {
 import * as XML from 'xml2js';
 const { Flex } = require('reflexbox');
 
-interface LexEditorProps {
-  fileName: RequestInfo;
-}
-
 // container component
 export class LexEditor extends React.Component<any, any> {
   lexData: any;
@@ -32,14 +28,9 @@ export class LexEditor extends React.Component<any, any> {
       type: 'select'
     },
     stats: { lens: 'stats[0].property[0]._', type: 'text' },
-    lang: { lens: '$.id', type: 'select' },
+    lang: { lens: '$.id', type: 'select', options: ['en', 'es'] },
   };
 
-  constructor(props: LexEditorProps) {
-    super(props);
-    this.state = { matchedEntries: [], searchText: '' };
-  }
-
   public componentDidMount() {
     fetch(this.props.fileName)
       .then((response) => response.text())
@@ -57,15 +48,26 @@ export class LexEditor extends React.Component<any, any> {
               .value()
             )
             .value();
-          this.selectFields = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => {
+          let langReducer = ((result: any, q: any) => {
+            let lang = _.get<any>(q, this.fieldMetaMap.lang.lens, 'en');
+            (result[lang] || (result[lang] = [])).push(q);
+            return result;
+          });
+          let langEntries = _.reduce(this.allEntries, langReducer, {});
+          let langs = _.keys(langEntries);
+          this.selectFields = _.fromPairs(langs.map((lang) => {
+            let langOpts = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => {
               return this.fieldMetaMap[s].type === 'select';
             }).map((s) => {
               let lens = this.fieldMetaMap[s].lens;
-            let selectOptions = _.uniq(this.allEntries.map((q: any) => {
+              let entries = _.get<any>(langEntries, lang, 'en');
+              let selectOptions = _.uniq(entries.map((q: any) => {
                 return _.get<any>(q, lens, '');
               }));
               return [s, selectOptions];
             }));
+            return [lang, langOpts];
+          }));
           this.forceUpdate();
         });
       })
@@ -75,9 +77,9 @@ export class LexEditor extends React.Component<any, any> {
   }
 
   public render() {
-    let searchLens = this.fieldMetaMap[this.props.searchProp.searchType].lens;
+    let searchLens = this.fieldMetaMap[this.props.searchState.searchType].lens;
-    let searchText = this.props.searchProp.searchValue;
+    let searchText = this.props.searchState.searchValue;
-    const matchedEntries = _.chain(this.allEntries)
+    let matchedEntries = _.chain(this.allEntries)
       .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
       .take(10)
       .value();
@@ -86,12 +88,11 @@ export class LexEditor extends React.Component<any, any> {
         <LexSearch
           {...this.props}
           {...{ fieldMetaMap: this.fieldMetaMap }}
-          handleOnSearch={(e: any) => this.handleOnSearch(e)}
+        // handleOnSearch={(e: any) => this.handleOnSearch(e)}
         // searchValue={searchText}
         // searchType={this.props.searchProp.searchType}
         />
         <LexMatches
-          {...this.props}
           {...{ fieldMetaMap: this.fieldMetaMap }}
           matchedEntries={matchedEntries}
           selectionMeta={this.selectFields}
@@ -101,18 +102,6 @@ export class LexEditor extends React.Component<any, any> {
       </div>
     );
   }
-
-  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, searchType);
-    this.setState({ ...this.state, matchedEntries, searchText, searchLens });
-  }
 }
 
 // export const ReduxLexEditor = connect()(LexEditor);
@@ -127,7 +116,7 @@ class LexSearch extends React.Component<any, any> {
         <Dropdown
           options={dropOptions}
           onChange={(e, d) => this.handleChange(d, true)}
-          value={this.props.searchProp.searchType}
+          value={this.props.searchState.searchType}
           compact={true}
           selection={true}
         />
@@ -135,7 +124,7 @@ class LexSearch extends React.Component<any, any> {
           type="text"
           placeholder="Search input"
           dir="auto"
-          value={this.props.searchProp.searchValue}
+          value={this.props.searchState.searchValue}
           onChange={(e, d) => this.handleChange(d, false)}
         />
       </div>
@@ -144,9 +133,9 @@ class LexSearch extends React.Component<any, any> {
 
   private handleChange(e: any, t: boolean) {
     if (t) {
-      this.props.searchType(e.value);
+      this.props.searchForType(e.value);
     } else {
-      this.props.searchValue(e.value);
+      this.props.searchForValue(e.value);
     }
   }
 }
@@ -186,6 +175,7 @@ function LexMatches(params: any) {
       return editEntries;
     }
   };
+  // const debouncedSelect = _.throttle(selectMode,10000,{leading:true});
 
   return (
     <Flex wrap={true}>

src/LexEdit.tsx

@@ -9,11 +9,16 @@ import {
 } from 'semantic-ui-react';
 const { Box } = require('reflexbox');
 
-const imageRoot = '/png/';
-
 export class LexEdit extends React.Component<any, any> {
+  imageRoot = '/png/';
+  constructor(props: any) {
+    super(props);
+    this.state = { lexItem: this.props.lexItem };
+  }
   public render() {
-    let li = this.props.lexItem;
+    let li = this.state.lexItem;
+    let editLang = _.get<any>(li, this.props.fieldMetaMap.lang.lens, 'en');
+    let langSelOpts = _.get<any>(this.props.selectionMeta, editLang, []);
     let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
       let lens = this.props.fieldMetaMap[field].lens;
       let defaultText = _.get<any>(li, lens, '');
@@ -36,7 +41,9 @@ 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, []);
+        let staticOpts = this.props.fieldMetaMap[field].options;
+        let fieldOpts = _.get<any>(langSelOpts, field, []);
+        let selOpts = staticOpts ? staticOpts : fieldOpts;
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <select
@@ -51,7 +58,7 @@ export class LexEdit extends React.Component<any, any> {
           </LexSingleInput>
         );
       } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
-        let imageSrc = imageRoot + defaultText;
+        let imageSrc = this.imageRoot + defaultText;
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <Image src={imageSrc} size="tiny" bordered={true} />
@@ -91,10 +98,16 @@ export class LexEdit extends React.Component<any, any> {
   }
 
   private handleOnChange(event: any) {
-    this.setState(event);
+    let type = _.keys(event)[0];
+    let value = _.values(event)[0];
+    let lens = this.props.fieldMetaMap[type].lens;
+    let { lexItem: lexItem } = this.state;
+    _.set(lexItem, lens, value);
+    console.log('setting event :', lexItem);
+    this.setState(lexItem);
   }
 
   private handleOnSave(event: any) {
-    console.log('saving object', this.props.lexItem);
+    console.log('saving object :', this.state.lexItem);
   }
 }

src/WallEStore.tsx

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

src/actionCreators.tsx

@@ -1,20 +1,12 @@
 
-export function search(searchValue: any, searchType: any) {
+export function searchForType(searchType: any) {
-  return {
-    type: 'ACTION_SEARCH_TEXT',
-    searchType,
-    searchValue
-  };
-}
-
-export function searchType(searchType: any) {
   return {
     type: 'ACTION_SEARCH_TYPE_CHANGE',
     searchType
   };
 }
 
-export function searchValue(searchValue: any) {
+export function searchForValue(searchValue: any) {
   return {
     type: 'ACTION_SEARCH_VALUE_CHANGE',
     searchValue

src/reducers.tsx

@@ -25,6 +25,6 @@ function save(state: any = {}, action: any) {
 }
 
 const searchReducer = combineReducers({ searchValue, searchType });
-const rootReducer = combineReducers({ search: searchReducer, save });
+const rootReducer = combineReducers({ searchState: searchReducer, save });
 
 export default rootReducer;