Home page and LastStatements migration

src/components/LastStatements/Statement/LastStatements.css

@@ -0,0 +1,7 @@
+.wrapper {
+    font-family: 'Gotham-Book', sans-serif;
+    font-size: 1.0em;
+    line-height: 1.4em;
+    list-style-type: none;
+    text-align: justify;
+}

src/components/LastStatements/connector.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import Config from 'Config';
+import { getStatements } from 'store/selectors';
+import { onLastStatementsAccess } from 'store/actions/entities';
+
+const mapStateToProps = state => ({
+    statements: getStatements(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+    onAccess: () => dispatch(onLastStatementsAccess()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

src/components/LastStatements/index.jsx

@@ -1,21 +1,35 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
-import { map } from 'ramda';
+import CSSModules from 'react-css-modules';
 import Statement from './Statement';
+import LastStatementsStyle from './LastStatements.css';
+import connector from './connector';
 
-const renderStatements = (statements) => (
+class LastStatements extends Component {
-    map(s => <Statement statement={s} />, statements)
+    static propTypes = {
-);
+        statements: PropTypes.arrayOf(PropTypes.object),
+        onAccess: PropTypes.func.isRequired,
+    };
 
-const LastStatements = ({ statements }) => (
+    componentWillMount() {
-    <div id="last-statements">
+        this.props.onAccess();
+    }
+
+    renderStatements = () => this.props.statements.map(
+        s => <Statement statement={s} />
+    );
+
+    render() {
+        if (!this.props.statements) return <span>loading last statements ...</span>;
+
+        return (
+            <div styleName="wrapper">
                 <h2>Les dernières prises de positions</h2>
-        <ul id="last-statements">
+                <ul styleName="wrapper">
-            {renderStatements(statements)};
+                    { this.renderStatements() };
                 </ul>
             </div>
-);
+        );
-LastStatements.propTypes = {
+    }
-    statements: PropTypes.arrayOf(PropTypes.object),
+}
-};
 
-export default LastStatements;
+export default CSSModules(connector(LastStatements), LastStatementsStyle);

src/constants/paths.js

@@ -1,4 +1,4 @@
-export default {
+    export default {
     root: '/',
     subjects: '/s',
     publicFigures: '/p',

src/index.js

@@ -44,7 +44,7 @@ const loadApplication = (DOMElementId) => {
         module.hot.accept('./root/index.jsx', () => {
             // If you use Webpack 2 in ES modules mode, you can
             // use <App /> here rather than require() a <NextApp />.
-            const NextApp = require('./root/index').Root;
+            const NextApp = require('./root/index').default;
 
             ReactDOM.render(
                 <AppContainer>

src/pages/Home/HomeStyle.css

@@ -9,3 +9,12 @@
     background-size:cover;
     background-position: center center;
 }
+
+.introduction {
+    font-family: 'Gotham-Book', sans-serif;
+    font-size: 1.1em;
+    line-height: 1.7em;
+    text-align: center;
+    color: #FFFFFF;
+    text-shadow: 0px 0px 30px rgba(0, 115, 162, 1);
+}

src/pages/Home/HomeSubjects/index.jsx

@@ -1,12 +1,20 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import HomeSubject from './HomeSubject';
-import { map } from 'ramda';
 
-const renderSubjects = map(s => <HomeSubject subject={s} />);
+class HomeSubjects extends Component {
 
-const HomeSubjects = ({ subjects }) => (renderSubjects(subjects));
+    static propTypes = {
-HomeSubject.propTypes = {
         subjects: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
+    }
+
+    render() {
+        if (!this.props.subjects) return <span>loading subjects ...</span>;
+
+        return this.props.subjects.map(
+            s => <HomeSubject subject={s} />
+        );
+    }
+
+}
 
 export default HomeSubjects;

src/pages/Home/index.jsx

@@ -16,7 +16,7 @@ const Home = () => (
             >
                 <br /><br /><br /><br /><br /><br />
                     <h5>Bienvenue sur Débats.co</h5><br />
-                    <div id="white">
+                    <div styleName="introduction">
                         Débats est un projet francophone et participatif, ayant pour objectif <br />
                         d’offrir une synthèse ouverte, impartiale et vérifiable, des sujets clivants de notre société.
                     </div>

src/styles/typo.css

@@ -73,20 +73,3 @@ p {
   line-height: 1.7em;
   text-align: justify;
 }
-
-#white {
-  font-family: 'Gotham-Book', sans-serif;
-  font-size: 1.1em;
-  line-height: 1.7em;
-  text-align: center;
-  color: #FFFFFF;
-  text-shadow: 0px 0px 30px rgba(0, 115, 162, 1);
-}
-
-#last-statements {
-  font-family: 'Gotham-Book', sans-serif;
-  font-size: 1.0em;
-  line-height: 1.4em;
-  list-style-type: none;
-  text-align: justify;
-}