implemented xml file selection/save logic

src/LexSetup.tsx

@@ -1,77 +1,76 @@
 import * as React from 'react';
 import {
-  Dimmer, Loader, Header, Icon, Segment, Button
+  Dimmer, Loader, Header, Icon, Segment, Button, Dropdown
 } from 'semantic-ui-react';
 import * as XML from 'xml2js';
-// import * as _ from 'lodash';
 import { xmlToEntries } from './LexAccessors';
 import { LexEditor } from './LexEditor';
 
 export class LexSetup extends React.Component<any, any> {
   xmlBuilder = new XML.Builder();
-  fileName = 'new_es_orig.xml';
   constructor(props: any) {
     super(props);
-    this.state = { xmlLoaded: false, dirty: false };
+    this.state = {
+      xmlLoaded: false, dirty: false, xmlFiles: [], xmlFileName: 'new_es.xml'
+    };
   }
   public componentDidMount() {
-    fetch(this.fileName)
-      .then((response) => response.text())
-      .then((xmlString) => {
-        XML.parseString(xmlString, (err, xmlData) => {
-          // let props = this.props;
-          // _.noop(props);
-          this.props.addXmlData(xmlData);
-          this.setState({ xmlLoaded: true });
-        });
-      })
-      .catch((e) => {
-        console.log('errored :', e);
-      });
+    this.getXMLFiles();
+    this.loadXML();
   }
 
   render() {
+    let files: string[] = [].concat(this.state.xmlFiles);
+    if (files.indexOf(this.state.xmlFileName as string) === -1) {
+      files.push(this.state.xmlFileName);
+    }
+    let dropOptions = files.map((k: any, i: any, c: any) => {
+      return { key: i, value: k, text: k };
+    });
+    let selectFile = (
+      <Dropdown
+        options={dropOptions}
+        onChange={(e, d) => {
+          this.setState({ xmlFileName: d.value as string });
+        }}
+        onAddItem={(e, d) => {
+          this.setState({ xmlFileName: d.value as string });
+        }}
+        value={this.state.xmlFileName}
+        compact={true}
+        selection={true}
+        search={true}
+        allowAdditions={true}
+        style={{
+          width: '10em', float: 'right',
+          ['min-height']: '0.3em', 'padding': '0.5em'
+        }}
+      />
+    );
+    let saveButton = this.state.dirty ?
+      (
+        <Button floated="right" size="mini" onClick={() => { this.saveXML(); }}>
+          Save
+        </Button>
+      ) : null;
+    let loadButton = (
+      <Button floated="right" size="mini" onClick={() => { this.loadXML(); }}>
+        Load
+      </Button>
+    );
+    let xmlEntries = xmlToEntries(this.props.xmlData);
     let dimmer = (
       <Dimmer active={true} inverted={true}>
         <Loader inverted={true}>Loading</Loader>
       </Dimmer>
     );
-    let saveXMLBackend = (ev: any, d: any) => {
-      // this.setState({ xmlLoaded: false });
-      let xmlText = this.xmlBuilder.buildObject(this.props.xmlData);
-      let data = new FormData();
-      data.append('file', xmlText);
-      data.append('name', 'new_es_s.xml'); // this.fileName
-      fetch('/api/save', {
-        method: 'POST',
-        body: data
-      })
-        .then((response) => response.text())
-        .then((rsptext) => {
-          console.log('response', rsptext);
-          this.setState({ dirty: false });
-        })
-        .catch((e) => {
-          // console.log('errored :', e);
-          this.setState({ dirty: true });
-        });
-    };
-    let saveButton = this.state.dirty ?
-      (
-        <Button floated="right" size="mini" onClick={saveXMLBackend}>
-          Save
-        </Button>
-      ) : null;
-    let xmlEntries = xmlToEntries(this.props.xmlData);
-    // _.noop(saveXMLBackend);
-    let markDirty = () => {
-      this.setState({ dirty: true });
-    };
     let editor = (
       <div>
         <Segment inverted={true} size="tiny" attached={true}>
           <Header color="teal" size="mini">
             {saveButton}
+            {loadButton}
+            {selectFile}
             <Icon name="edit" size="small" />
             <Header.Content>
               Freespeech Lexicon Editor
@@ -81,10 +80,60 @@ export class LexSetup extends React.Component<any, any> {
         <LexEditor
           {...xmlEntries}
           {...this.props}
-          markDirty={markDirty}
+          markDirty={() => {
+            this.setState({ dirty: true });
+          }}
         />
       </div>
     );
     return this.state.xmlLoaded ? editor : dimmer;
   }
+
+  private loadXML() {
+    this.setState({ xmlLoaded: false });
+    fetch(this.state.xmlFileName)
+      .then((response) => response.text())
+      .then((xmlString) => {
+        XML.parseString(xmlString, (err, xmlData) => {
+          this.props.addXmlData(xmlData);
+          this.setState({ xmlLoaded: true });
+        });
+      })
+      .catch((e) => {
+        console.log('errored :', e);
+        this.props.addXmlData({});
+        this.setState({ xmlLoaded: true });
+      });
+  }
+
+  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);
+    fetch('/api/save', {
+      method: 'POST',
+      body: data
+    })
+      .then((response) => {
+        if (response.status === 200) {
+          this.setState({ dirty: false });
+        }
+      })
+      .catch((e) => {
+        this.setState({ dirty: true });
+      });
+  }
 }