Merge pull request #30 from andela/ft-update-article-169621164

#169621164 Enable user update their article
andela · Nov 11, 2019 · 36b9c76 · 36b9c76
2 parents e49d71b + 1a48ab8
commit 36b9c76
Show file tree

Hide file tree

Showing 14 changed files with 523 additions and 15 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -14,6 +14,7 @@ import Profile from '../feature/profile/view_profile/ViewProfileComponent';
 import UpdateProfile from '../feature/profile/update_profile/UpdateProfileComponent';
 import ForgotPassword from '../feature/Reset Password/forgot password/ForgotPasswordComponent';
 import ResetPassword from '../feature/Reset Password/reset password/ResetPasswordComponent';
+import UpdateArticle from '../feature/articles/updateArticle/UpdateArticleComponent';
 import '../../node_modules/font-awesome/css/font-awesome.min.css';
 
 toast.configure();
@@ -39,6 +40,7 @@ function App() {
             <Route path="/update-profile" component={UpdateProfile} />
             <Route path="/articles/:slug" component={GetSingleArticle} />
             <ProtectedRoutes path="/create" component={CreateArticle} />
+            <ProtectedRoutes path="/article/:slug/update" component={UpdateArticle} />
           </section>
         </Switch>
       </BrowserRouter>

diff --git a/src/app/common/articleMenu/ArticleDropdownMenu.js b/src/app/common/articleMenu/ArticleDropdownMenu.js
@@ -36,10 +36,13 @@ export class ArticleDropdownMenu extends Component {
   };
 
   render() {
+    const { slug } = this.props;
     return (
       <div className="main-wrapper">
         <ul className="dropdown__menu">
-          <li>Update</li>
+          <a href={`/article/${slug}/update`}>
+            <li>Update</li>
+          </a>
           <li onClick={this.checkUser}>Delete</li>
         </ul>
       </div>

diff --git a/src/app/common/articleMenu/ArticleDropdownMenu.scss b/src/app/common/articleMenu/ArticleDropdownMenu.scss
@@ -10,6 +10,11 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
+    a {
+      text-decoration: none;
+      color: black;
+      font-size: 14px;
+    }
 
     li {
       text-transform: capitalize;

diff --git a/src/feature/articles/constants.js b/src/feature/articles/constants.js
@@ -11,3 +11,5 @@ export const DISLIKE_ARTICLE_SUCCESS = 'DISLIKE_ARTICLE_SUCCESS';
 export const LOADING = 'LOADING';
 export const DELETE_ARTICLE_SUCCESS = 'DELETE_ARTICLE_SUCCESS';
 export const DELETE_ARTICLE_FAIL = 'DELETE_ARTICLE_FAIL';
+export const UPDATE_ARTICLE_SUCCESS = 'UPDATE_ARTICLE_SUCCESS';
+export const UPDATE_ARTICLE_FAIL = 'UPDATE_ARTICLE_FAIL';
diff --git a/src/feature/articles/createArticle/createArticleAction.js b/src/feature/articles/createArticle/createArticleAction.js
@@ -11,15 +11,12 @@ const createArticle = (
   { title, description, tags, category, body },
   props
 ) => async dispatch => {
-  let formData = {};
-  formData.tags = tags || '';
-  formData.category = category || '';
-
-  formData = {
-    title,
-    description,
-    body
-  };
+  const formData = {};
+  formData.tags = tags || ' ';
+  formData.category = category || ' ';
+  formData.title = title;
+  formData.description = description;
+  formData.body = body;
 
   try {
     const res = await axios.post(

diff --git a/src/feature/articles/getSingleArticle/GetSingleArticle.scss b/src/feature/articles/getSingleArticle/GetSingleArticle.scss
@@ -138,4 +138,4 @@
       text-align: center;
     }
   }
-}
+}
diff --git a/src/feature/articles/getSingleArticle/GetSingleArticleComponent.js b/src/feature/articles/getSingleArticle/GetSingleArticleComponent.js
@@ -112,7 +112,10 @@ export class ViewSingleArticle extends Component {
                   .fromNow()}
               </span>
               {'  '}
-              <span className="heading__munite">{readTime}.</span>
+              <span className="heading__munite">
+                {readTime}
+.
+              </span>
               <span>
                 <div className="heading__avarageRating">
                   <AverageRating avarageRatings={averageRatings} />

diff --git a/src/feature/articles/getSingleArticle/GetSingleArticleReducer.js b/src/feature/articles/getSingleArticle/GetSingleArticleReducer.js
@@ -6,12 +6,15 @@ import {
   GET_SINGLE_ARTICLE_SUCCESS,
   GET_SINGLE_ARTICLE_FAIL,
   DELETE_ARTICLE_SUCCESS,
-  DELETE_ARTICLE_FAIL
+  DELETE_ARTICLE_FAIL,
+  UPDATE_ARTICLE_SUCCESS,
+  UPDATE_ARTICLE_FAIL
 } from '../constants';
 
 export const initialState = {
   article: {},
-  deleted: false
+  deleted: false,
+  updated: false
 };
 
 export default (state = initialState, action) => {
@@ -29,12 +32,20 @@ export default (state = initialState, action) => {
         ...state,
         deleted: true
       };
+    case UPDATE_ARTICLE_SUCCESS:
+      return {
+        ...state,
+        ...payload,
+        updated: true
+      };
     case LIKE_ARTICLE_FAIL:
     case DISLIKE_ARTICLE_FAIL:
     case GET_SINGLE_ARTICLE_FAIL:
       return { ...state, ...payload };
     case DELETE_ARTICLE_FAIL:
       return { ...state, deleted: false };
+    case UPDATE_ARTICLE_FAIL:
+      return { ...state, ...payload, updated: false };
     default:
       return {
         ...state

diff --git a/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleComponent.test.js b/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleComponent.test.js
@@ -35,6 +35,19 @@ describe('Get Single Article Components tests', () => {
     expect(wrapper.find('img').length).toBe(3);
     expect(window.scrollTo).toBeCalledWith(0, 0);
   });
+  it('should test eventListerner on menu display', () => {
+    const wrapper = renderViewSingleArticle();
+    const button = wrapper.find('.heading__menu');
+    button.simulate('click', {});
+    document.event({
+      name: 'click',
+      target: {
+        parentNode: { classList: { contains: jest.fn(() => false) } },
+        classList: { contains: jest.fn(() => false) }
+      }
+    });
+    expect(wrapper).toHaveLength(1);
+  });
 });
 
 describe('Reload after Delete article success ', () => {

diff --git a/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleReducer.test.js b/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleReducer.test.js
@@ -2,7 +2,13 @@ import {
   GET_SINGLE_ARTICLE_SUCCESS,
   GET_SINGLE_ARTICLE_FAIL,
   DELETE_ARTICLE_SUCCESS,
-  DELETE_ARTICLE_FAIL
+  DELETE_ARTICLE_FAIL,
+  UPDATE_ARTICLE_SUCCESS,
+  UPDATE_ARTICLE_FAIL,
+  DISLIKE_ARTICLE_SUCCESS,
+  LIKE_ARTICLE_SUCCESS,
+  DISLIKE_ARTICLE_FAIL,
+  LIKE_ARTICLE_FAIL
 } from '../../constants';
 import GetSingleArticleReducer, {
   initialState
@@ -20,6 +26,35 @@ describe('Get Single Article reducer', () => {
     });
     expect(reducer.payload).toEqual(payload);
   });
+  it('Should test LIKE_ARTICLE_SUCCESS', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: LIKE_ARTICLE_SUCCESS,
+      payload: {
+        payload
+      }
+    });
+    expect(reducer.payload).toEqual(payload);
+  });
+  it('Should test DISLIKE_ARTICLE_SUCCESS', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: DISLIKE_ARTICLE_SUCCESS,
+      payload: {
+        payload
+      }
+    });
+    expect(reducer.payload).toEqual(payload);
+  });
+
+  it('Should test UPDATE_ARTICLE_SUCCESS', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: UPDATE_ARTICLE_SUCCESS,
+      payload: {
+        payload,
+        updated: true
+      }
+    });
+    expect(reducer.payload).toEqual(payload);
+  });
 
   it('Should test GET_SINGLE_ARTICLE_FAIL', () => {
     const reducer = GetSingleArticleReducer(initialState, {
@@ -30,6 +65,42 @@ describe('Get Single Article reducer', () => {
     });
     expect(reducer.error).toEqual('No articles found at the moment');
   });
+  it('Should test UPDATE_ARTICLE_FAIL', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: UPDATE_ARTICLE_FAIL,
+      payload: {
+        error: 'could not update the article'
+      }
+    });
+    expect(reducer.error).toEqual('could not update the article');
+  });
+  it('Should test UPDATE_ARTICLE_FAIL', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: UPDATE_ARTICLE_FAIL,
+      payload: {
+        error: 'could not update the article'
+      }
+    });
+    expect(reducer.error).toEqual('could not update the article');
+  });
+  it('Should test LIKE_ARTICLE_FAIL', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: LIKE_ARTICLE_FAIL,
+      payload: {
+        error: 'could not like the article'
+      }
+    });
+    expect(reducer.error).toEqual('could not like the article');
+  });
+  it('Should test DISLIKE_ARTICLE_FAIL', () => {
+    const reducer = GetSingleArticleReducer(initialState, {
+      type: DISLIKE_ARTICLE_FAIL,
+      payload: {
+        error: 'could not dislike the article'
+      }
+    });
+    expect(reducer.error).toEqual('could not dislike the article');
+  });
 });
 
 describe('Delete Article tests', () => {

diff --git a/src/feature/articles/updateArticle/UpdateArticleAction.js b/src/feature/articles/updateArticle/UpdateArticleAction.js
@@ -0,0 +1,41 @@
+import { config } from 'dotenv';
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { UPDATE_ARTICLE_SUCCESS, UPDATE_ARTICLE_FAIL } from '../constants';
+import { BACKEND_URL } from '../../../app/common/config/appConfig';
+import setAxiosConfig from '../../../app/common/config/axiosConfig';
+
+config();
+
+const updateArticle = (
+  {
+    title, description, tags, category, body
+  },
+  slug
+) => async dispatch => {
+  const formData = {};
+  formData.tags = tags || ' ';
+  formData.category = category || ' ';
+  formData.title = title;
+  formData.description = description;
+  formData.body = body;
+
+  try {
+    const res = await axios.put(
+      `${BACKEND_URL}/articles/${slug}`,
+      formData,
+      setAxiosConfig()
+    );
+    dispatch({
+      type: UPDATE_ARTICLE_SUCCESS,
+      payload: res.data
+    });
+  } catch (err) {
+    const error = (await err.response)
+      ? err.response.data.error
+      : 'SERVER ERROR!  Please contact the administartor';
+    dispatch({ type: UPDATE_ARTICLE_FAIL, payload: error });
+    toast.error(error, { position: toast.POSITION.TOP_CENTER });
+  }
+};
+export default updateArticle;