{"size": 1792, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "spinboo/napkin-planner", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "spinboo/napkin-planner", "max_issues_repo_issues_event_min_datetime": "2021-03-09T02:11:10.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-08T11:37:34.000Z", "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "spinboo/napkin-planner", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 22.9743589744, "max_line_length": 66, "alphanum_fraction": 0.5797991071}
import React from "react";
import { render } from "react-dom";
import { Router, Link } from "@reach/router";
import { Provider } from './SearchUserContext';

import Users from "./Users";
import UserProfile from "./UserProfile";
import SearchUserForm from "./SearchUserForm";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstname: "",
      surname: "",
      email: "",
      salary: 0,
      role: "",
      users: [],
      handleFirstnameChange: this.handleFirstnameChange,
      handleSurnameChange: this.handleSurnameChange,
      handleEmailChange: this.handleEmailChange,
      handleSalaryChange: this.handleSalaryChange,
      handleRoleChange: this.handleRoleChange,
      getUsers: this.getUsers
    }
  }

  handleFirstnameChange = event => {
    this.setState({
      firstname: event.target.value
    })
  }

  handleSurnameChange = event => {
    this.setState({
      surname: event.target.value
    })
  }

  handleEmailChange = event => {
    this.setState({
      email: event.target.value
    })
  }

  handleRoleChange = event => {
    this.setState({
      role: event.target.value
    })
  }

  render() {
    return (
      <div>
        <header>
          <Link to="/">Napking Planner</Link>
          <Link to="/search-user">
            <span aria-label="search" role="img">
              <i className="fas fa-search"></i>
            </span>
          </Link>
        </header>
        <Provider value={this.state}>
          <Router>
            <Users path="/" />
            <UserProfile path="/user-profile/:id" />
            <SearchUserForm path="/search-user" />
          </Router>
        </Provider>
      </div>
    );
  }
}

render(React.createElement(App), document.getElementById("root"));
