Merge branch 'create-the-static-pages' of 858/frontend into master

This commit is contained in:
ahmedayman055 2018-12-05 18:54:07 +00:00 committed by Gitea
commit 79b21f8bae
11 changed files with 109 additions and 20 deletions

View File

@ -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.

View File

@ -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';

View File

@ -1,9 +1,13 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React from 'react';
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 }
<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>
<Header/>
<Search/>
<RandomTopic/>
<RandomLocation/>
<RandomDate/>
<Footer/>
</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>
}
}

BIN
src/logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

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

View File

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

View File

@ -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);

View File

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

View File

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

View File

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

View File

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