+ );
+};
+
+Cards.defaultProps = {
+ title: '',
+ body: '',
+ slug: '',
+ views: 0,
+};
+Cards.propTypes = {
+ title: PropTypes.string,
+ body: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ slug: PropTypes.string,
+ views: PropTypes.number,
+};
+
+export default Cards;
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
new file mode 100644
index 0000000..d5d6489
--- /dev/null
+++ b/src/components/Dropdown.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+ Dropdown, ButtonGroup,
+} from 'bootstrap-4-react';
+
+/**
+ * This component is called DropRight component, it renders the dropdown component that holds
+ * the link to article rating modal.
+ */
+const DropRight = () => (
+
+
+
+
+
+ Report This Article
+ Rate this Article
+ Bookmark this Article
+
+
+);
+export default DropRight;
diff --git a/src/components/RatingsModal.jsx b/src/components/RatingsModal.jsx
new file mode 100644
index 0000000..5ed2973
--- /dev/null
+++ b/src/components/RatingsModal.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+ Modal, Button,
+} from 'bootstrap-4-react';
+import StarRatingComponent from 'react-star-rating-component';
+import PropTypes from 'prop-types';
+
+/**
+ * This component is called RatingsModal component, it renders the ratings modal and also holds
+ * the button to close or save ratings.
+ */
+const RatingsModal = (props) => {
+ const {
+ title, rating, starClick, handleRatingsSubmit,
+ } = props;
+ return (
+
+
+
+ {title}
+
+ ×
+
+
+
+
+
+Your current rating for this article is:
+ {' '}
+ {rating}
+ {' '}
+stars
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+RatingsModal.defaultProps = {
+ title: '',
+ starClick: () => '',
+ handleRatingsSubmit: () => '',
+ rating: 0,
+};
+
+RatingsModal.propTypes = {
+ title: PropTypes.string,
+ starClick: PropTypes.func,
+ handleRatingsSubmit: PropTypes.func,
+ rating: PropTypes.number,
+};
+
+export default RatingsModal;
diff --git a/src/reducers/article.reducer.js b/src/reducers/article.reducer.js
new file mode 100644
index 0000000..5967dda
--- /dev/null
+++ b/src/reducers/article.reducer.js
@@ -0,0 +1,27 @@
+import { FETCH_ARTICLE, RATE_ARTICLE } from '../actions/types';
+
+const initialState = {
+ article: {},
+ rating: '',
+ alert: '',
+};
+
+const articles = (state = initialState, action) => {
+ switch (action.type) {
+ case FETCH_ARTICLE:
+ return {
+ ...state,
+ article: action.article,
+ };
+ case RATE_ARTICLE:
+ return {
+ ...state,
+ rating: action.rating,
+ alert: action.message,
+ };
+ default:
+ return state;
+ }
+};
+
+export default articles;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index a67c94e..b856ed6 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,3 +1,9 @@
import { combineReducers } from 'redux';
+import articles from './article.reducer';
-export default combineReducers({ });
+
+const reducers = combineReducers({
+ articles,
+});
+
+export default reducers;
diff --git a/src/services/articles.js b/src/services/articles.js
new file mode 100644
index 0000000..885e188
--- /dev/null
+++ b/src/services/articles.js
@@ -0,0 +1,27 @@
+const defaultUrl = 'https://ah-nyati-backend-staging.herokuapp.com/api/v1';
+const { UserToken } = localStorage;
+
+
+export const getArticle = slug => fetch(`${defaultUrl}/articles/${slug}`)
+ .then(resp => resp.json())
+ .then(resp => resp)
+ .catch(err => err);
+
+export const rateArticle = (slug, rating) => {
+ const data = {
+ value: rating,
+ };
+ const config = {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ token: UserToken,
+ },
+ body: JSON.stringify(data),
+ };
+ return fetch(`${defaultUrl}/articles/rate/${slug}`, config)
+ .then(resp => resp.json())
+ .then(resp => (resp))
+ .catch(err => err);
+};
diff --git a/src/services/authentication.js b/src/services/authentication.js
new file mode 100644
index 0000000..6cb30fd
--- /dev/null
+++ b/src/services/authentication.js
@@ -0,0 +1,24 @@
+const defaultUrl = 'https://ah-nyati-backend-staging.herokuapp.com/api/v1';
+
+
+const login = (userData) => {
+ const config = {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(userData),
+ };
+
+ return fetch(`${defaultUrl}/auth/login`, config)
+ .then(resp => resp.json())
+ .then((res) => {
+ if (res.status === 200) {
+ localStorage.UserToken = res.token;
+ }
+ })
+ .catch(err => err);
+};
+
+export default login;
diff --git a/src/views/Articles/Articles.jsx b/src/views/Articles/Articles.jsx
new file mode 100644
index 0000000..0d55e0c
--- /dev/null
+++ b/src/views/Articles/Articles.jsx
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, BSmall } from 'bootstrap-4-react';
+
+
+/**
+ * Dummy get all articles component,renders all the articles in the database
+ */
+class Articles extends Component {
+ state = {
+ articles: [
+ {
+ title: 'Article',
+ slug: 'article',
+ body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ catId: 1,
+ userId: 1,
+ },
+ {
+ title: 'Article 2',
+ slug: 'article',
+ body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ catId: 1,
+ userId: 1,
+ },
+ {
+ title: 'Article 3',
+ slug: 'article',
+ body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ catId: 1,
+ userId: 1,
+ },
+ {
+ title: 'new Article',
+ slug: 'article new',
+ body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ catId: 1,
+ userId: 1,
+ },
+ {
+ title: 'long Article',
+ slug: 'article longer',
+ body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+ catId: 1,
+ userId: 1,
+ },
+ ],
+ }
+
+ render() {
+ const { articles } = this.state;
+ const data = articles.map((article, i) => {
+ const elKey = `${i}-${article.slug}`;
+ return (
+
+
+ {article.title}
+
+ {article.body}
+
+
+
+
+
+
+Click to read
+
+
+
+
+
+ );
+ });
+ return (
+
);
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index 6ca8871..9b1b9ae 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -1,20 +1,75 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+import { Form, Button } from 'bootstrap-4-react';
+import login from '../services/authentication';
+
/**
* Dummy Login Page, should allow the user to log into the app successfully
* it also holds the link to the dummy Home page
*/
-const Login = () => (
-