import React from 'react'
import Question from './question'
import Article from './article'
import fetch from 'isomorphic-fetch'

class ArticleList extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      articles: [
        {
          id: 0,
          title: 'Example article',
          uri: 'http://localhost'
        }
      ]
    }
  }

  componentWillMount () {
    fetch('/backend')
      .then(response => response.json())
      .then(articles => this.setState({articles}))
  }

  render () {
    const articles = this.state.articles.map(({id, title, uri}) =>
      <Article key={id}
        title={title}
        uri={uri} />
    )

    return (
      <div>
        <Question title='Describa el flujo migratorio de talento en el mundo' />
        <h3 className='h6 my-4 text-muted'>
          Artículos propuestos para responder a la pregunta
        </h3>
        <main>
          {articles}
        </main>
      </div>
    )
  }
}

export default ArticleList

@@ -308,16 +308,38 @@
 ticle',%0A
+          source: %7B%0A  
         
@@ -364,16 +364,28 @@
 alhost'%0A
+          %7D%0A
         
@@ -622,19 +622,22 @@
  title, 
-uri
+source
 %7D) =%3E%0A  
@@ -692,13 +692,21 @@
     
-uri=%7B
+link=%7Bsource.
 uri%7D

Fix articles schema {uri} -> {source: uri}