fs-walle-react-ts/src/App.tsx

import * as React from 'react';
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();

// const logo = require('./logo.svg');

class App extends React.Component<{}, null> {
  render() {
    return (
      <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">Freespeech Lexicon Editor</div>
          </div>
        </nav>
        <LexEditor fileName="/new_es.xml" />
      </div>
    );
  }
}

type ReactEvent = React.ChangeEvent<HTMLInputElement>;

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 componentDidMount() {
    return fetch(this.props.fileName)
      .then((response) => response.text())
      .then((xmlString) => {
        XML.parseString(xmlString, (err, lexData) => {
          this.setState({ ...this.state, lexData });
        });
      });
    // .catch((error) => {
    //   console.error(error);
    // });
  }

  public render() {
    return (
      <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.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 (
      <div className="pt-form-group">
        <label className="pt-label" htmlFor="example-form-group-input-a">
          UNL
        </label>
        <div className="pt-form-content">
          <input
            id="example-form-group-input-a"
            className="pt-input"
            style={{ width: '300px' }}
            placeholder="UNL Value"
            value={this.props.lexItem.unl}
            type="text"
            dir="auto"
          />
        </div>
      </div>
    );
  }
}

export default App;