intro-to-next-part2 -- app version 2

GithubRepos.js

import React, { Component } from "react";
import axios from "axios";
import { Table, Pane, Spinner } from "evergreen-ui";

const Repo = ({ repo, index }) => (
  <Table.Row key={index} isSelectable onSelect={() => alert(repo.name)}>
    <Table.TextCell>{index + 1}</Table.TextCell>
    <Table.TextCell flexBasis="25vw">
      <span className="repo-name">{repo.name}</span>
    </Table.TextCell>
    <Table.TextCell isNumber>{repo.stargazers_count}</Table.TextCell>

    <style jsx>{`
      .repo-name {
        font-weight: bold;
      }
    `}</style>
  </Table.Row>
);

export default class GitHubRepos extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      repos: [],
      loading: true,
      error: null,
      query: ""
    };
  }

  componentDidMount() {
    axios
      .get(
        window.encodeURI(
          `https://api.github.com/search/repositories?q=stars:>1+language:javascript&sort=stars&order=desc&type=Repositories`
        )
      )
      .then(response => {
        const repos = response.data.items;
        this.setState({
          repos,
          loading: false
        });
      })
      .catch(error => {
        this.setState({
          error: error,
          loading: false
        });
      });
  }

  renderLoading() {
    return (
      <Pane>
        <Spinner marginX="auto" marginY={120} />
      </Pane>
    );
  }

  renderNoneFound() {
    return <div>None Found...</div>;
  }

  renderError() {
    return (
      <div>
        <div>Sorry, an error ocurred: {this.state.error.response.data.message}</div>
      </div>
    );
  }

  onChangeQuery = e => {
    this.setState({ query: e });
  };

  render() {
    const { error, loading, repos, query } = this.state;

    if (error) return this.renderError();

    if (loading) return this.renderLoading();

    if (repos.length === 0) return this.renderNoneFound();

    return (
      <Table border="default" borderRadius={5} width="80vw">
        <Table.Head>
          <Table.TextHeaderCell>#</Table.TextHeaderCell>
          <Table.SearchHeaderCell
            flexBasis="25vw"
            onChange={this.onChangeQuery}
            placeholder="Search by name..."
          />
          <Table.TextHeaderCell>Stars Count</Table.TextHeaderCell>
        </Table.Head>
        <Table.Body maxHeight={400}>
          {repos
            .filter(repo => repo.name.startsWith(query))
            .map((repo, index) => (
              <Repo repo={repo} index={index} key={index} />
            ))}
        </Table.Body>
      </Table>
    );
  }
}

index.js

import GitHubRepos from "../components/GithubRepos";
import { Pane } from "evergreen-ui";

const App = () => (
  <div>
    <h1>Popular GitHub Javascript Repositories</h1>
    <Pane display="flex" alignItems="center" justifyContent="center" paddingTop={40}>
      <GitHubRepos />
    </Pane>

    <style jsx global>{`
      body {
        padding: 30px;
      }
    `}</style>
  </div>
);

export default App;