intro-to-next-part2 -- app version 1

components-GitubRepos.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import axios from "axios";

const Repo = ({ repo, index }) => (
  <tr>
    <td>{index + 1}</td>
    <td className="repo-name">{repo.name}</td>
    <td>{repo.stargazers_count} Stars</td>
    <style jsx>{`
      .repo-name {
        font-weight: bold;
      }
    `}</style>
  </tr>
);

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

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

  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 <div>Loading...</div>;
  }

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

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

    if (error) return this.renderError();

    if (loading) return this.renderLoading();

    return (
      <table className="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Repo Name</th>
            <th>Stars Count</th>
          </tr>
        </thead>
        <tbody>
          {repos.map((repo, index) => (
            <Repo repo={repo} index={index} key={repo.id} />
          ))}
        </tbody>
      </table>
    );
  }
}

components-meta.js

import NextHead from "next/head";

const Head = props => (
  <div>
    <NextHead>
      <meta charSet="UTF-8" />
      <title>{props.title || ""}</title>
      <meta name="description" content={props.description || ""} />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <link
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet"
      />
    </NextHead>
  </div>
);

export default Head;

index.js

import GitHubRepos from "../components/GithubRepos";
import Meta from "../components/Meta";

const App = () => (
  <div>
    <Meta />
    <h1>Popular GitHub Javascript Repositories</h1>
    <GitHubRepos />

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

export default App;