feat(Consuning API) Getting articles from an endpoint to display on t…

…he landing page (#22)

- User shoukd be able to view sample articles and trending articles

[Finishes #165909011]

package.json

@@ -44,6 +44,7 @@
     "react-toolbox": "^2.0.0-beta.13",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.8",
+    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1"
@@ -67,6 +68,7 @@
     "eslint-plugin-react": "^7.13.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.1",
+    "moxios": "^0.4.0",
     "react-test-renderer": "^16.8.6",
     "svg-inline-loader": "^0.8.0",
     "webpack": "^4.30.0",

src/actions/articlesActions.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+import GET_ARTICLES from './types';
+
+const fetchArticles = () => dispatch => (
+  axios.get(`${process.env.baseURL}/articles/`)
+    .then((response) => {
+      dispatch({
+        type: GET_ARTICLES,
+        payload: response.data.results,
+      });
+    })
+);
+export default fetchArticles;

src/actions/types.js

@@ -0,0 +1,2 @@
+const GET_ARTICLES = 'GET_ARTICLES';
+export default GET_ARTICLES;

src/components/Articles/ArticleContainer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SampleArticles from './index';
+import TrendingArticles from './TrendingArticles';
+
+const ArticleContainer = ({ articles }) => (
+  <div className="wrapper">
+    <SampleArticles articles={articles} />
+    <TrendingArticles articles={articles} />
+  </div>
+);
+
+ArticleContainer.defaultProps = {
+  articles: [],
+};
+ArticleContainer.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.object),
+};
+export default ArticleContainer;

src/components/Articles/DisplaySampleArticles.jsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import PropTypes, { shape } from 'prop-types';
+import ArticleImage from '../../assets/images/article_image.jpeg';
+
+
+const DisplaySampleArticles = ({ sampleArticle, articleDate }) => (
+  <div className="sample-articles">
+    <div className="article-image">
+      <img src={ArticleImage} alt="Article" />
+    </div>
+    <div className="trending-articles">
+      <h4>{sampleArticle.title}</h4>
+      <h6 className="sample_article_start">
+        {sampleArticle.description}
+      </h6>
+      <p className="author_name">
+        Created By
+        {' '}
+        <b>{sampleArticle.author.username}</b>
+      </p>
+      <h6>
+        { articleDate }
+        {' '}
+        -
+        {sampleArticle.article_read_time}
+      </h6>
+    </div>
+  </div>
+);
+
+DisplaySampleArticles.defaultProps = {
+  sampleArticle: shape(PropTypes.object.isRequired),
+  articleDate: '',
+};
+DisplaySampleArticles.propTypes = {
+  sampleArticle: shape(PropTypes.object.isRequired),
+  articleDate: PropTypes.string,
+};
+
+
+export default DisplaySampleArticles;

src/components/Articles/DisplayTrendingArticles.jsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import PropTypes, { shape } from 'prop-types';
+import BookmarkImage from '../../assets/images/bookmark.png';
+
+
+const DisplayTrendingArticles = ({ trendingArticles, articleDate }) => (
+  <div className="trending">
+    <div className="trending-articles">
+      <h4>{trendingArticles.title}</h4>
+      <p className="author_name">
+
+        <b>
+          {' '}
+          Created By
+          {' '}
+          {trendingArticles.author.username}
+        </b>
+      </p>
+      <h6>
+        { articleDate }
+          -
+        {trendingArticles.article_read_time}
+      </h6>
+    </div>
+    <div className="book-mark-holder">
+      <img
+        src={BookmarkImage}
+        alt="article-bookmark-icon"
+        className="bookmark-image"
+      />
+    </div>
+    <br />
+  </div>
+);
+
+DisplayTrendingArticles.defaultProps = {
+  trendingArticles: shape(PropTypes.object.isRequired),
+  articleDate: '',
+};
+DisplayTrendingArticles.propTypes = {
+  trendingArticles: shape(PropTypes.object.isRequired),
+  articleDate: PropTypes.string,
+};
+
+export default DisplayTrendingArticles;

src/components/Articles/TrendingArticles.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import DisplayTrendingArticles from './DisplayTrendingArticles';
+import getRandomArticles from '../../helpers/randomArticles';
+
+const TrendingArticles = ({ articles }) => {
+  const randomArray = getRandomArticles(5, articles);
+  return (
+    <div>
+      <h1>Trending</h1>
+      <br />
+      <hr />
+      <br />
+      {articles.length > 0 ? (
+        randomArray.map((article) => {
+          const articleDate = moment(
+            article.createdAt.slice(0, 10),
+          ).format('LL');
+          return (
+            <div key={article.id}>
+              <DisplayTrendingArticles
+                articleID={article.id}
+                trendingArticles={article}
+                articleDate={articleDate}
+              />
+            </div>
+          );
+        })
+      ) : (
+        <div>No Trending Articles where Found !!!!</div>
+      )}
+    </div>
+  );
+};
+
+TrendingArticles.defaultProps = {
+  articles: [],
+};
+TrendingArticles.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default TrendingArticles;

src/components/Articles/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import DisplaySampleArticles from './DisplaySampleArticles';
+
+
+const SampleArticles = ({ articles }) => (
+  <div>
+    {
+    articles.length > 0 ? (
+      articles.map((article) => {
+        const articleDate = moment(article.createdAt.slice(0, 10)).format(
+          'LL',
+        );
+        return (
+          <div key={article.id}>
+            <DisplaySampleArticles
+              sampleArticle={article}
+              articleDate={articleDate}
+            />
+          </div>
+
+        );
+      })
+    ) : (
+      <div>No Posts where Found !!!!</div>
+    )}
+  </div>
+);
+
+SampleArticles.defaultProps = {
+  articles: [],
+};
+SampleArticles.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default SampleArticles;