+
+ );
+ }
+}
+
+DraftArticles.propTypes = {
+ getAuthUserDraftArticles: PropTypes.func.isRequired,
+ auth: PropTypes.shape({ user: {} }).isRequired,
+ userProfile: PropTypes.shape({ draft: [] }).isRequired,
+};
+
+const mapStatetoProps = ({ userProfile, auth }) => ({
+ userProfile,
+ auth,
+});
+
+export default connect(mapStatetoProps,
+ {
+ getAuthUserDraftArticles,
+ })(DraftArticles);
diff --git a/src/components/Dashboard/EditProfileForm.jsx b/src/components/Dashboard/EditProfileForm.jsx
new file mode 100644
index 0000000..6055e3b
--- /dev/null
+++ b/src/components/Dashboard/EditProfileForm.jsx
@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { editAuthUserProfile } from '../../actions/userActions';
+/**
+ * @class EditProfileForm
+ * @extends {Component}
+ */
+export class EditProfileForm extends Component {
+ state = {
+ firstName: '',
+ lastName: '',
+ userName: '',
+ bio: '',
+ avatar: null,
+ };
+
+ componentDidMount() {
+ this.setState({
+ ...this.props.userdetails,
+ });
+ }
+
+ onImageChange = ({ target }) => {
+ this.setState(state => ({
+ ...state,
+ avatar: target.files[0],
+ }));
+ }
+
+ onInputChange = (event) => {
+ this.setState({
+ [event.target.name]: event.target.value,
+ });
+ }
+
+ onButtonSubmit = (event) => {
+ event.preventDefault();
+ const formData = new FormData();
+ Object.keys(this.state).forEach(key => formData.append([key], this.state[key]));
+
+ const {
+ editAuthUserProfile: updateProfile,
+ auth: { user: { id: userId } },
+ } = this.props;
+ updateProfile(formData, userId);
+ }
+
+
+ render() {
+ const { userProfile: { isLoading } } = this.props;
+
+ return (
+
+
+
+
+ { articles.length === 0 ? (
+
+
+ No Drafted Articles
+
+ )
+ : articles.map(article => (
+
+
+ 
+
+
+
+ ))
+ }
+
+ {`${article.title.substring(0, 20)}`}
+
+ {articles.length !== 0 && (
+
+
+
+
+ );
+ }
+}
+
+EditProfileForm.propTypes = {
+ editAuthUserProfile: PropTypes.func.isRequired,
+ auth: PropTypes.shape({ user: {} }).isRequired,
+ userdetails: PropTypes.shape().isRequired,
+ userProfile: PropTypes.shape({ user: {}, isLoading: '' }).isRequired,
+};
+
+const mapStatetoProps = ({ auth, userProfile }) => ({
+ auth,
+ userProfile,
+});
+
+export default connect(mapStatetoProps, { editAuthUserProfile })(EditProfileForm);
diff --git a/src/components/Dashboard/PublishedArticles.jsx b/src/components/Dashboard/PublishedArticles.jsx
new file mode 100644
index 0000000..f0bd509
--- /dev/null
+++ b/src/components/Dashboard/PublishedArticles.jsx
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import Pagination from '../Paginate';
+import { getAuthUserPublishedArticles } from '../../actions/userActions';
+
+const defaultArticle = 'https://i1.wp.com/www.africanbusinesscentral.com/wp-content/uploads/2018/07/Andela.jpeg';
+
+export class PublishedArticles extends Component {
+ state = {}
+
+ componentDidMount() {
+ const {
+ auth: { user: { id: userId } },
+ } = this.props;
+ this.props.getAuthUserPublishedArticles(userId);
+ }
+
+ paginate = (data) => {
+ const currentPage = data.selected;
+ const offset = currentPage + 1;
+ const { auth: { user: { id: userId } } } = this.props;
+ this.props.getAuthUserPublishedArticles(userId, offset);
+ };
+
+ render() {
+ const { userProfile: { published } } = this.props;
+ const { articles = [] } = published;
+
+
+ return (
+
+
+ );
+ }
+}
+
+PublishedArticles.propTypes = {
+ getAuthUserPublishedArticles: PropTypes.func.isRequired,
+ auth: PropTypes.shape({ user: {} }).isRequired,
+ userProfile: PropTypes.shape({ published: [] }).isRequired,
+};
+
+const mapStatetoProps = ({ userProfile, auth }) => ({
+ userProfile,
+ auth,
+});
+
+export default connect(mapStatetoProps,
+ {
+ getAuthUserPublishedArticles,
+ })(PublishedArticles);
diff --git a/src/components/Dashboard/UserArticles.jsx b/src/components/Dashboard/UserArticles.jsx
new file mode 100644
index 0000000..b9b3d94
--- /dev/null
+++ b/src/components/Dashboard/UserArticles.jsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import DraftArticles from './DraftArticles';
+import PublishedArticles from './PublishedArticles';
+
+
+export const UserArticles = () => {
+ const [showPublished, setShowPublished] = useState(true);
+
+ return (
+
+
+
+
+
+ { articles.length === 0 ? (
+
+
+ No published Articles
+
+ )
+ : articles.map(article => (
+
+
+
+
+
+ ))
+ }
+ + {`${article.title.substring(0, 20)}`} +
+
+
+ {articles.length !== 0 && (
+
+
+
+ );
+};
+
+export default UserArticles;
diff --git a/src/components/Dashboard/UserDashboard.scss b/src/components/Dashboard/UserDashboard.scss
new file mode 100644
index 0000000..f3ffa2d
--- /dev/null
+++ b/src/components/Dashboard/UserDashboard.scss
@@ -0,0 +1,123 @@
+body {
+ background-color: #D9D7D7;
+ min-height: 100vh;
+ width: 100%;
+}
+
+.profilePix {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+}
+
+.imgConatiner {
+ position: relative;
+}
+.coco {
+ margin-top: 20px;
+ }
+.editText {
+ position: absolute;
+ top: 50%;
+ left: 5%;
+ transform: translate(-5%, -50%);
+ visibility: hidden;
+ opacity: 0;
+ transition: all .4s ease-in-out;
+ background: white;
+ padding: 10px;
+ cursor: pointer;
+}
+.center-toggle {
+ text-align: center;
+}
+.articlePublished {
+ background: none;
+ border: none;
+}
+.articleDraft {
+ background: none;
+ border: none;
+ padding-left: 10px;
+}
+
+.articleDraft:focus {
+ outline: none;
+}
+.imgConatiner:hover .editText {
+ left: 50%;
+ visibility: visible;
+ opacity: 1;
+ transform: translate(-50%, -50%);
+
+}
+
+.articlePublished:focus {
+ border: none;
+ outline: none;
+}
+
+.margin-left-15 {
+ margin-left: 15px !important;
+}
+.margin-right-15 {
+ margin-right: 15px !important;
+}
+.top-left {
+ align-self: center;
+}
+.tops {
+ justify-content: space-between;
+ margin-top: 15px;
+}
+.centering {
+ margin: 0 auto;
+
+}
+.padding-top-10 {
+ padding-top: 10px;
+}
+.articleImages {
+ height: 170px !important;
+ width: 100%
+}
+.margin {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ text-align: center;
+}
+.fonts{
+ font-weight: 300;
+ font-size: 2rem;
+ line-height: 3rem;
+}
+
+.overview{
+ display: grid;
+ grid-template-columns: auto 30%;
+}
+
+.overview > button{
+ padding: 5px;
+ border: 3px solid #2E99D6;
+ justify-self: center;
+ align-self: center;
+ background: #ffffff;
+ color: #2E99D6;
+}
+.edit-form {
+ font-size: 1rem;
+ margin: 0px auto;
+ background: rgba(46,153,214,0.9) !important;
+ color: #fff !important;
+ padding: 35px !important;
+ border-radius: 10px !important;
+ box-sizing: border-box !important;
+}
+.modali-body {
+ max-height: 70vh;
+ overflow: auto;
+}
+.active {
+ border-bottom: 2px #2E99D6 solid !important;
+}
diff --git a/src/components/Dashboard/UserProfile.jsx b/src/components/Dashboard/UserProfile.jsx
new file mode 100644
index 0000000..e912f3f
--- /dev/null
+++ b/src/components/Dashboard/UserProfile.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Modali, { useModali } from 'modali';
+import PropTypes from 'prop-types';
+
+
+import EditProfileForm from './EditProfileForm';
+
+const avatar = 'https://res.cloudinary.com/phembarl/image/upload/v1567166355/avartar3_clrio9.png';
+
+export const UserProfile = (props) => {
+ const [userProfileModal, toggleUserProfileModal] = useModali({
+ animated: true,
+ title: 'Edit Profile',
+ });
+
+ const {
+ userProfile: {
+ profile: {
+ firstName, lastName, userName, imageUrl, bio,
+ },
+ followers,
+ followees,
+ articles,
+ },
+ } = props;
+
+ return (
+
+
+
+
+
+
+ {' '}
+ |
+
+
+
+
+ { showPublished ?
+
+ );
+};
+
+
+UserProfile.propTypes = {
+ editAuthUserProfile: PropTypes.func.isRequired,
+ auth: PropTypes.shape({ user: {} }).isRequired,
+ userProfile: PropTypes.shape(
+ {
+ profile: {},
+ followers: {},
+ followees: {},
+ articles: {},
+ },
+ ).isRequired,
+};
+
+const mapStatetoProps = ({ auth, userProfile }) => ({
+ auth,
+ userProfile,
+});
+
+export default connect(mapStatetoProps)(UserProfile);
diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx
new file mode 100644
index 0000000..def7ae1
--- /dev/null
+++ b/src/components/Dashboard/index.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import './UserDashboard.scss';
+import UserProfile from './UserProfile';
+import UserArticles from './UserArticles';
+import {
+ authUserProfile,
+ getAuthUserFollowers,
+ getAuthUserFollowee,
+ getAuthUserArticles,
+} from '../../actions/userActions';
+
+
+/**
+ *
+ *
+ * UserDashboard
+ * @extends {Component}
+ */
+export const UserDashboard = (props) => {
+ if (props.auth !== null) {
+ const { auth: { user: { userName, id: userId } } } = props;
+ props.authUserProfile(userId);
+ props.getAuthUserFollowers(userId);
+ props.getAuthUserFollowee(userId);
+ props.getAuthUserArticles(userName);
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ {`${firstName} ${lastName}`}
+{`@${userName}`}
+ +
+
+
+
+ followers
+
+ {followers.length}
+
+ following
+
+ {followees.length}
+
+ articles
+
+ + {typeof articles === 'string' ? 'N/A' : articles.articleCount} +
+
+
+ );
+};
+
+UserDashboard.propTypes = {
+ authUserProfile: PropTypes.func.isRequired,
+ getAuthUserFollowers: PropTypes.func.isRequired,
+ getAuthUserFollowee: PropTypes.func.isRequired,
+ getAuthUserArticles: PropTypes.func.isRequired,
+ auth: PropTypes.shape().isRequired,
+};
+
+const mapStatetoProps = ({ auth }) => ({
+ auth,
+});
+
+
+export default connect(mapStatetoProps, {
+ authUserProfile,
+ getAuthUserFollowers,
+ getAuthUserFollowee,
+ getAuthUserArticles,
+})(UserDashboard);
diff --git a/src/components/NavigationBar/index.jsx b/src/components/NavigationBar/index.jsx
index 5f29444..c2e9c9f 100644
--- a/src/components/NavigationBar/index.jsx
+++ b/src/components/NavigationBar/index.jsx
@@ -204,7 +204,7 @@ export class Navbar extends React.Component {
>
-
- );
-};
-
-export default Dashboard;
+export default Profile;
diff --git a/webpack.config.js b/webpack.config.js
index 9c31e43..84b4f43 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -41,6 +41,10 @@ module.exports = {
test: /\.(png|jpe?g|gif|svg)$/i,
loader: ['url-loader?limit=8000&name=images/[name].[ext]', 'file-loader'],
},
+ {
+ test: /\.svg$/,
+ loader: 'svg-inline-loader',
+ },
],
},
plugins: [
Welcome To Authors Haven Login Page.
- { - isVerified === false && ( -- Please verify your account. A verification link has been sent to your email -
- ) - } +const Profile = () => ( +
+ {
+ isVerified === false && (
+
+);
- + Please verify your account. A verification link has been sent to your email +
+ ) + } +-
-
- - CLICK HERE TO GO BACK TO THE HOMEPAGE - -
-
-
- - Click to view another Profile - -