Merge 78f95fb into 6ce122c

public/index.html

@@ -6,7 +6,8 @@
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Open+Sans">
+          href="https://fonts.googleapis.com/css?family=Open+Sans|Merriweather|Indie+Flower|Cookie|KoHo:light
+          ">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">

src/actions/actionCreators.js

@@ -1,13 +1,18 @@
 import {
   SOCIAL_LOGIN_INITIATED,
   SOCIAL_LOGIN_SUCCESS,
+  GET_ALL_ARTICLES_SUCCESS,
 } from './types';
 
 export const socialLoginInitiated = () => ({
   type: SOCIAL_LOGIN_INITIATED,
 });
 
-
 export const socialLoginSuccess = () => ({
   type: SOCIAL_LOGIN_SUCCESS,
 });
+
+export const getAllArticles = (payload) => ({
+  type: GET_ALL_ARTICLES_SUCCESS,
+  payload,
+});

src/actions/articleActions.js

@@ -0,0 +1,12 @@
+import axiosInstance from '../config/axiosInstance';
+import { getAllArticles } from './actionCreators';
+
+export const fetchArticles = () => dispatch => {
+  axiosInstance
+    .get('/api/article/')
+    .then((response) => {
+      dispatch(getAllArticles(response.data.article));
+    });
+};
+
+export default fetchArticles;

src/actions/types.js

@@ -4,3 +4,4 @@ export const LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS';
 export const LOGIN_USER_ERROR = 'LOGIN_USER_ERROR';
 export const SOCIAL_LOGIN_INITIATED = 'SOCIAL_LOGIN_INITIATED';
 export const SOCIAL_LOGIN_SUCCESS = 'SOCIAL_LOGIN_SUCCESS';
+export const GET_ALL_ARTICLES_SUCCESS = 'GET_ALL_ARTICLES_SUCCESS';

src/assets/App.css

@@ -88,7 +88,7 @@ header.uvp {
   color: black;
 }
 .first-section {
-  background-image: url("../assets/bg-image.jpg");
+  background-image: url("../assets/images/bg-image.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   height: 150%;
@@ -108,10 +108,9 @@ header.uvp {
   padding: 40px;
   background: #f5f5f5;
   box-sizing: border-box;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
   border-radius: 10px;
 }
-
 .forgot-password{
   color: firebrick;
 }
@@ -151,3 +150,108 @@ header.uvp {
   display: inline-block;
   border:solid 1px #4c69ba;
 }
+.article{
+  margin: 0 100px;
+}
+.article-img{
+  width: 75%;
+}
+.article-list{
+  margin-top: 20px;
+  background-color: #e2e2e236;
+}
+.author-thumbnail {
+  border-radius: 50%;
+}
+.article-description{
+  font-family: "Open Sans", sans-serif;
+}
+.article-essentials{
+  border-bottom: solid 0.5px #e3e9ef;
+  padding-left: 0px;
+}
+.article-time{
+  color: #8c96a0;
+  font-size: 12px;
+  padding: none;
+}
+.entire-article{
+  margin-top:40px;
+}
+.author-name{
+  font-size:18px;
+}
+.icon{
+  float: right;
+  padding-right: 6px;
+}
+.card{
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  width: 100%;
+}.card-block{
+  line-height: 1.7;
+}
+.card-title{
+  font-family: "Merriweather", sans-serif;
+  color: #2C3E50;
+  padding-top: 15px;
+}
+.card-footer{
+  border-top:none;
+}
+.dashboard-section{
+  background-image: url('./images/dashboard.jpg');
+  margin-top: -83px !important;
+  background-attachment: fixed;
+  background-size: cover;
+  height: 360px;
+  position: fixed;
+  padding-top: 45px;
+  z-index: 1;
+  width:100%;
+}
+.inner-dash{
+  background-color: #000000c9;
+  margin-top: 1.1rem;
+  height: 300px;
+  width: 100%;
+  color: #d0cfcf;
+  position: fixed;
+  z-index: 1;
+}
+.dash-intro{
+  border-radius: .3rem;
+  padding-top: 90px;
+}
+.dash{
+  z-index: 2;
+  position: relative;
+  top: 300px;
+  background-color: white;
+}
+.dash-btn{
+  padding: 5px 90px;
+  font-family: 'KoHo';
+  font-size: 20px;
+}
+.reading{
+  font-family: 'Cookie';
+  padding: 0 0 0 0;
+  font-weight: bold;
+  font-size: 45px;
+}.writing{
+  font-family: 'Indie Flower';
+  padding: 0 0 0 0;
+  font-weight: bold;
+  font-size: 45px;
+}
+.intro-text{
+
+  font-family: 'KoHo';
+  font-size: 40px;
+  letter-spacing: -4px;
+  word-spacing: 5px;
+  padding: 0 0 0 20px;
+}

src/components/Articles/Articles.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
+import fetchArticles from '../../actions/articleActions';
+import ArticlesList from './ArticlesList';
+
+export class Articles extends Component {
+  componentDidMount() {
+    const { fetchArticles } = this.props;
+    fetchArticles();
+  }
+
+  render() {
+    const { articlesPayload } = this.props;
+    const articles = articlesPayload;
+    return (
+      <div>
+        {Object.keys(articles).length > 0
+          && <ArticlesList articles={articles.results} />
+        }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  articlesPayload: state.article.articlesPayload,
+});
+
+const matchDispatchToProps = (dispatch) => bindActionCreators({
+  fetchArticles,
+}, dispatch);
+
+Articles.propTypes = {
+  fetchArticles: PropTypes.func.isRequired,
+  articlesPayload: PropTypes.object.isRequired,
+};
+
+export default connect(
+  mapStateToProps,
+  matchDispatchToProps,
+)(Articles);

src/components/Articles/ArticlesList.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SingleArticle from './SingleArticle';
+
+const ArticlesList = ({ articles }) => (
+  <div>
+    {articles.map(article => (
+      <SingleArticle key={article.id} article={article} />
+    ))}
+  </div>
+);
+
+ArticlesList.propTypes = {
+  articles: PropTypes.array.isRequired,
+};
+
+export default ArticlesList;

src/components/Articles/SingleArticle.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import articleImg from '../../assets/images/articleImg.jpeg';
+import user from '../../assets/images/user.png';
+
+function articleCreated(articleDate) {
+  const dateTime = new Date(articleDate);
+  const dateOnly = dateTime.toDateString();
+  return dateOnly;
+}
+
+const SingleArticle = ({ article }) => (
+  <div className="row article">
+    <div className="col-12">
+      <div className="row entire-article">
+        <div className="col-sm-1">
+          <img src={user} className="img-thumbnail author-thumbnail" alt="" />
+        </div>
+        <div className="col-sm-11 article-essentials">
+          <div className="row">
+            <div className="col-sm-5 author-name">
+              authorname
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-md-3 article-time">
+              {articleCreated(article.createdAt)}
+              &nbsp;&nbsp;|&nbsp;3 Min
+            </div>
+            <div className="col-sm-8">
+              <i className="fas fa-tags" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card">
+        <div className="row no-gutters">
+          <div className="col-auto">
+            <img src={articleImg} alt="an article" className="article-img" />
+          </div>
+          <div className="col-9">
+            <div className="card-block px-2">
+              <h5 className="card-title">{article.title}</h5>
+              <p className="card-text article-description">{article.description}</p>
+            </div>
+          </div>
+        </div>
+        <div className="card-footer w-100 text-muted">
+          <i className="far fa-thumbs-down icon" />
+          <i className="far fa-thumbs-up icon" />
+          <i className="far fa-star icon" />
+          <i className="far fa-bookmark icon" />
+          <i className="fas fa-share-alt icon" />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+SingleArticle.propTypes = {
+  article: PropTypes.object.isRequired,
+};
+
+export default SingleArticle;

src/components/dashboard/Dashboard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Articles from '../Articles/Articles';
+
+const Dashboard = () => (
+  <div>
+    <div className="dashboard-section">
+      <div className="inner-dash">
+        <div className="container">
+          <div className="row">
+            <div className="col-12 dash-intro lp-text text-center">
+              <p>
+                <span className="reading">Reading</span>
+                |
+                <span className="writing">Writing.</span>
+                <span className="intro-text">You are home</span>
+              </p>
+              <button className="btn btn-success dash-btn" type="button">
+                { "Let's Write" }
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="container-fluid article-list dash">
+      <Articles />
+    </div>
+  </div>
+);
+
+export default Dashboard;

src/components/landingPage/LandingPage.js

@@ -1,22 +1,5 @@
 import React from 'react';
-
-const DisplayArticles = () => (
-  <div className="card">
-    {/* <img class="card-img-top" src="..." alt="Card image cap"> */}
-    <div className="card-body">
-      <h5 className="card-title">Nisi cupidatat</h5>
-      <p className="card-text">
-        Nisi cupidatat magna dolor nulla.
-        Incididunt labore aliqua cillum mollit quis tempor do pariatur veniam adipisicing.
-        Commodo sit voluptate est laboris irure ex dolor fugiat esse ea mollit.
-        Pariatur elit cillum commodo occaecat tempor non mollit eu enim velit
-        <br />
-        . . .
-      </p>
-      <a href="#" className="btn ah-btn">View more</a>
-    </div>
-  </div>
-);
+import Articles from '../Articles/Articles';
 
 const LandingPage = () => (
   <React.Fragment>
@@ -34,12 +17,8 @@ const LandingPage = () => (
         </div>
       </div>
     </div>
-    <div className="container">
-      <div className="display-articles mx-auto row">
-        <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
-        <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
-        <div className="col-sm-12 col-4 col-md-6"><DisplayArticles /></div>
-      </div>
+    <div className="container-fluid article-list">
+      <Articles />
     </div>
   </React.Fragment>
 );

src/components/landingPage/Navbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import img from '../../assets/logo.png';
+import img from '../../assets/images/logo.png';
 
 const Navbar = () => (
   <nav className="navbar fixed-top navbar-expand-lg nav-bg">

src/components/login/Login.js

@@ -23,7 +23,7 @@ export class Login extends Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.isLoginSuccess === true) {
       const { history } = this.props;
-      history.push('/');
+      history.push('/dashboard');
     }
   }