import React, { Component } from 'react';

import fetchData, { api } from '../utils/fetchData';

export default class ArticleDetail extends Component {
	
	constructor(props) {
		super(props);

		this.state = {
			article: {}
		}
	}

	componentDidMount() {
		this.getArticleById(this.props.params.question_id);
	}

	getArticleById(id) {
		fetchData(`${api.stackExchange}questions/${id}?order=desc&sort=activity&site=stackoverflow&filter=withbody`, (data) => {
			this.setState({
				article: data.items[0]
			});
		});
	}

	render() {
		return (
			<article>
				<h1>{ this.state.article.title }</h1>
				<div dangerouslySetInnerHTML={{__html: this.state.article.body }} />
			</article>
		);
	}
}
@@ -90,16 +90,58 @@
 Data';%0A%0A
+import ArticleList from './ArticleList';%0A%0A
 export d
@@ -259,16 +259,39 @@
 icle: %7B%7D
+,%0A%09%09%09latestArticles: %5B%5D
 %0A%09%09%7D%0A%09%7D%0A
@@ -368,16 +368,44 @@
 on_id);%0A
+%09%09this.getLatestArticles();%0A
 %09%7D%0A%0A%09get
@@ -608,16 +608,207 @@
 %7D);%0A%09%7D%0A%0A
+%09getLatestArticles() %7B%0A%09%09fetchData(%60$%7Bapi.stackExchange%7Dquestions?order=desc&sort=activity&site=stackoverflow%60, (data) =%3E %7B%0A%09%09%09this.setState(%7B%0A%09%09%09%09latestArticles: data.items%0A%09%09%09%7D);%0A%09%09%7D);%0A%09%7D%0A%0A
 %09render(
@@ -950,16 +950,73 @@
 y %7D%7D /%3E%0A
+%09%09%09%09%3CArticleList articles=%7Bthis.state.latestArticles%7D /%3E%0A
 %09%09%09%3C/art

add ArticleList to display latest articles in ArticleDetail