Correct --> 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.8.0/pubsub.min.js"></script>
<div id="root"></div>

Babel + JSX

//Sibling pass state
class Item extends React.Component {
    render() {
        let {user} = this.props;
        return (
            <React.Fragment>
                <a href={user.userRepoUrl}>
                  <img src={user.userAvatarUrl} alt={user.userName} />
                </a>
                <p>{user.userName}</p>
            </React.Fragment>
        )
    }
}

class List extends React.Component {
	state = {
  	isFirst: true,
    isLoading: false,
    users: [],
    errMsg: ''
  }
  
  //newState can be destruct as {isFirst, isLoading, users, errMsg}
  componentDidMount(){
    PubSub.subscribe('updateListState', (msg,newState) => {
    	this.setState({
      	isFirst, isLoading, users, errMsg
      })
    })
  }
  
  render() {
    let {isFirst, isLoading, users, errMsg} = this.state
    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 (
        <div>
          {
            users.map(user => {
              return <Item key={user.userName} user={user} />
            })
          }
        </div>
      )
    }
  }
}

class Search extends React.Component {
	contentRef = React.createRef();

  search = () => {
    //1.get input
    let keyWord = this.contentRef.current.value.trim();
    //2.Send keyword content to List
    //	发布消息，让list更新状态
    PubSub.publish('updateListState', {
    	isFirst: false,
      isLoading: true,
      users: [],
      errMsg: ''
    })
    
  	//distruct {keyWord} from (newProps) : console.log(newProps);
    const url = `https://api.github.com/search/users?q=${keyWord}`
		try {
			let response = axios.get(url);
      let users = response.data.items.map(item => {
      	return {
        	userAvatarUrl: item.avatar_url,
          userRepoUrl: item.html_url,
          userName: item.login
        }
      })
      PubSub.publish('updateListState', {
        isFirst: false,
 ...