Last active
November 16, 2018 09:25
-
-
Save dearfrankg/07ff19c2889a5ed4502fef96092dd6dc to your computer and use it in GitHub Desktop.
Revisions
-
dearfrankg revised this gist
Nov 16, 2018 . 1 changed file with 6 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,6 @@ 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)}> @@ -54,7 +53,11 @@ export default class GitHubRepos extends React.Component { } renderLoading() { return ( <Pane> <Spinner marginX="auto" marginY={120} /> </Pane> ); } renderNoneFound() { -
Nov 16, 2018 . 1 changed file with 18 additions and 27 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -83,33 +83,24 @@ export default class GitHubRepos extends React.Component { 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> ); } } -
Nov 16, 2018 . 1 changed file with 27 additions and 28 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -83,34 +83,33 @@ export default class GitHubRepos extends React.Component { if (repos.length === 0) return this.renderNoneFound(); return ( <Pane display="flex" display="flex" alignItems="center" justifyContent="center" border="default" borderRadius={5} > <Table 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> </Pane> ); } } -
Nov 16, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,116 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import axios from "axios"; import { Pane, Table } 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 <div>Loading...</div>; } 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 ( <div> <Pane display="flex" alignItems="center" justifyContent="center" border="default" borderRadius={5} > <Table 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> </Pane> </div> ); } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,19 @@ 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;