React test

posts_index.js

// Not working, only renders "Chargement..." and nothing else
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Truncate from 'react-truncate-html';
import marked from 'marked';
import { Link } from 'react-router';
import toRead from 'reading-time';

import { fetchPosts } from '../actions/index';
import Asset from './asset';

class PostsIndex extends Component {
  componentDidMount() {

  this.props.fetchPosts();

  }

  renderPosts() {
    const { posts } = this.props;

    if (!posts) {
      return <h2>Chargement...</h2>; //Loading message
    }	
    return this.props.posts.map((post, index) => {
		post.fields.date = new Intl.DateTimeFormat("fr-FR", {
				weekday: "long",
				year: "numeric",
				month: "long",
				day: "numeric",
				hour: "numeric",
				minute: "numeric"
			}).format(new Date(post.fields.date));
      return (
        <article key={post.sys.id} className="uk-article">
          <div className="content">
            <h2 className="uk-article-title" style={{color: "#739a99"}}>{post.fields.title}</h2>
			<p className="uk-article-meta">
			{post.fields.date.charAt(0).toUpperCase() + post.fields.date.slice(1)} 
			<br />
			{Math.trunc(parseInt(toRead(post.fields.article).time, 10) / 60000)}
			</p>
            <div className="major list-blog-padding">
            <Truncate 
				lines={10}
				portrait={12}
				responsive={true}
				breakWord={true}
				dangerouslySetInnerHTML={{__html: marked(post.fields.article, {sanitize: true})}} 
				/>
            </div>
            <br />
            <Link to={"posts/" + post.sys.id} className="button big wide smooth-scroll-middle">Lire la suite</Link>
          </div>
        </article>
      );
    });
  }
  render() {
    return (
      <div>
        {this.renderPosts()}
      </div>
    );
  }
}
function mapStateToProps(state) {
  return { posts: state.posts.all };
}
export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

posts_show.js

// This is working
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import marked from 'marked';
import { Link } from 'react-router';

import { fetchPost } from '../actions/index';
import Asset from './asset';

class PostsShow extends Component {

  componentWillMount() {
    this.props.fetchPost(this.props.params.id);
  }
  renderMarkdown(content) {
    return {
      __html: marked(content, {sanitize: true})
    }
  }
  componentDidMount () {
  window.scrollTo(0, 0)
	}
  render() {
    const { post } = this.props;

    if (!post) {
      return <h2>Chargement...</h2>; //Loading message
    }

    return (
      <article key={post.sys.id} className="uk-article">
        <div className="content">
          <h1>{post.fields.title}</h1>
          <div className="major" dangerouslySetInnerHTML={this.renderMarkdown(post.fields.article)} />
          <br />
          <Link to={"/"} className="button big wide">Back</Link>
        </div>
        <div className="image">
        </div>
      </article>
    );
  }
}

function mapStateToProps(state) {
  return { post: state.posts.post };
}

export default connect(mapStateToProps, { fetchPost })(PostsShow);