import React, { Component } from 'react'

import { connect } from 'react-redux'
import { loadMultiTaggedArticles, loadArticles } from '../actions/articles'
import Tags from '../components/Tags'
import Footer from '../components/Footer'
import NavBar from '../components/NavBar'
import SystemError from '../components/SystemError'
import TopNews from '../components/TopNews'
if (process.env.BROWSER) {
  require('./Home.css')
}

export default class Home extends Component {
  static fetchData({ store }) {
    let params = [ 'hp-projects', 'feature' ]
    return store.dispatch(loadMultiTaggedArticles(params))
  }
  constructor(props, context) {
    super(props, context)
    this.loadMoreFeatureArticles = this.loadMoreFeatureArticles.bind(this)
  }

  loadMoreFeatureArticles() {
    const maxResults = 10
    const features = this.props.articles['hp-projects'] || {
      items: [],
      hasMore: true
    }
    if (features.hasMore) {
      let page = Math.floor(features.items.length / maxResults)  + 1
      this.props.loadArticles('hp-projects', maxResults, page)
    }
  }

  render() {
    const { articles, device } = this.props
    const topnews_num = 5
    let topnewsItems = articles.feature && articles.feature.items || []
    let feature = articles['hp-projects'] || {
      hasMore: true
    }
    let featureItems = feature.items || []
    const style = {
      backgroundColor: '#2C323E',
      color: '#FFFFEB'
    }
    if (Array.isArray(topnewsItems)) {
      if (topnewsItems.length < topnews_num) {
        let less = topnews_num - topnewsItems.length
        topnewsItems = topnewsItems.concat(featureItems.slice(0, less))
        featureItems = featureItems.slice(less)
      } else {
        topnewsItems = topnewsItems.slice(0,topnews_num)
      }
    }
    if (topnewsItems || featureItems) {
      return (
        <div style={style}>
          <NavBar bgStyle="dark"/>
          <TopNews topnews={topnewsItems} />
          <Tags
            articles={featureItems || []}
            device={device}
            bgStyle="dark"
            hasMore={featureItems.hasMore}
            loadMore={this.loadMore}
          />

          {this.props.children}
          <Footer/>
        </div>
      )
    } else {
      return ( <SystemError/> )
    }
  }
}

function mapStateToProps(state) {
  return { articles: state.articles }
}

export { Home }
export default connect(mapStateToProps, { loadMultiTaggedArticles, loadArticles })(Home)

@@ -523,30 +523,39 @@
  %5B '
-hp-projects', '
+photo-reviews', 'photo-
 feature
+s
 ' %5D%0A
@@ -849,34 +849,36 @@
 s.articles%5B'
-hp-project
+photo-review
 s'%5D %7C%7C %7B%0A   
@@ -1045,26 +1045,28 @@
 ticles('
-hp-project
+photo-review
 s', maxR
@@ -1151,34 +1151,8 @@
 ops%0A
-    const topnews_num = 5%0A
     
@@ -1251,18 +1251,20 @@
 es%5B'
-hp-project
+photo-review
 s'%5D 
@@ -1391,16 +1391,16 @@
 C323E',%0A
+
       co
@@ -1424,353 +1424,8 @@
   %7D%0A
-    if (Array.isArray(topnewsItems)) %7B%0A      if (topnewsItems.length %3C topnews_num) %7B%0A        let less = topnews_num - topnewsItems.length%0A        topnewsItems = topnewsItems.concat(featureItems.slice(0, less))%0A        featureItems = featureItems.slice(less)%0A      %7D else %7B%0A        topnewsItems = topnewsItems.slice(0,topnews_num)%0A      %7D%0A    %7D%0A
     

change the tags for the photography channel page