Merge 1b8e874 into a4d9a9c

.gitignore

@@ -2,3 +2,4 @@
 /.idea/
 coverage/
 package-lock.json
+dist/

package.json

@@ -27,9 +27,13 @@
   },
   "homepage": "https://github.com/andela/ah-frontend-prime#readme",
   "dependencies": {
+    "@material-ui/core": "^3.9.3",
+    "@material-ui/icons": "^3.0.2",
+    "axios": "^0.18.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "express": "^4.16.4",
+    "moment": "^2.24.0",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
     "react-test-renderer": "^16.8.6",

src/actions/getArticles.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+function getArticles(event,page=1) {
+
+	axios.get('https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/?format=json&page_size='+page)
+		.then(function (response) {
+			const articles = response.data.results;
+			console.log(articles)
+			return articles
+		})
+		.catch(function (error) {
+			return error
+		});
+	}
+
+export default getArticles;

src/components/header.js

@@ -0,0 +1,120 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import AppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+import IconButton from '@material-ui/core/IconButton'
+import Typography from '@material-ui/core/Typography'
+import InputBase from '@material-ui/core/InputBase'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { withStyles } from '@material-ui/core/styles'
+import AccountCircle from '@material-ui/icons/AccountCircle'
+import SearchIcon from '@material-ui/icons/Search'
+import { Button } from '@material-ui/core';
+import { indigo, lightBlue, lightGreen } from '@material-ui/core/colors';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menu: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 9,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: 118,
+      '&:focus': {
+        width: 180,
+      },
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 8,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bar: {
+    backgroundColor: '#003153', 
+    boxShadow: 'none',
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.18),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.29),
+    },
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit,
+      width: 'auto',
+    },
+  },
+
+});
+
+function TopAppBar(props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <AppBar position="static"  className={classes.bar}>
+        <Toolbar>
+          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+            Authors Haven
+          </Typography>
+          <div className={classes.grow} />
+
+          <div className={classes.search}>
+
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search…"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+            />
+
+          </div>
+          <div className="nav-div">
+              <a href="login" className="nav-links">Sign In</a>
+              &nbsp;&nbsp; | &nbsp;&nbsp;
+              <a href="register" className="nav-links">Get Started</a>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+TopAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TopAppBar);

src/components/home.js

@@ -1,12 +1,115 @@
-import React from 'react';
-import '../styles/app.scss';
-
-const Home = () => {
-  return (
-	  <div>
-		  <h2>Welcome to Authors Haven</h2>
-	  </div>
-	)
+import React, { Component } from 'react'
+import '../styles/app.scss'
+import axios from 'axios'
+import TopAppBar from "../components/header"
+
+
+class Home extends Component {
+  constructor() {
+		super();
+		this.state = {
+			articles: []
+		}
+	}
+
+	componentDidMount(){
+		axios.get(
+			'https://jsonplaceholder.typicode.com/posts'
+		).then(response => {
+			this.setState({
+				articles: response.data.slice(0, 3)
+			})
+		})
+	}
+	render(){
+		const articles = this.state.articles;
+		const articleList = articles.length ? (
+			articles.map(article =>{
+
+				return (
+					<div className="article" key={article.id}>
+						<div className="inner">
+							<div className="article-card">
+								<h3>{article.title.substring(0, 30)} ...</h3>
+								<p>{article.body.substring(0, 60)} ...</p>
+								<span><b>Author:  Baba Polly</b></span>
+								<br/>
+								<span className="card-date">
+									Created on Tue Jan 19 at 19:44
+								</span>
+							</div>
+							<div>
+								<img 
+								src={"http://allpicts.in/download/22916/2018/03/Natural_Images_HD_1"
+								+"080p_Download_with_Waterfall_in_Tollymore_Forest_Park-1440x900.jpg/"}
+								className="img-tile" 
+								/>
+							</div>
+						</div>
+					</div>
+
+				)
+			})
+		) : (
+			<div >
+				No Articles in Authors Haven Yet
+			</div>
+		)
+		return (
+			<div className="big-container">
+				<TopAppBar/>
+				<div className="articles-top">
+					<div className="best-article">
+						<div className="inner">
+							<img 
+								src={"http://allpicts.in/download/22916/2018/03/Natural_Images_HD_1"
+								+"080p_Download_with_Waterfall_in_Tollymore_Forest_Park-1440x900.jpg/"}
+								className="img-top" 
+								/>
+							<div className="inner">
+								<div className="inner">
+									<div className="best-article-card">
+										<h3>Facebook's Plan to Fuse its Messaging Apps Is Not about Your 
+											Privacy Just follow the Money</h3>
+										<span><b>Author:  Yasha Levin in OneZero</b></span>
+										<br/>
+										<span className="card-date">
+											Created a few hours ago
+										</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div>
+
+						</div>
+					</div>
+					<div className="top-articles">
+						{articleList}
+					</div>
+					<div className="top-articles">
+						{articleList}
+					</div>
+				</div>
+
+				<div className="articles">
+					<div className="heading">
+						<h3>Featured Articles</h3>
+					</div>
+					<hr/>
+					{articleList}
+				</div>
+				<div className="articles1">
+					<div className="heading">
+						<h3>Popular Articles</h3>
+					</div>
+					<hr/>
+					{articleList}
+				</div>
+			</div>
+		)
+	}
 }
 
+
 export default Home;

src/components/routes.js

@@ -9,14 +9,15 @@ import Home from './home';
 
 class Routes extends Component {
 
-  render(){
-    return (
-      <BrowserRouter>
-			  <Route exact path="/" component={Home} />
-			  <Route path="/login" component={Login} />
-      </BrowserRouter>
-    );
-  };
+	render(){
+		return (
+			<BrowserRouter>
+				<Route exact path="/" component={Home} />
+				<Route path="/login" component={Login} />
+				<Route exact path="/home" component={Home} />
+			</BrowserRouter>
+		);
+	}
 }
 
 export default Routes;

src/index.html

@@ -3,6 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://fonts.googleapis.com/css?family=Karla|Quantico|Audiowide' rel='stylesheet' type='text/css'>
+
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Authors's haven</title>
 </head>