block11.js

import fetch from 'isomorphic-fetch';
import Error from 'next/error';

class Index extends React.Component {
	static async getInitialProps() {
		let stories;

		try {
			const response = await fetch(
				// TODO: change this back to
				// TODO:  https://node-hnapi.herokuapp.com/news?page=1
				// MODIFY THIS LINE TO POINT TO AN UNKNOWN API LINK
				'https://node-hnapi.herokuapp.com/abs'
			);
			stories = await response.json();
		} catch (err) {
			console.log(err);
			// RETURN EMPTY Stories when there is an error
			stories = [];
		}

		return { stories };
	}

	render() {
		const { stories } = this.props;

		if (stories.length === 0) {
			return <Error statusCode={503} />;
		}

		return (
			<div>
				<h1>Hacker News Clone</h1>
				<div>
					{stories.map(story => (
						<h3 key={story.id}>{story.title}</h3>
					))}
				</div>
			</div>
		);
	}
}

export default Index;