wgoodall01/wikipath

View on GitHub
web/wikipath-web/src/App.js

Summary

Maintainability
A
1 hr
Test Coverage
import React from 'react';
import PathInput from './PathInput.js';
import PathDisplay from './PathDisplay.js';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: 'READY', // one of "READY", "PROCESSING"
      from: '',
      to: '',
      result: null,
      err: null
    };

    this.setVal = this.setVal.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  async onSubmit() {
    const {from, to} = this.state;
    const url = `/api/query?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`;
    this.setState({status: 'PROCESSING'});
    const resp = await fetch(url);
    const rj = await resp.json();
    if (resp.ok) {
      // No error
      this.setState({
        status: 'READY',
        from: rj.from,
        to: rj.to,
        result: {
          path: rj.path,
          duration: rj.duration,
          touched: rj.touched
        },
        err: null
      });
    } else {
      // There's an error.
      this.setState({status: 'READY', result: null, err: rj});
    }
  }

  setVal(name, val) {
    this.setState({[name]: val});
  }

  render() {
    const {to, from, result, status, err} = this.state;
    const {path, duration, touched} = result || {};

    let body = null;
    if (status === 'PROCESSING') {
      body = <h2 className="App_processing">Processing...</h2>;
    } else if (status === 'READY') {
      body = (
        <React.Fragment>
          {err && (
            <div className="App_error">
              <h2>Error</h2>
              <p>{err.message}</p>
            </div>
          )}
          {path && <PathDisplay path={path} />}
          {duration &&
            touched && (
              <div className="App_status">
                Searched {touched} articles in {duration} seconds
              </div>
            )}
        </React.Fragment>
      );
    }

    return (
      <div className="App">
        <h1>Wikipath</h1>
        <PathInput from={from} to={to} setVal={this.setVal} onSubmit={this.onSubmit} />
        {body}
      </div>
    );
  }
}

export default App;