
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import Card from '../components/Card'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'

import * as channelsActions from '../actions/channelsActions'

class ChannelIndexView extends Component {
  constructor(props) {
    super();
    this.state = {
      articles: []
    }
    this.setArticles = this.setArticles.bind(this)
    this.name = props.channel.name
  }

  componentWillMount() {
    this.setArticles()
  }

  componentDidMount() {
    this.interval = setInterval(this.setArticles, 60000)
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  setArticles() {
    this.props.actions.getArticles(this.props.channel).then(response => {
      this.setState({
        articles: response
      })
    })
  }


  setArticleLink(title) {
    return encodeURIComponent(title)
  }

  render() {
    const articles = this.state.articles.map((article, index) => {
      return (
        <Link to={`/newsfeed/${this.props.channel.source_id}/${this.setArticleLink(article.title)}`}><h4 className="article-title">{article.title}</h4></Link>
      )
    })

    const title = (
      <Link to={`/newsfeed/${this.props.channel.source_id}`}>{this.name}</Link>
    )


    return (
      <Card title={title} content={articles}/>
    )
  }
}


const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(channelsActions, dispatch)
  }
}

const mapStateToProps = (state) => {
  return {articles: state.articles}
}

export default connect(mapStateToProps, mapDispatchToProps)(ChannelIndexView)

@@ -150,779 +150,323 @@
 x';%0A
-import %7BbindActionCreators%7D from 'redux'%0A%0Aimport * as channelsActions from '../actions/channelsActions'%0A%0Aclass ChannelIndexView extends Component %7B%0A  constructor(props) %7B%0A    super();%0A    this.state = %7B%0A      articles: %5B%5D%0A    %7D%0A    this.setArticles = this.setArticles.bind(this)%0A    this.name = props.channel.name%0A  %7D%0A%0A  componentWillMount() %7B%0A    this.setArticles()%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.interval = setInterval(this.setArticles, 60000)%0A  %7D%0A%0A  componentWillUnmount() %7B%0A    clearInterval(this.interval)%0A  %7D%0A%0A  setArticles() %7B%0A    this.props.actions.getArticles(this.props.channel).then(response =%3E %7B%0A      this.setState(%7B%0A        articles: response%0A      %7D)%0A    %7D)%0A  %7D%0A%0A%0A  setArticleLink(title) %7B%0A    return encodeURIComponent(title)%0A  %7D%0A%0A  render() %7B%0A
+%0A%0Aclass ChannelIndexView extends Component %7B%0A  constructor(props) %7B%0A    super();%0A    this.name = props.channel.name%0A  %7D%0A%0A%0A%0A%0A  setArticleLink(title) %7B%0A    return encodeURIComponent(title)%0A  %7D%0A%0A  render() %7B%0A    const channelArticles = this.props.articles.find(articleObject =%3E articleObject.name === this.name);%0A%0A 
    
- 
 cons
@@ -482,18 +482,23 @@
 s = 
-this.state
+channelArticles
 .art
@@ -905,126 +905,8 @@
 %7D%0A%0A%0A
-const mapDispatchToProps = (dispatch) =%3E %7B%0A  return %7B%0A    actions: bindActionCreators(channelsActions, dispatch)%0A  %7D%0A%7D
 %0A%0Aco
@@ -1021,28 +1021,8 @@
 rops
-, mapDispatchToProps
 )(Ch

Refactor using app state instead of local state