refactoring files

src/App.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { bindActionCreators } from 'redux';
-import { Provider, connect } from 'react-redux';
-// import { LexEditor } from './LexComponents';
-import { LexSetup } from './LexSetup';
-import * as actionCreators from './actionCreators';
-import { walleStore } from './WallEStore';
-import { Header, Icon, Segment } from 'semantic-ui-react';
-
-function mapStateToProps(state: any) {
-  return state;
-}
-
-function mapDispachToProps(dispatch: any) {
-  return bindActionCreators<any>(actionCreators, dispatch);
-}
-
-export class Main extends React.Component<any, any> {
-  render() {
-    return (
-      <div>
-        <Segment inverted={true} size="tiny" attached={true}>
-          <Header inverted={true} color="teal" size="mini">
-            <Icon name="edit" size="small" />
-            <Header.Content>
-              Freespeech Lexicon Editor
-            </Header.Content>
-          </Header>
-        </Segment>
-        <LexSetup {...this.props} fileName="/new_es_orig.xml"/>
-      </div>
-    );
-  }
-}
-
-const ReduxMain = connect(mapStateToProps, mapDispachToProps)(Main);
-
-const App = (props: any) => {
-  return (
-    <Provider store={walleStore}>
-      <ReduxMain />
-    </Provider>
-  );
-};
-
-export default App;

src/LexEdit.tsx

@@ -114,5 +114,6 @@ export class LexEdit extends React.Component<any, any> {
 
   private handleOnSave(event: any) {
     this.props.save(this.state.lexItem, this.props.fieldMetaMap);
+    this.props.saveXMLBackend();
   }
 }

src/LexEditor.tsx

@@ -16,14 +16,14 @@ export class LexEditor extends React.Component<any, any> {
       .filter((q: any) => searchMeta.get(q) === searchText)
       .take(10)
       .value();
-    let { fieldMetaMap: fieldMetaMap, save: save } = this.props;
+    let { fieldMetaMap, save, saveXMLBackend } = this.props;
     return (
       <div>
         <LexSearch
           {...this.props}
         />
         <LexMatches
-          {...{ fieldMetaMap, save }}
+          {...{ fieldMetaMap, save, saveXMLBackend }}
           matchedEntries={matchedEntries}
           selectionMeta={this.props.selectFields}
           searchText={searchText}

src/LexSetup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dimmer, Loader } from 'semantic-ui-react';
+import { Dimmer, Loader, Header, Icon, Segment } from 'semantic-ui-react';
 import * as XML from 'xml2js';
 import * as _ from 'lodash';
 import { LexEditor } from './LexEditor';
@@ -233,12 +233,14 @@ const xmlToEntries = (xmlData: any) => {
 };
 
 export class LexSetup extends React.Component<any, any> {
+  xmlBuilder = new XML.Builder();
   constructor(props: any) {
     super(props);
     this.state = { xmlLoaded: false };
   }
   public componentDidMount() {
-    fetch(this.props.fileName)
+    let fileName = '/new_es_orig.xml';
+    fetch(fileName)
       .then((response) => response.text())
       .then((xmlString) => {
         XML.parseString(xmlString, (err, xmlData) => {
@@ -260,8 +262,39 @@ export class LexSetup extends React.Component<any, any> {
       </Dimmer>
     );
     let xmlEntries = xmlToEntries(this.props.xmlData);
+    let saveXMLBackend = () => {
+      this.setState({ xmlLoaded: false });
+      let xmlText = this.xmlBuilder.buildObject(this.props.xmlData);
+      fetch('/api/save', {
+        method: 'POST',
+        body: xmlText
+      })
+        .then((response) => response.text())
+        .then((rsptext) => {
+          console.log('response', rsptext);
+          this.setState({ xmlLoaded: true });
+        })
+        .catch((e) => {
+          // console.log('errored :', e);
+          this.setState({ xmlLoaded: true });
+        });
+    };
     let editor = (
-      <LexEditor {...xmlEntries} {...this.props} />
+      <div>
+        <Segment inverted={true} size="tiny" attached={true}>
+          <Header inverted={true} color="teal" size="mini">
+            <Icon name="edit" size="small" />
+            <Header.Content>
+              Freespeech Lexicon Editor
+            </Header.Content>
+          </Header>
+        </Segment>
+        <LexEditor
+          {...xmlEntries}
+          {...this.props}
+          saveXMLBackend={saveXMLBackend}
+        />
+      </div>
     );
     return this.state.xmlLoaded ? editor : dimmer;
   }

src/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import App from './index';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/index.tsx

@@ -1,8 +1,33 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';
+import { bindActionCreators } from 'redux';
+import { Provider, connect } from 'react-redux';
+// import { LexEditor } from './LexComponents';
+import { LexSetup } from './LexSetup';
+import * as actionCreators from './actionCreators';
+import { walleStore } from './WallEStore';
+
+function mapStateToProps(state: any) {
+  return state;
+}
+
+function mapDispachToProps(dispatch: any) {
+  return bindActionCreators<any>(actionCreators, dispatch);
+}
+
+const ReduxMain = connect(mapStateToProps, mapDispachToProps)(LexSetup);
+
+const App = (props: any) => {
+  return (
+    <Provider store={walleStore}>
+      <ReduxMain />
+    </Provider>
+  );
+};
 
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
 registerServiceWorker();
+
+export default App;

walle_server.py

@@ -23,6 +23,11 @@ def walle_morph():
     pos = pos_req if pos_req != '' else 'N';
     return json.dumps(get_morph(word,pos))
 
+@app.route('/api/save',methods=['POST'])
+def walle_save():
+    print request.form
+    return 'ok'
+
 # hmr streaming
 # import requests
 # from flask import Response,stream_with_context