# All files / src App.js

0% Statements 0/35
0% Branches 0/6
0% Functions 0/7
0% Lines 0/21

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74

     import React, { Component } from "react";
    import { Spin, Alert } from "antd";

    import Github from "./sdk/github";

    import Logo from "./components/logo";
    import Title from "./components/title";
    import Header from "./components/header";
    import Container from "./components/container";
    import Content from "./components/content";
    import Jumbotron from "./components/jumbotron";

    const github = new Github();

    class App extends Component {
      state = {
        repos: [],
        loading: false,
      };

      componentDidMount() {
        this.fetchRepos();
      }

      fetchRepos = () => {
        this.setState({ loading: true });
        github.repo.listRepos({ org: "36node" }).then(ret => {
          this.setState({
            repos: ret.body,
            loading: false,
          });
        });
      };

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

        const $spin = (
          <Spin tip="Loading...">
            <Alert message="Fetching 36node's repositories..." type="info" />
          </Spin>
        );

        const $content = (
          <Content>
            <Jumbotron>36node has {repos.length} public repos in github.</Jumbotron>
            <div>
              {this.state.repos.map((r, key) => {
                return (
                  <p key={key}>
                    <a target="_blank" href={r.html_url} rel="noopener noreferrer">
                      {r.name}
                    </a>
                  </p>
                );
              })}
            </div>
          </Content>
        );

        return (
          <Container>
            <Header>
              <Logo />
              <Title>Welcome to 36node's template-react</Title>
            </Header>
            {loading ? $spin : $content}
          </Container>
        );
      }
    }

    export default App;