{"size": 2274, "ext": "js", "max_stars_repo_path": "src/ui/SearchScreen.js", "max_stars_repo_name": "bingland/shinkgs", "max_stars_repo_stars_event_min_datetime": "2017-04-24T05:12:16.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-24T18:47:22.000Z", "max_issues_repo_path": "src/ui/SearchScreen.js", "max_issues_repo_name": "bingland/shinkgs", "max_issues_repo_issues_event_min_datetime": "2017-04-23T20:11:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-22T22:20:54.000Z", "max_forks_repo_path": "src/ui/SearchScreen.js", "max_forks_repo_name": "bingland/shinkgs", "max_forks_repo_forks_event_min_datetime": "2017-04-25T01:45:15.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-21T12:47:50.000Z"}
{"max_stars_count": 249, "max_issues_count": 235, "max_forks_count": 64, "avg_line_length": 25.8409090909, "max_line_length": 72, "alphanum_fraction": 0.5659630607}
// @flow
import React, { PureComponent as Component } from "react";
import { Button } from "./common";
import UserList from "./user/UserList";
import { sortUsers } from "../model/user";
import { quoteRegExpPattern } from "../util/string";
import { distinctBy } from "../util/collection";
import { isTouchDevice } from "../util/dom";
import type { User, Index, AppActions } from "../model";

type Props = {
  usersByName: Index<User>,
  actions: AppActions,
};

type State = {
  query: string,
};

export default class SearchScreen extends Component<Props, State> {
  state: {
    query: string,
  } = {
    query: "",
  };

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    let { usersByName } = this.props;
    let { query } = this.state;
    let queryRe = new RegExp(quoteRegExpPattern(query), "i");
    let users = Object.keys(usersByName)
      .filter((name) => queryRe.test(name))
      .map((name) => usersByName[name]);
    users = distinctBy(users, (u) => u.name);
    sortUsers(users);
    return (
      <div className="SearchScreen">
        <form
          method="post"
          action="#"
          className="SearchScreen-search-form"
          onSubmit={this._onLookup}>
          <div className="SearchScreen-query">
            <input
              type="text"
              placeholder="Username"
              autoFocus={!isTouchDevice()}
              autoCorrect="off"
              autoCapitalize="none"
              value={query}
              onChange={this._onChangeQuery}
            />
          </div>
          <div className="SearchScreen-button">
            <Button type="submit">View Profile</Button>
          </div>
        </form>
        {users.length ? (
          <div className="SearchScreen-users">
            <UserList users={users} onSelectUser={this._onSelectUser} />
          </div>
        ) : null}
      </div>
    );
  }

  _onChangeQuery = (e: Object) => {
    this.setState({ query: e.target.value });
  };

  _onLookup = (e: Event) => {
    e.preventDefault();
    let { query } = this.state;
    if (!query.trim()) {
      return;
    }
    this.props.actions.onUserDetail(query.toLowerCase());
  };

  _onSelectUser = (user: User) => {
    this.props.actions.onUserDetail(user.name);
  };
}
