computing entries from redux xmldata

src/LexSetup.tsx

@@ -21,13 +21,8 @@ const fieldMetaMap = {
   lang: { lens: '$.id', type: 'select', options: ['en', 'es'] },
 };
 
-export class LexSetup extends React.Component<any, any> {
-  public componentDidMount() {
-    fetch(this.props.fileName)
-      .then((response) => response.text())
-      .then((xmlString) => {
-        XML.parseString(xmlString, (err, lexData) => {
-          let allEntries = _.chain(lexData)
+const xmlToEntries = (xmlData: any) => {
+  let allEntries = _.chain(xmlData)
     .get<any>('document.lexicon[0].item')
     .flatMap((o: any) => _.chain(o)
       .get<any>('entry')
@@ -38,7 +33,6 @@ export class LexSetup extends React.Component<any, any> {
       .value()
     )
     .value();
-
   let langReducer = ((result: any, q: any) => {
     let lang = _.get<any>(q, fieldMetaMap.lang.lens, 'en');
     (result[lang] || (result[lang] = [])).push(q);
@@ -59,10 +53,23 @@ export class LexSetup extends React.Component<any, any> {
     }));
     return [lang, langOpts];
   }));
-          this.props.addXmlData(lexData);
-          this.setState({
+  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, xmlData) => {
+          this.props.addXmlData(xmlData);
+          this.setState({ xmlLoaded: true });
         });
       })
       .catch((e) => {
@@ -71,8 +78,8 @@ export class LexSetup extends React.Component<any, any> {
   }
 
   render() {
-    return this.state ? (
-      <LexEditor {...this.state} {...this.props} />
+    return this.state.xmlLoaded ? (
+      <LexEditor {...xmlToEntries(this.props.xmlData)} {...this.props} />
     ) : (
         <Dimmer active={true} inverted={true}>
           <Loader inverted={true}>Loading</Loader>