Search GitHub

Axios

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 Item extends React.Component {
    render() {
        let {login, avatar_url, html_url} = this.props;
        return (
            <React.Fragment>
                <a href={html_url}>
                  <img src={avatar_url} alt="img" />
                </a>
                <p>{login}</p>
            </React.Fragment>
        )
    }
}

class List extends React.Component {

    render() {
        let {isFirst, isLoading, users, errMsg} = this.props.appState
        if (isFirst) {
        	return <h2>Input keyword, click button</h2>
        } else if (isLoading) {
        	return <h2>Loading...</h2>
        } else if (errMsg) {
        	return <h2>{errMsg}</h2>
        } else {
        	return (
            <React.Fragment>
              {
                users.map(item => {
                  return <Item key={item.login} {...item} />
                })
              }
            </React.Fragment>
        )
      }
    }
}

class Search extends React.Component {

    contentRef = React.createRef()

    search = () => {
        let {updateState} = this.props;
        //1.get input
        let content = this.contentRef.current.value.trim();
        
        //2.Send Request
        updateState({
            	isFirst: false,
              isLoading: true,
              users: [],
              errMsg: ''
            })
        const url = `https://api.github.com/search/users?q=${content}`
        axios.get(url)
        	.then(res => {
          	//console.log(res);
            let users = res.data.items
            updateState({
            	isFirst: false,
              isLoading: false,
              users,
              errMsg: ''
            })
          })
          .catch(err => {
          	updateState({
            	isFirst: false,
              isLoading: false,
              users: [],
              errMsg: err.toString()
            })
          })
    }

    render(){
        return (
            <React.Fragment>
                <form>
             ...