computing entries from redux xmldata

src/LexSetup.tsx

@@ -21,48 +21,55 @@ const fieldMetaMap = {
   lang: { lens: '$.id', type: 'select', options: ['en', 'es'] },
 };
 
+const xmlToEntries = (xmlData: any) => {
+  let allEntries = _.chain(xmlData)
+    .get<any>('document.lexicon[0].item')
+    .flatMap((o: any) => _.chain(o)
+      .get<any>('entry')
+      .map((p: any) => _.chain(p)
+        .get<any>('lang[0]')
+        .set('guid[0]', o.$.guid)
+        .value())
+      .value()
+    )
+    .value();
+  let langReducer = ((result: any, q: any) => {
+    let lang = _.get<any>(q, fieldMetaMap.lang.lens, 'en');
+    (result[lang] || (result[lang] = [])).push(q);
+    return result;
+  });
+  let langEntries = _.reduce(allEntries, langReducer, {});
+  let langs = _.keys(langEntries);
+  let selectFields = _.fromPairs(langs.map((lang) => {
+    let langOpts = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
+      return fieldMetaMap[s].type === 'select';
+    }).map((s) => {
+      let lens = fieldMetaMap[s].lens;
+      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];
+  }));
+  return ({
+    allEntries, selectFields, fieldMetaMap
+  });
+};
+
 export class LexSetup extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { xmlLoaded: false };
+  }
   public componentDidMount() {
     fetch(this.props.fileName)
       .then((response) => response.text())
       .then((xmlString) => {
-        XML.parseString(xmlString, (err, lexData) => {
+        XML.parseString(xmlString, (err, xmlData) => {
-          let allEntries = _.chain(lexData)
+          this.props.addXmlData(xmlData);
-            .get<any>('document.lexicon[0].item')
+          this.setState({ xmlLoaded: true });
-            .flatMap((o: any) => _.chain(o)
-              .get<any>('entry')
-              .map((p: any) => _.chain(p)
-                .get<any>('lang[0]')
-                .set('guid[0]', o.$.guid)
-                .value())
-              .value()
-            )
-            .value();
-
-          let langReducer = ((result: any, q: any) => {
-            let lang = _.get<any>(q, fieldMetaMap.lang.lens, 'en');
-            (result[lang] || (result[lang] = [])).push(q);
-            return result;
-          });
-          let langEntries = _.reduce(allEntries, langReducer, {});
-          let langs = _.keys(langEntries);
-          let selectFields = _.fromPairs(langs.map((lang) => {
-            let langOpts = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
-              return fieldMetaMap[s].type === 'select';
-            }).map((s) => {
-              let lens = fieldMetaMap[s].lens;
-              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.props.addXmlData(lexData);
-          this.setState({
-            allEntries, selectFields, fieldMetaMap
-          });
         });
       })
       .catch((e) => {
@@ -71,8 +78,8 @@ export class LexSetup extends React.Component<any, any> {
   }
 
   render() {
-    return this.state ? (
+    return this.state.xmlLoaded ? (
-      <LexEditor {...this.state} {...this.props} />
+      <LexEditor {...xmlToEntries(this.props.xmlData)} {...this.props} />
     ) : (
         <Dimmer active={true} inverted={true}>
           <Loader inverted={true}>Loading</Loader>