fixed routing

client/js/app.js

@@ -12,14 +12,9 @@ import store, {history} from './redux/store';
 import * as actions from './redux/actions';
 
 import Index from './pages/Index';
-
+import Preview from './components/Preview';
-class Main extends React.Component {
+import Post from './components/Post';
-    render() {
+import SensorInfo from './components/sensors/SensorInfo';
-        return (
-            <div>{React.cloneElement(this.props.children, this.props)}</div>
-        );
-    }
-}
 
 function mapStateToProps(state) {
     return {
@@ -33,14 +28,15 @@ function mapDispatchToProps(dispatch) {
     }
 }
 
-const App = connect(mapStateToProps, mapDispatchToProps)(Main);
+const App = connect(mapStateToProps, mapDispatchToProps)(Index);
 
 ReactDOM.render((
     <Provider store={store}>
         <Router history={history}>
             <Route path="/" component={App}>
-                <IndexRoute component={Index}/>
+                <IndexRoute component={Preview}/>
-                <Route path="/:page(/:category)(/:post)" component={Index}/>
+                <Route path="post/:category/:post" component={Post}/>
+                <Route path="sensor/:location/:year/:month" component={SensorInfo}/>
             </Route>
         </Router>
     </Provider>

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}
+        {fetched ?
-        {posts.length > this.props.postLimit ?
+        <div>
-          <button class="btn" onClick={this.props.increasePostLimit.bind(this)}>Load More</button>
+          {posts.length > 0 ? this.insertPosts(posts): null}
-          : 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>
+            );
+    }
+}

client/js/pages/Index.js

@@ -2,10 +2,8 @@ import React from 'react';
 
 //components
 import Header from '../components/Header';
-import Preview from '../components/Preview';
 import Footer from '../components/Footer';
 import Sidebar from '../components/Sidebar';
-import Post from '../components/Post';
 
 //css
 import '../../assets/css/normalize.css';
@@ -13,42 +11,14 @@ import '../../assets/scss/main.scss';
 import 'font-awesome/css/font-awesome.min.css';
 import '../../assets/css/dracula.css';
 
-//loading icon
-import loading from '../../assets/images/loading.svg';
-
 export default class Index extends React.Component {
-  componentDidMount() {
-    this.props.actions.fetchPreview();
-    this.page = this.props.params.page;
-    this.page === 'post' ? this.props.actions.fetchPost(this.props.params.category, this.props.params.post) : "";
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.params !== nextProps.params) {
-      const params = nextProps.params;
-      this.page = params.page;
-
-      if (typeof params.post !== 'undefined' && typeof params.category !== 'undefined') {
-        this.props.actions.fetchPost(params.category, params.post);
-      }
-    }
-  }
 
   render() {
-    const fetched = this.props.redux.fetched;
-    const fetching = this.props.redux.fetching;
-
     return (
       <div>
             <Header/>
               <div class="Main">
-                  {typeof this.page === 'undefined' && !fetching
+                {React.cloneElement(this.props.children, this.props)}
-                    ? <Preview posts={this.props.redux.preview.posts}
-                               postLimit={this.props.redux.postLimit}
-                               increasePostLimit={this.props.actions.increasePostLimit}/>
-                    : null}
-                  {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
-                  {fetching ? loadingElement : null}
                 <Sidebar/>
               </div>
             <Footer/>
@@ -56,7 +26,3 @@ export default class Index extends React.Component {
     );
   }
 }
-
-const loadingElement =  <div class="Loading">
-                          <img src={loading} alt="loading..."/>
-                        </div>;