torrents.csv/server/ui/src/components/navbar.tsx

import { Component, linkEvent } from 'inferno';
import { SearchParams } from '../interfaces';
import { repoUrl } from '../utils';


interface State {
  searchParams: SearchParams;
}

export class Navbar extends Component<any, State> {

  state: State = {
    searchParams: {
      page: 1,
      q: ""
    }
  }

  constructor(props, context) {
    super(props, context);
    this.fillSearchField();
  }

  render() {
    return (
      <div>{this.navbar()}</div>
    )
  }

  navbar() {
    return (
      <nav class="navbar navbar-dark navbar-purple py-1 mb-3">
        <a class="navbar-brand mx-1" href="#">
          <i class="fas fa-fw fa-database mr-1"></i>
          Torrents.csv
        </a>
        {this.searchForm()}
        <ul class="navbar-nav mx-1">
          <li class="nav-item">
            <a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
          </li>
        </ul>
      </nav>
    );
  }

  searchForm() {
    return (
      <form class="form-inline col-7 col-sm-8 col-xl-10 mx-1 my-0" onSubmit={linkEvent(this, this.search)}>
        <div class="input-group w-100">
          <input class="form-control border-0 rounded-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
                 value={this.state.searchParams.q}
                 onInput={linkEvent(this, this.searchChange)}></input>
          <button class="btn btn-secondary border-0 rounded-0 no-outline" type="submit">
            <i className="fas fa-fw fa-search"></i>
          </button>
        </div>
      </form>
    );
  }

  search(i: Navbar, event) {
    event.preventDefault();
    i.context.router.history.push(`/search/${i.state.searchParams.q}/${i.state.searchParams.page}`);
  }

  searchChange(i: Navbar, event) {
    let searchParams: SearchParams = {
      q: event.target.value,
      page: 1
    }
    i.setState({ searchParams: searchParams });
  }

  fillSearchField() {
    let splitPath: Array<string> = this.context.router.route.location.pathname.split("/");
    if (splitPath.length == 4 && splitPath[1] == 'search')
      this.state.searchParams = {
        page: Number(splitPath[3]),
        q: splitPath[2]
      };
  }
}