src/containers/Home.js

@@ -1,9 +1,13 @@
-import React, { Component } from 'react';
+import React from 'react';
-import { Link } from 'react-router-dom';
+import {connect} from 'react-redux';
-import { connect } from 'react-redux';
 import testAction from '../actions/test';
 import fetchVideos from '../actions/fetchVideos';
-
+import Search from '../subComponents/Search';
+import Footer from '../subComponents/Footer';
+import RandomLocation from "../subComponents/RandomLocation";
+import RandomDate from "../subComponents/RandomDate";
+import RandomTopic from "../subComponents/RandomTopic";
+import Header from "../subComponents/Header";
 class Home extends React.Component {
   clickBtn() {
     this.props.testAction('some new value');
@@ -12,22 +16,32 @@ class Home extends React.Component {
   render() {
     return (
       <div>
-        This is home. { this.props.test }
+        <Header/>
-        <div>
+        <Search/>
-          <Link to="/topics">Go to topics</Link>
+        <RandomTopic/>
-        </div>
+        <RandomLocation/>
-        <div>
+        <RandomDate/>
-          <button onClick={ this.clickBtn.bind(this) }>Click me</button>
+        <Footer/>
-          <button onClick={ this.props.fetchVideos }>Fetch videos</button>
-        </div>
-        <div>
-          { this.props.loading && 'Loading...'}
-          { this.props.videos.map(video => {
-            return (<div key={ video.id }>{ video.title }</div>);
-          })}
-        </div>
       </div>
     );
+    //
+    // <div>
+    //   This is home. {this.props.test}
+    //   <div>
+    //     <Link to="/topics">Go to topics</Link>
+    //   </div>
+    //   <div>
+    //     <button onClick={this.clickBtn.bind(this)}>Click me</button>
+    //     <button onClick={this.props.fetchVideos}>Fetch videos</button>
+    //   </div>
+    //   <div>
+    //     {this.props.loading && 'Loading...'}
+    //     {this.props.videos.map(video => {
+    //       return (<div key={video.id}>{video.title}</div>);
+    //     })}
+    //   </div>
+    // </div>
+
   }
 }
 

src/subComponents/Footer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class Footer extends React.Component{
+render(){
+  return(
+   'hello Footer!'
+  )
+}
+}
+export default  (Footer);

src/subComponents/Header.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class Header extends React.Component{
+render(){
+  return(
+   'hello! header'
+  )
+}
+}
+export default  (Header);

src/subComponents/RandomDate.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class RandomDate extends React.Component{
+render(){
+  return(
+   'hello Dandom Date!'
+  )
+}
+}
+export default  (RandomDate);

src/subComponents/RandomLocation.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class RandomLocation extends React.Component{
+render(){
+  return(
+   'hello Random Location!'
+  )
+}
+}
+export default  (RandomLocation);

src/subComponents/RandomTopic.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class RandomTopic extends React.Component{
+render(){
+  return(
+   'hello Random Topic!'
+  )
+}
+}
+export default  (RandomTopic);

src/subComponents/Search.js

@@ -0,0 +1,9 @@
+import React from 'react';
+class Search extends React.Component{
+render(){
+  return(
+   'hello Search!'
+  )
+}
+}
+export default  (Search);