Merge 9f71596 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,115 @@
+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';
+
+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',
+  },
+
+  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 className="topbar">
+        <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>
+              <a href="login" className="nav-links">Sign In</a> | 
+              <Button  className="nav-links top-button">Get Started</Button>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+TopAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TopAppBar);

src/components/home.js

@@ -1,12 +1,75 @@
-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"
+import moment from 'moment'
+
+
+
+class Home extends Component {
+  constructor() {
+		super();
+		this.state = {
+			articles: []
+		}
+	}
+
+	componentDidMount(){
+		axios.get(
+			'https://ah-backend-prime-staging.herokuapp.com'+
+			'/api/v1/articles/?format=json&page_size=1'
+		).then(response => {
+			this.setState({
+				articles: response.data.results
+			})
+		})
+	}
+	render(){
+		const articles = this.state.articles;
+		const articleList = articles.length ? (
+			articles.map(article =>{
+
+				const time = moment(article.createdAt).format('HH:mm')
+				const date = moment(article.createdAt).format('ddd D MMMM YYYY')
+				const image = "http://allpicts.in/download/22916/2018/03/Natural_"+
+				"Images_HD_1080p_Download_with_Waterfall_in_Tollymore_Forest_Park-1440x900.jpg/"
+
+				return (
+					<div className="article" key={article.id}>
+						<div className="article-card">
+							<h3>{article.title}</h3>
+							<p>{article.body.substring(0, 60)} ...</p>
+							<span>Author: <b> {article.author.username}</b></span>
+							<span className="card-date">
+								Created on {date} at {time}
+							</span>
+
+						</div>
+						<div>
+							<img src={image} className="img-tile" />
+						</div>
+					</div>
+				)
+			})
+		) : (
+			<div >
+				No Articles in Authors Haven Yet
+			</div>
+		)
+		return (
+			<div className="big-container">
+				<TopAppBar />
+				<div className="heading">
+					<h1>Featured Articles</h1>
+				</div>
+
+				<div className="articles">
+						{articleList}
+				</div>
+			</div>
+		)
+	}
 }
 
+
 export default Home;

src/components/routes.js

@@ -9,14 +9,14 @@ 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} />
+			</BrowserRouter>
+		);
+	}
 }
 
 export default Routes;

src/styles/app.scss

@@ -1,4 +1,83 @@
 h2 {
-  color: #1b7999;
+  color: .1b7999;
   text-align: center;
 }
+div {
+  font-family: Quantico;
+}
+.card-title{
+  text-align: center
+}
+.cart-author{
+  float: left;
+  text-align: left
+}
+.card-content{
+  text-align: right
+}
+.card-date{
+  float: left;
+  text-align: left;
+  font-style: italic
+}
+.article-card{
+  text-align: left;
+  float: left;
+  width: 70%;
+  margin: 0.5%
+}
+.big-container{
+  position: absolute;
+  left: 0%;
+  top:0%;
+  right: 0%;
+  text-align: center;
+
+}
+.links{
+  text-decoration: none;
+  color: whitesmoke;
+}
+
+.img-tile{
+  float: right;
+  width: 28%;
+  margin: 0.5%;
+}
+.articles{
+  width: 100%;
+  text-align: center;
+  height: 100%
+}
+.heading{
+  width:100%;
+  margin-top: 100px
+}
+.tile{
+  height: 300px
+}
+.topbar{
+  background-color: #003153
+}
+.nav-links{
+  color: white;
+}
+.article{
+  width: 30%;
+  float: left;
+  margin:5px;
+}
+a{
+  text-decoration: none;
+  margin-left: 10%;
+  margin-right: 3%;
+
+}
+.top-button{
+  border-block-end-color: white
+}
+@media only screen and (max-width: 600px){
+  .article{
+    width: 50%;
+  }
+}