feat(landing-page): create landing page

 - add header for all pages
 - fetch articles from the backend using axios
 - style landing page

[Maintains #165819922]

.gitignore

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

package.json

@@ -27,6 +27,8 @@
   },
   "homepage": "https://github.com/andela/ah-frontend-prime#readme",
   "dependencies": {
+    "@material-ui/core": "^3.9.3",
+    "axios": "^0.18.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "express": "^4.16.4",

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,108 @@
+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 MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit,
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: 120,
+      '&:focus': {
+        width: 200,
+      },
+    },
+  },
+});
+
+function SearchAppBar(props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton className={classes.menuButton} color="inherit" aria-label="Open drawer">
+            <MenuIcon />
+          </IconButton>
+          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+            Material-UI
+          </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>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+SearchAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SearchAppBar);

src/components/home.js

@@ -1,12 +1,54 @@
-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 {SearchAppBar} from "../components/header"
+
+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;
+		const articleList = articles.length ?(
+			articles.map(article =>{
+				return (
+					<div className="article card " key={article.id}>
+						<div className="card-content">
+							<span className="card-title">{article.title}</span>
+							<p>{article.body}</p>
+							<span className="card-author">Author: {article.author} | </span>
+							<span className="card-date">Date Created: {article.createdAt}</span>
+						</div>
+					</div>
+				)
+			})
+		) : (
+			<div className="center">
+				No Articles in Authors Haven Yet
+			</div>
+		)
+		return (
+			<div>
+				{/* <SearchAppBar /> */}
+				<h2>Welcome to Authors Haven</h2>
+			</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;