Merge 4c42052 into 4eef64c

.eslintrc.json

@@ -2,7 +2,8 @@
     "env": {
         "browser": true,
         "es6": true,
-        "node": true
+        "node": true,
+        "jest":true
     },
     "extends": "airbnb",
     "globals": {

package.json

@@ -13,10 +13,14 @@
     "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.6",
     "react-redux": "^6.0.1",
+    "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "react-toastify": "^5.0.1",
+    "reactstrap": "^7.1.0",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "validator": "^10.11.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/AllArticles.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import unixTimeToDate from '../utils/dateFormatter';
+import extractImageFromBody from '../utils/imageExtractor';
+
+const AllArticles = ({ articles }) => (articles ? (
+  articles.map(article => (
+    <div key={article.id}>
+
+      <div className="home-view-last">
+        <img
+          src={extractImageFromBody(article.body)}
+          alt=""
+        />
+
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <h3><Link a href="#" className="title-link">{article.title}</Link></h3>
+
+        <span className="description">{article.description}</span>
+        <br />
+        <span className="author">{article.author.username}</span>
+        <br />
+        <span className="meta">
+          {unixTimeToDate(article.created_at)}
+&nbsp;.&nbsp;
+          {article.reading_time}
+&nbsp;read
+        </span>
+      </div>
+    </div>
+  ))
+) : (
+  <div>Loading...</div>
+));
+
+AllArticles.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number,
+    PropTypes.string, PropTypes.array])),
+};
+
+AllArticles.defaultProps = {
+  articles: [],
+};
+export default AllArticles;

src/components/ArticlesByCriteria.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import unixTimeToDate from '../utils/dateFormatter';
+import extractImageFromBody from '../utils/imageExtractor';
+
+const ArticlesByCriteria = ({ articles, start, end }) => (articles ? (
+  articles.slice(start, end).map(article => (
+    <div key={article.id}>
+      <img src={extractImageFromBody(article.body)} alt="" />
+      <h3>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <Link className="title-link">
+          {article.title}
+        </Link>
+      </h3>
+      <span className="author">{article.author.username}</span>
+      <br />
+      <span className="meta">
+        {unixTimeToDate(article.created_at)}
+          &nbsp;.&nbsp;
+        {article.reading_time}
+          &nbsp;read
+      </span>
+    </div>
+  ))
+) : (
+  <div>Loading...</div>
+));
+
+ArticlesByCriteria.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number,
+    PropTypes.string, PropTypes.array])),
+  start: PropTypes.number,
+  end: PropTypes.number,
+};
+
+ArticlesByCriteria.defaultProps = {
+  articles: [],
+  start: 0,
+  end: 0,
+};
+export default ArticlesByCriteria;

src/components/Footer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Footer = () => (
-  <div className="footer">
+  <div className="footer fixed-bottom">
     <hr />
     <p>Author&apos;s Haven. All rights reserved. &copy; 2019</p>
   </div>

src/components/Home.jsx

@@ -1,8 +1,100 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Container, Row, Col, Card,
+} from 'react-bootstrap';
+import AllArticles from './AllArticles';
+import ArticlesByCriteria from './ArticlesByCriteria';
 
-const Home = () => (
-  <div className="main-container">
-    <h3>Home</h3>
-  </div>
+const Home = ({ articles }) => (
+  <Container>
+    <Row>
+      <Col xs={3}>
+        <ArticlesByCriteria articles={articles} start={0} end={1} />
+      </Col>
+
+      <Col xs={{ offset: 1 }}>
+        <Row>
+          <Col>
+            <div className="home-view">
+              <ArticlesByCriteria articles={articles} start={2} end={3} />
+            </div>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col>
+            <div className="home-view">
+              <ArticlesByCriteria articles={articles} start={1} end={2} />
+            </div>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col>
+            <div className="home-view">
+              <ArticlesByCriteria articles={articles} start={2} end={3} />
+            </div>
+          </Col>
+        </Row>
+      </Col>
+
+      <Col xs={3}>
+        <ArticlesByCriteria articles={articles} start={0} end={1} />
+      </Col>
+    </Row>
+
+    {/* Start Second Section */}
+    <Row>
+      <Col>
+        <Card className="welcome-card">
+          <Card.Body>
+            <Row>
+              <Col>
+                <h2>Welcome to Author&apos;s Haven</h2>
+                <br />
+                <span className="author">
+                    We are community of like minded authors to foster
+                    inspiration and innovation by leveraging the modern web.
+                    Whatever your interest, you can always find fresh thinking
+                    and unique perspectives.
+                </span>
+                <br />
+              </Col>
+              <Col xs={3}>
+                <img
+                  src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
+                  alt=""
+                />
+              </Col>
+            </Row>
+          </Card.Body>
+        </Card>
+      </Col>
+    </Row>
+    {/* End Second Section */}
+
+    <Row>
+      <Col>
+        <AllArticles articles={articles} />
+      </Col>
+      <Col xs={{ span: 3, offset: 1 }}>
+        <Row>
+          <Col>
+            <h3>Popular on Author&apos;s Haven</h3>
+            <hr />
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  </Container>
 );
+Home.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number,
+    PropTypes.string, PropTypes.array])),
+};
+
+Home.defaultProps = {
+  articles: [],
+};
 export default Home;

src/containers/HomeView.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Home from '../components/Home';
+import { fetchAllArticles } from '../store/actions/articles';
+
+export class HomeView extends Component {
+  componentDidMount() {
+    fetchAllArticles();
+  }
+
+  render() {
+    const { articles } = this.props;
+    const items = articles.articles.results;
+    return <Home articles={items} />;
+  }
+}
+
+HomeView.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number,
+    PropTypes.string, PropTypes.array])),
+
+};
+
+HomeView.defaultProps = {
+  articles: [],
+};
+export const mapStateToProps = state => ({ articles: state.articles });
+export const mapDispatchToProps = dispatch => ({
+  fetchAllArticles: () => dispatch(fetchAllArticles()),
+});
+export default connect(
+  mapStateToProps,
+  fetchAllArticles(),
+)(HomeView);