README.md

@@ -1,7 +1,10 @@
 Frontend repository for the 858 archive
 -----------
 
-[ ] get a clear design from Salma, Islam & Ayman. 
+[x] get a clear design from Salma, Islam & Ayman.
+ 
 [ ] make a static site.
+
 [ ] react with static json files.
+
 [ ] connect to the API.

src/App.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import logo from './logo.svg';
 import './App.css';
 import { Route } from 'react-router-dom';
 import Home from './containers/Home';

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 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/styleSheets/style.css

@@ -0,0 +1,4 @@
+.site-logo{
+    max-width: 300px;
+}
+

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,24 @@
+import React from 'react';
+import logo from '../logo.png';
+import '../styleSheets/style.css'
+
+class Header extends React.Component {
+  render() {
+    const Logo = () => {
+      return (
+        <nav>
+          <img className="site-logo" src={logo} alt="logo 858 "/>
+        </nav>
+      );
+    }
+    return (
+      <header>
+        <section className="container">
+          <Logo/>
+        </section>
+      </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);