react_4_jforaker

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class FetchDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      user: 'jforaker'
    };

    this.sump = function() {
      axios.get(`https://api.github.com/users/${this.props.user}/repos`)
        .then(res => {
          const posts = res.data.map(obj => obj);
          this.setState({ posts });
        });
    }
  }

  componentDidMount() {
    this.sump();
  }

  componentWillUpdate() {
    this.sump();
  }

  render() {
    return (
      <div>
        <h1>{`${this.props.user}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.name}</li>
          )}
        </ul>
      </div>
    );
  }
}

class NameForm extends Component {
  constructor(props) {
    super(props);
    this.state = {value: 'jforaker'};

    this.handleChange = this.handleChange.bind(this);
    this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
  }

  handleFilterTextInputChange(e) {
    this.props.onFilterTextInput(this.state.value);
    e.preventDefault();
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form onSubmit={this.handleFilterTextInputChange}>
        <label>
          github user:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class Repos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: 'jforaker',
    };
    
    this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
  }

  handleFilterTextInput(filterText) {
    this.setState({
      filterText: filterText
    });
  }

  render() {
    return (
      <div>
        <NameForm
          filterText={this.state.filterText}
          onFilterTextInput={this.handleFilterTextInput}
        />
        <FetchDemo
          user={this.state.filterText}
        />
      </div>
    );
  }
}

export default Repos;

Fantastic!! However we need to refactor FetchDemo a touch, because there is an infinite loop situation happening that fires the request until you get rate limited by github 😱

Lets prefer componentWillReceiveProps() over componentWillUpdate, and check if the user input has changed.. only then will we allow the request to fire off...

class FetchDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      user: 'jforaker'
    };

    this.sump = this.sump.bind(this);
  }

  componentDidMount() {
    this.sump(this.props.user);
  }

  sump(user) {
    axios.get(`https://api.github.com/users/${user}/repos`)
      .then(res => {
        const posts = res.data.map(obj => obj);
        this.setState({ posts });
      });
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.user !== nextProps.user) {
      this.sump(nextProps.user)
    }
  }

  render() {
    return (
      <div>
        <h1>{`${this.props.user}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.name}</li>
          )}
        </ul>
      </div>
    );
  }
}