fixed routing

client/js/components/Post.js

@@ -3,6 +3,9 @@ import marked from 'marked';
 import React from 'react';
 import {Link} from 'react-router';
 
+//components
+import Loading from './utils/Loading';
+
 import '../../assets/scss/Content.scss';
 
 const renderer = new marked.Renderer();
@@ -16,13 +19,25 @@ marked.setOptions({
 
 export default class Post extends React.Component {
 
+  componentDidMount() {
+    const params = this.props.params;
+    this.props.actions.fetchPost(params.category, params.post);
+  }
+
   render() {
+    const post = this.props.redux.post;
+    const fetched = this.props.redux.fetched;
+    const fetching = this.props.redux.fetching;
+
     return (
       <div class="Content">
-        <div dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
+          {fetched ?
+          <div>
+            <div dangerouslySetInnerHTML={{__html : marked(post, {renderer : renderer})}}/>
+            <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
+          </div>
+          : <Loading/>}
         </div>
-        <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
-      </div>
     );
   }
 }

client/js/components/Preview.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import {Link} from 'react-router';
 
+//components
+import Loading from './utils/Loading';
+
 import '../../assets/scss/Content.scss';
 
 export default class Preview extends React.Component {
 
+  componentDidMount() {
+    this.props.actions.fetchPreview();
+  }
+
   insertPosts(posts) {
     let elements = [];
-    for (let i = 0; i < this.props.postLimit && i < posts.length; i++) {
+    for (let i = 0; i < this.props.redux.postLimit && i < posts.length; i++) {
       elements.push(
         <div class="post" key={i}>
           <div class="date">
@@ -27,14 +34,21 @@ export default class Preview extends React.Component {
   }
 
   render() {
-    const posts = this.props.posts;
+    const posts = this.props.redux.preview.posts;
+    const postLimit = this.props.redux.postLimit;
+    const increasePostLimit = this.props.actions.increasePostLimit;
+    const fetched = this.props.redux.fetched;
 
     return (
       <div class="Content">
-        {posts.length > 0 ? this.insertPosts(posts): null}
-        {posts.length > this.props.postLimit ?
-          <button class="btn" onClick={this.props.increasePostLimit.bind(this)}>Load More</button>
-          : null}
+        {fetched ?
+        <div>
+          {posts.length > 0 ? this.insertPosts(posts): null}
+          {posts.length > postLimit ?
+            <button class="btn" onClick={increasePostLimit}>Load More</button>
+            : null}
+        </div>
+        : <Loading/>}
       </div>
     );
   }

client/js/components/sensors/SensorInfo.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class SensorInfo extends React.Component{
+    
+    
+    render(){
+        return(
+            <div>Test123</div>
+            );
+    }
+}

client/js/components/utils/Loading.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+//loading icon
+import loading from '../../../assets/images/loading.svg';
+
+export default class Loading extends React.Component{
+    render(){
+        return(
+            <div class="Loading">
+                <img src={loading} alt="loading..."/>
+            </div>
+            );
+    }
+}