updated to search for word and included semantic-ui

src/App.tsx

@@ -1,6 +1,21 @@
 import * as React from 'react';
-import { FocusStyleManager } from '@blueprintjs/core';
+import {
+  // Button,
+  // Classes,
+  // InputGroup,
+  // Intent,
+  // Menu,
+  // MenuItem,
+  // Popover,
+  // Position,
+  // Spinner,
+  // Switch,
+  // Tag,
+  // Tooltip,
+  FocusStyleManager,
+} from '@blueprintjs/core';
 import * as XML from 'xml2js';
+import * as XPath from 'xml2js-xpath';
 // import { Table } from '@blueprintjs/table';
 
 FocusStyleManager.onlyShowFocusOnTabs();
@@ -13,55 +28,104 @@ class App extends React.Component<{}, null> {
       <div>
         <nav className="pt-navbar pt-dark">
           <div className="pt-navbar-group pt-align-left">
-            <button className="pt-button pt-minimal pt-icon-large pt-icon-edit"/>
-            <div className="pt-navbar-heading">Lex Editor</div>
+            <button className="pt-button pt-minimal pt-icon-large pt-icon-edit" />
+            <div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
           </div>
         </nav>
-        <LexEditor fileName="/new_es.xml"/>
+        <LexEditor fileName="/new_es.xml" />
       </div>
     );
   }
 }
 
-// interface LexEditorProps {
-//   fileName: string;
-// }
+type ReactEvent = React.ChangeEvent<HTMLInputElement>;
 
-class LexEditor extends React.Component<any, null> {
-  constructor(props: any) {
+interface LexEditorProps {
+  fileName: RequestInfo;
+}
+
+class LexEditor extends React.Component<LexEditorProps, any> {
+  constructor(props: LexEditorProps) {
     super(props);
+    this.handleOnSearch = this.handleOnSearch.bind(this);
+    this.state = { lexData: {}, matchedEntries: [] };
   }
 
-  public handleOnChange(event: any): void {
-      this.setState({ searchWord : event.target.value });
-  }
-
-  componentDidMount() {
+  public componentDidMount() {
     return fetch(this.props.fileName)
-    .then((response) => response.text())
-    .then((xmlString) => {
-      XML.parseString(xmlString, (err, jsObj) => {
-        this.setState({'lexdata': jsObj});
+      .then((response) => response.text())
+      .then((xmlString) => {
+        XML.parseString(xmlString, (err, lexData) => {
+          this.setState({ ...this.state, lexData });
+        });
       });
-    })
-    .catch((error) => {
-      console.error(error);
-    });
+    // .catch((error) => {
+    //   console.error(error);
+    // });
   }
-  render() {
+
+  public render() {
     return (
-      <div className="pt-input-group">
-        <span className="pt-icon pt-icon-search"/>
+      <div>
+        <LexSearch handleOnSearch={this.handleOnSearch} />
+        <LexMatches matchedEntries={this.state.matchedEntries} />
+      </div>
+    );
+  }
+
+  private handleOnSearch(event: ReactEvent): void {
+    let searchText = event.target.value;
+    // this.setState({ ...this.state, searchText });
+    let pathQ = './/lang';
+    let words = XPath.find(this.state.lexData.document, pathQ);
+    let matchedEntries = words.filter((obj) => {
+      if (obj.label[0] === searchText) {
+        return true;
+      }
+      return false;
+    });
+    this.setState({ ...this.state, matchedEntries });
+  }
+}
+
+interface LexSearchProps {
+  handleOnSearch: (e: ReactEvent) => void;
+}
+
+class LexSearch extends React.Component<LexSearchProps, null> {
+  public render() {
+    return (
+      <div className="pt-input-group" style={{ width: '300px' }}>
+        <span className="pt-icon pt-icon-search" />
         <input
           className="pt-input"
           type="search"
           placeholder="Search input"
           dir="auto"
-          onChange = {e => this.handleOnChange(e)}
+          onChange={e => this.props.handleOnSearch(e)}
         />
       </div>
     );
   }
 }
 
+class LexMatches extends React.Component<any, any> {
+  public render() {
+    return (
+      <div>
+        {this.props.matchedEntries.map((mObj: any) => {
+          console.log('Matched ObjectEntry' + mObj);
+          return (<LexEntry key={mObj.unl} lexItem={mObj}/>);
+        })}
+      </div>
+    );
+  }
+}
+
+class LexEntry extends React.Component<any, any> {
+  public render() {
+    return null;
+  }
+}
+
 export default App;

src/index.css

@@ -1,8 +1,3 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-
 @import "~normalize.css/normalize.css";
 @import "~@blueprintjs/core/dist/blueprint.css";
+@import "~semantic-ui-css/semantic.min.css";