feature(edit articles): users can edit articles

- Enable users to edit articles they authored [Delivers #161776762]
andela · Nov 20, 2018 · 265c750 · 265c750
1 parent 77fa460
commit 265c750
Show file tree

Hide file tree

Showing 15 changed files with 707 additions and 154 deletions.
diff --git a/src/actions/actionCreators.js b/src/actions/actionCreators.js
@@ -14,6 +14,9 @@ import {
   GET_ALL_ARTICLES_INITIATED,
   LIKE_DISLIKE_SUCCESS,
   LIKE_DISLIKE_ERROR,
+  EDIT_ARTICLE_SUCCESS,
+  EDIT_ARTICLE_ERROR,
+  EDIT_ARTICLE_INITIATED,
 } from './types';
 
 export const socialLoginInitiated = () => ({
@@ -81,3 +84,15 @@ export const likeDislikeError = payload => ({
   type: LIKE_DISLIKE_ERROR,
   payload,
 });
+export const editArticleSuccess = payload => ({
+  type: EDIT_ARTICLE_SUCCESS,
+  payload,
+});
+export const editArticleError = payload => ({
+  type: EDIT_ARTICLE_ERROR,
+  payload,
+});
+export const editArticleInititated = payload => ({
+  type: EDIT_ARTICLE_INITIATED,
+  payload,
+});
diff --git a/src/actions/articleActions.js b/src/actions/articleActions.js
@@ -2,6 +2,7 @@ import { toast } from 'react-toastify';
 import axiosInstance from '../config/axiosInstance';
 import {
   getAllArticles,
+  getArticlesInitiated,
   createArticleSuccess,
   createArticleError,
   createArticleInititated,
@@ -11,9 +12,11 @@ import {
   logoutUser,
   getSpecificArticle,
   getUserArticles,
-  getArticlesInitiated,
   likeDislikeSuccess,
   likeDislikeError,
+  editArticleInititated,
+  editArticleSuccess,
+  editArticleError,
 } from './actionCreators';
 
 export const postArticle = postData => dispatch => {
@@ -62,16 +65,15 @@ export const fetchComments = article => dispatch => {
 
 export const fetchArticles = () => dispatch => {
   dispatch(getArticlesInitiated(true));
-  return axiosInstance
+  axiosInstance
     .get('/api/article/')
     .then((response) => {
       dispatch(getAllArticles(response.data.article));
     });
 };
 
 export const fetchSpecificArticle = slug => dispatch => {
-  dispatch(getArticlesInitiated(true));
-  return axiosInstance
+  axiosInstance
     .get(`/api/articles/${slug}`)
     .then((response) => {
       dispatch(getSpecificArticle(response.data));
@@ -113,3 +115,28 @@ export const likeDislike = (payload, slug) => dispatch => {
       return toast.error(error.response.data.detail, { autoClose: false, hideProgressBar: true });
     });
 };
+
+export const updateArticle = (slug, newData) => dispatch => {
+  toast.dismiss();
+  dispatch(editArticleInititated(true));
+  axiosInstance
+    .put(`/api/articles/${slug}/`, newData)
+    .then(response => {
+      dispatch(editArticleSuccess(true));
+      toast.success(
+        response.data.message,
+        { autoClose: 3500, hideProgressBar: true },
+      );
+    })
+    .catch((error) => {
+      let errorMessage = '';
+      if (error.response.status === 403) {
+        errorMessage = 'Re-login and try again';
+      }
+      if (error.response.status === 404) {
+        errorMessage = 'Please enter valid text';
+      }
+      dispatch(editArticleError(errorMessage));
+      toast.error(errorMessage, { autoClose: false, hideProgressBar: true });
+    });
+};
diff --git a/src/actions/types.js b/src/actions/types.js
@@ -6,17 +6,23 @@ export const SOCIAL_LOGIN_INITIATED = 'SOCIAL_LOGIN_INITIATED';
 export const SOCIAL_LOGIN_SUCCESS = 'SOCIAL_LOGIN_SUCCESS';
 export const GET_PROFILE_PAYLOAD = 'GET_PROFILE_PAYLOAD';
 export const GET_PROFILE_INITIATED = 'GET_PROFILE_INITIATED';
+export const LOGOUT_USER = 'LOGOUT_USER';
 
 export const CREATE_ARTICLE_SUCCESS = 'CREATE_ARTICLE_SUCCESS';
 export const CREATE_ARTICLE_INITIATED = 'CREATE_ARTICLE_INITIATED';
 export const CREATE_ARTICLE_ERROR = 'CREATE_ARTICLE_ERROR';
-export const LOGOUT_USER = 'LOGOUT_USER';
+
 export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS';
 export const GET_COMMENT_INITIATED = 'GET_COMMENT_INITIATED';
 export const GET_COMMENTS_SUCCESS = 'GET_COMMENTS_SUCCESS';
+
 export const GET_SPECIFIC_ARTICLE_SUCCESS = 'GET_SPECIFIC_ARTICLE_SUCCESS';
 export const GET_ALL_ARTICLES_SUCCESS = 'GET_ALL_ARTICLES_SUCCESS';
 export const GET_USER_ARTICLES_SUCCESS = 'GET_USER_ARTICLES_SUCCESS';
 export const GET_ALL_ARTICLES_INITIATED = 'GET_ALL_ARTICLES_INITIATED';
 export const LIKE_DISLIKE_SUCCESS = 'LIKE_DISLIKE_SUCCESS';
 export const LIKE_DISLIKE_ERROR = 'LIKE_DISLIKE_ERROR';
+
+export const EDIT_ARTICLE_SUCCESS = 'EDIT_ARTICLE_SUCCESS';
+export const EDIT_ARTICLE_ERROR = 'EDIT_ARTICLE_ERROR';
+export const EDIT_ARTICLE_INITIATED = 'EDIT_ARTICLE_INITIATED';
diff --git a/src/assets/App.css b/src/assets/App.css
@@ -334,7 +334,7 @@ header.uvp {
   width: 100%;
 }
 .quill-height{
-  height: 350px;
+  height: 300px;
 }
 .clear-box{
   border: none;
@@ -344,12 +344,6 @@ header.uvp {
   outline: none;
   border-bottom: 2px solid #ece9e9;
 }
-.very-big-font{
-  font-size: 40px;
-}
-.bigger-font{
-  font-size: 20px;
-}
 .quill-height-comments {
   height: 80px;
 }
@@ -399,6 +393,14 @@ header.uvp {
   word-spacing: 5px;
   margin-top: 20px;
 }
+.article-view-title{
+  background-color: #dcdcdc36;
+  padding: 20px;
+  line-height: 24px;
+  word-spacing: 5px;
+  margin-top: 20px;
+  font-size: larger;
+}
 .btn-follow{
   padding: 5px;
   border: 2px solid rgb(141, 189, 67);
@@ -414,6 +416,7 @@ header.uvp {
 }
 .btn-display{
   display: block;
+  float: right;
 }
 .btn-no-display{
   display: none;

diff --git a/src/components/Articles/NewArticle.js b/src/components/Articles/NewArticle.js
@@ -1,30 +1,11 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import Loader from 'react-loader';
 import PropTypes from 'prop-types';
-import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { postArticle } from '../../actions/articleActions';
+import NewArticleForm from './NewArticleForm';
 
 export class NewArticle extends Component {
-  editorModules = {
-    toolbar: [
-      ['bold', 'italic', 'underline', 'strike'],
-      ['blockquote', 'code-block'],
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      [{ script: 'sub' }, { script: 'super' }],
-      [{ indent: '-1' }, { indent: '+1' }],
-      [{ direction: 'rtl' }],
-      [{ size: ['small', false, 'large', 'huge'] }],
-      [{ header: [1, 2, 3, 4, 5, 6] }],
-      [{ color: [] }, { background: [] }],
-      [{ font: [] }],
-      [{ align: [] }],
-      ['link', 'image'],
-      ['clean'],
-    ],
-  };
-
   constructor(props) {
     super(props);
     this.state = {
@@ -76,77 +57,16 @@ export class NewArticle extends Component {
     const { title, description, body } = this.state;
     const { loading } = this.props;
     return (
-      <div
-        className="container-fluid ah-container"
-        style={{ paddingTop: '50px' }}
-      >
-        <div className="row">
-          <Loader loaded={!loading}>
-            <div className="col-12">
-              <form id="add-article-form" onSubmit={this.handleSubmit}>
-                <div className="container col-sm-12 col-md-8">
-                  <div className="form-group mt-2">
-                    <div className="input-group mb-2">
-                      <input
-                        type="text"
-                        name="title"
-                        className="clear-box very-big-font"
-                        placeholder="Title..."
-                        id="title"
-                        value={title}
-                        onChange={this.handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="form-group">
-                    <div className="input-group mb-2">
-                      <input
-                        type="text"
-                        name="description"
-                        className="clear-box bigger-font"
-                        placeholder="Description..."
-                        id="description"
-                        value={description}
-                        onChange={this.handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="form-group">
-                    <div className="text-editor">
-                      <div>
-                        <ReactQuill
-                          id="text-editor"
-                          modules={this.editorModules}
-                          theme="snow"
-                          className="quill-height"
-                          value={body}
-                          onChange={this.handleEditorChange}
-                          required
-                        />
-                      </div>
-                      <div className="m-t-10">
-                        <button type="submit" className="btn ah-btn m-r-10">
-                          Save
-                        </button>
-                        <button
-                          type="button"
-                          id="clear-button"
-                          className="btn btn-outline-warning m-r-10"
-                          onClick={this.resetForm}
-                        >
-                          Clear
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </Loader>
-        </div>
-      </div>
+      <NewArticleForm
+        handleChange={this.handleChange}
+        handleEditorChange={this.handleEditorChange}
+        handleSubmit={this.handleSubmit}
+        resetForm={this.resetForm}
+        title={title}
+        description={description}
+        body={body}
+        loading={loading}
+      />
     );
   }
 }
@@ -163,7 +83,6 @@ NewArticle.defaultProps = {
 };
 
 const mapStateToProps = state => ({
-  articlesPayload: state.article.articlesPayload,
   createArticleSuccess: state.article.createArticleSuccess,
   loading: state.article.loading,
 });