Axios / Repo

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="root"></div>

Babel + JSX

class App extends React.Component{
	state = {
  	isLoading: true,
    repoName: '',
    repoUrl: '',
    errMsg: ''
  }
  
  keyWord = 'r'
  
  async componentDidMount() {
  	const url = `https://api.github.com/search/repositories?q=${this.keyWord}&stroe=stars`
    try {
    	let response = await axios.get(url);
      console.log(response.data)
      let repoInfo = response.data.items[0]

      this.setState({
      	isLoading: false,
        repoName: repoInfo.name,
        repoUrl: repoInfo.html_url,
        errMsg: ''
      })
    }
  	catch(err) {
      this.setState({
      	isLoading: false,
        repoName: '',
        repoUrl: '',
        errMsg: err.toString()
      })
      console.log(err.toString())
    }
  }
  
	render() {
  	let {repoName, repoUrl, errMsg, isLoading} = this.state;
    if (isLoading) {
    	return <h2>Loading...</h2>
    } else if (errMsg){
    	return <h2>{errMsg}</h2>
    } else {
    	return (
        <React.Fragment>
          <h1>KeyWord: {this.keyWord}</h1>
          <h2><a href={repoUrl}>{repoName}</a></h2>
        </React.Fragment>
      )
    }
  }
}


ReactDOM.render(
	<App />,
  document.getElementById('root')
)