added fieldmetamap to LexEditor

src/LexComponents.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+// import { connect } from 'react-redux';
 import * as _ from 'lodash';
-import { LexEdit, fieldMetaMap } from './LexEdit';
+import { LexEdit } from './LexEdit';
 import {
   Input,
   Dropdown,
@@ -13,10 +14,28 @@ interface LexEditorProps {
 }
 // const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
 
-export class LexEditor extends React.Component<LexEditorProps, any> {
+// container component
+export class LexEditor extends React.Component<any, any> {
   lexData: any;
   allEntries: any;
   selectFields: any;
+  fieldMetaMap = {
+    label: { lens: 'label[0]', type: 'text' },
+    unl: { lens: 'unl[0]', type: 'text' },
+    synset: { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
+    guid: { lens: 'guid[0]', type: 'text' },
+    pos: { lens: 'pos[0]', type: 'select' },
+    image: { lens: 'image[0]', type: 'preview' },
+    relations: { lens: 'relations[0]', type: 'text' },
+    frame: { lens: 'syntacticprops[0].property[0]._', type: 'select' },
+    morphclass: {
+      lens: 'lexprops[0].morphology[0].morph[0]._',
+      type: 'select'
+    },
+    stats: { lens: 'stats[0].property[0]._', type: 'text' },
+    lang: { lens: '$.id', type: 'select' },
+  };
+
   constructor(props: LexEditorProps) {
     super(props);
     this.state = { matchedEntries: [], searchText: '' };
@@ -39,10 +58,10 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
               .value()
             )
             .value();
-          this.selectFields = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
-            return fieldMetaMap[s].type === 'select';
+          this.selectFields = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => {
+            return this.fieldMetaMap[s].type === 'select';
           }).map((s) => {
-            let lens = fieldMetaMap[s].lens;
+            let lens = this.fieldMetaMap[s].lens;
             let selectOptions = _.uniq(this.allEntries.map((q: any) => {
               return _.get<any>(q, lens, '');
             }));
@@ -58,8 +77,12 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
   public render() {
     return (
       <div>
-        <LexSearch handleOnSearch={(e: any) => this.handleOnSearch(e)} />
+        <LexSearch
+          {...{ fieldMetaMap: this.fieldMetaMap }}
+          handleOnSearch={(e: any) => this.handleOnSearch(e)}
+        />
         <LexMatches
+          {...{ fieldMetaMap: this.fieldMetaMap }}
           matchedEntries={this.state.matchedEntries}
           selectionMeta={this.selectFields}
           searchText={this.state.searchText}
@@ -71,7 +94,7 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
 
   private handleOnSearch(searchEvent: any): void {
     let searchText = searchEvent.searchValue;
-    let searchLens = fieldMetaMap[searchEvent.searchType].lens;
+    let searchLens = this.fieldMetaMap[searchEvent.searchType].lens;
     let matchedEntries = _.chain(this.allEntries)
       .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
       .take(10)
@@ -80,11 +103,13 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
   }
 }
 
+// export const ReduxLexEditor = connect()(LexEditor);
+
 class LexSearch extends React.Component<any, any> {
   searchType: String = 'label';
   searchValue: String = '';
   public render() {
-    let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => {
+    let dropOptions = _.keys(this.props.fieldMetaMap).map((k, i, c) => {
       return { key: i, value: k, text: _.capitalize(k) };
     });
     return (
@@ -119,7 +144,8 @@ class LexSearch extends React.Component<any, any> {
   }
 }
 
-function selectMode(props: any) {
+function LexMatches(params: any) {
+  const selectMode = (props: any) => {
     if (props.searchText === '') {
       return (
         <div>
@@ -132,6 +158,7 @@ function selectMode(props: any) {
         let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
         return (
           <LexEdit
+            {...{ fieldMetaMap: props.fieldMetaMap }}
             key={uniqueKey}
             lexItem={mObj}
             selectionMeta={props.selectionMeta}
@@ -142,6 +169,7 @@ function selectMode(props: any) {
       _.set(addProps, props.searchLens, props.searchText);
       let addEntry = (
         <LexEdit
+          {...{ fieldMetaMap: props.fieldMetaMap }}
           key={props.searchText}
           lexItem={addProps}
           selectionMeta={props.selectionMeta}
@@ -150,12 +178,11 @@ function selectMode(props: any) {
       editEntries.push(addEntry);
       return editEntries;
     }
-}
+  };
 
-function LexMatches(props: any) {
   return (
     <Flex wrap={true}>
-      {selectMode(props)}
+      {selectMode(params)}
     </Flex>
   );
 }

src/LexEdit.tsx

@@ -11,28 +11,28 @@ const { Box } = require('reflexbox');
 
 const imageRoot = 'http://localhost:3000/png/';
 
-export const fieldMetaMap = {
-  'label': { lens: 'label[0]', type: 'text' },
-  'unl': { lens: 'unl[0]', type: 'text' },
-  'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
-  'guid': { lens: 'guid[0]', type: 'text' },
-  'pos': { lens: 'pos[0]', type: 'select' },
-  'image': { lens: 'image[0]', type: 'preview' },
-  'relations': { lens: 'relations[0]', type: 'text' },
-  'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' },
-  'morphclass': {
-    lens: 'lexprops[0].morphology[0].morph[0]._',
-    type: 'select'
-  },
-  'stats': { lens: 'stats[0].property[0]._', type: 'text' },
-  'lang': { lens: '$.id', type: 'select' },
-};
+// export const fieldMetaMap = {
+//   label: { lens: 'label[0]', type: 'text' },
+//   unl: { lens: 'unl[0]', type: 'text' },
+//   synset: { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
+//   guid: { lens: 'guid[0]', type: 'text' },
+//   pos: { lens: 'pos[0]', type: 'select' },
+//   image: { lens: 'image[0]', type: 'preview' },
+//   relations: { lens: 'relations[0]', type: 'text' },
+//   frame: { lens: 'syntacticprops[0].property[0]._', type: 'select' },
+//   morphclass: {
+//     lens: 'lexprops[0].morphology[0].morph[0]._',
+//     type: 'select'
+//   },
+//   stats: { lens: 'stats[0].property[0]._', type: 'text' },
+//   lang: { lens: '$.id', type: 'select' },
+// };
 
 export class LexEdit extends React.Component<any, any> {
   public render() {
     let li = this.props.lexItem;
-    let lexFields = _.keys(fieldMetaMap).map(field => {
-      let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
+    let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
+      let defaultText = _.get<any>(li, this.props.fieldMetaMap[field].lens, '');
       let sh = (e: any) => {
         let eventData = {};
         eventData[field] = e.target.value;
@@ -40,7 +40,7 @@ export class LexEdit extends React.Component<any, any> {
       };
       // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
       // _.findIndex(['text', 'number'], pred) !== -1
-      if (fieldMetaMap[field].type === 'text') {
+      if (this.props.fieldMetaMap[field].type === 'text') {
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <Input
@@ -53,7 +53,7 @@ export class LexEdit extends React.Component<any, any> {
             />
           </LexSingleInput>
         );
-      } else if (fieldMetaMap[field].type === 'select') {
+      } else if (this.props.fieldMetaMap[field].type === 'select') {
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>
             <select
@@ -67,7 +67,7 @@ export class LexEdit extends React.Component<any, any> {
             </select>
           </LexSingleInput>
         );
-      } else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
+      } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
         let imageSrc = imageRoot + defaultText;
         return (
           <LexSingleInput key={field} labelText={_.capitalize(field)}>

src/reducers/index.tsx

@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux';
 
 function search(state: any = [], action: any) {
+  if (action.type === 'ACTION_SEARCH_TEXT') {
     console.log(state, action);
+  }
   return state;
 }