<div id="root"></div>

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false
    };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });

    // You can also log the error to an error reporting service
    // Just logging it in the console for demo purposes
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error">
          <div className="error__title">
            Something went wrong! Please refresh the page.
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

const Ability = ({ability}) => {
  return (
    <div className="ability">
      <div className="ability__name">
        { ability.ability.name }
      </div>
    </div>
  );
};


class App extends React.Component {
  constructor() {
    super();

    this.state = {
      data: []
    };
  }
  componentWillMount() {
    fetch("https://pokeapi.co/api/v2/pokemon/1/")
      .then(data => data.json())
      .then(data => {
        this.setState({
          data: data.abilities
        });
      });
  }

  errorBoundaryNode = (ability, index) => {
    return (
      <ErrorBoundary key={index}>
        <Ability ability={ability} />
      </ErrorBoundary>
    );
  }

  abilitiesNode = () => {
    return this.state.data.map((ability, index) => {
      return this.errorBoundaryNode(ability, index);
    });
  }

  render() {
    return (
      <div className="app">
        { this.abilitiesNode() }
      </div>
    );
  }
}

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