improved xml selection performance

src/LexSetup.tsx

@@ -6,19 +6,16 @@ import * as XML from 'xml2js';
 import { xmlToEntries } from './LexAccessors';
 import { LexEditor } from './LexEditor';
 
-export class LexSetup extends React.Component<any, any> {
-  xmlBuilder = new XML.Builder();
+export class LexXMLSelect extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      xmlLoaded: false, dirty: false, xmlFiles: [], xmlFileName: 'new_es.xml'
+      xmlFiles: [], xmlFileName: 'new_es.xml'
     };
   }
   public componentDidMount() {
     this.getXMLFiles();
-    this.loadXML();
   }
-
   render() {
     let files: string[] = [].concat(this.state.xmlFiles);
     if (files.indexOf(this.state.xmlFileName as string) === -1) {
@@ -27,15 +24,15 @@ export class LexSetup extends React.Component<any, any> {
     let dropOptions = files.map((k: any, i: any, c: any) => {
       return { key: i, value: k, text: k };
     });
-    let selectFile = (
+    let onFileChange = (e: any, d: any) => {
+      this.setState({ xmlFileName: d.value as string });
+      this.props.onFileSelected(d.value);
+    };
+    return (
       <Dropdown
         options={dropOptions}
-        onChange={(e, d) => {
-          this.setState({ xmlFileName: d.value as string });
-        }}
-        onAddItem={(e, d) => {
-          this.setState({ xmlFileName: d.value as string });
-        }}
+        onChange={onFileChange}
+        onAddItem={onFileChange}
         value={this.state.xmlFileName}
         compact={true}
         selection={true}
@@ -47,6 +44,35 @@ export class LexSetup extends React.Component<any, any> {
         }}
       />
     );
+  }
+
+  private getXMLFiles() {
+    fetch('api/xmlfiles')
+      .then((response) => response.text())
+      .then((jsonStr) => {
+        let xmlFiles = JSON.parse(jsonStr);
+        this.setState({ xmlFiles });
+      })
+      .catch((e) => {
+        console.log('errored :', e);
+      });
+  }
+}
+
+export class LexSetup extends React.Component<any, any> {
+  xmlBuilder = new XML.Builder();
+  xmlFileName = 'new_es.xml';
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      xmlLoaded: false, dirty: false, xmlFiles: [],
+    };
+  }
+  public componentDidMount() {
+    this.loadXML();
+  }
+
+  render() {
     let saveButton = this.state.dirty ?
       (
         <Button floated="right" size="mini" onClick={() => { this.saveXML(); }}>
@@ -70,7 +96,11 @@ export class LexSetup extends React.Component<any, any> {
           <Header color="teal" size="mini">
             {saveButton}
             {loadButton}
-            {selectFile}
+            <LexXMLSelect
+              onFileSelected={(nf: string) => {
+                this.xmlFileName = nf;
+              }}
+            />
             <Icon name="edit" size="small" />
             <Header.Content>
               Freespeech Lexicon Editor
@@ -91,7 +121,7 @@ export class LexSetup extends React.Component<any, any> {
 
   private loadXML() {
     this.setState({ xmlLoaded: false });
-    fetch(this.state.xmlFileName)
+    fetch(this.xmlFileName)
       .then((response) => response.text())
       .then((xmlString) => {
         XML.parseString(xmlString, (err, xmlData) => {
@@ -106,23 +136,11 @@ export class LexSetup extends React.Component<any, any> {
       });
   }
 
-  private getXMLFiles() {
-    fetch('api/xmlfiles')
-      .then((response) => response.text())
-      .then((jsonStr) => {
-        let xmlFiles = JSON.parse(jsonStr);
-        this.setState({ xmlFiles });
-      })
-      .catch((e) => {
-        console.log('errored :', e);
-      });
-  }
-
   private saveXML() {
     let xmlText = this.xmlBuilder.buildObject(this.props.xmlData);
     let data = new FormData();
     data.append('file', xmlText);
-    data.append('name', this.state.xmlFileName);
+    data.append('name', this.xmlFileName);
     fetch('/api/save', {
       method: 'POST',
       body: data