164047041 Feature (Report Article): Users should be able to report an…

… article

- Users should report an article as long as they are not the authors
- A user cannot report an article twice.
- Write tests

[Finishes #164047041]

src/actions/postArticles.js

@@ -13,7 +13,7 @@ export const createArticle = postData => async (dispatch) => {
     .catch((error) => {
       dispatch({
         type: ACTION_FAILED,
-        payload: error,
+        payload: error.response.data,
       });
     });
 };
@@ -28,7 +28,7 @@ export const fetchArticle = slug => async (dispatch) => {
       console.log(error.response);
       dispatch({
         type: ACTION_FAILED,
-        payload: error.response.data.message,
+        payload: error.response.data,
       });
     });
 };

src/actions/reportArticle.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { REPORT_ARTICLE, ACTION_FAILED } from './types';
+import axiosHeader from '../axios_config';
+
+const apiURL2 = 'https://aholympian.herokuapp.com/api/';
+
+export const reportArticle = (slug, postData) => async (dispatch) => {
+  await axios
+    .post(`${apiURL2}report/${slug}/`, postData, axiosHeader)
+    .then((result) => {
+      dispatch({
+        type: REPORT_ARTICLE,
+        payload: result.data,
+      });
+    })
+    .catch((error) => {
+      console.log(JSON.stringify(error));
+      dispatch({
+        type: ACTION_FAILED,
+        payload: error.response.data,
+      });
+    });
+};

src/actions/tests/postactions.test.js

@@ -2,7 +2,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import mockAxios from 'axios';
 
-import { NEW_ARTICLE, FETCH_ARTICLE } from '../types';
+import { NEW_ARTICLE, FETCH_ARTICLE, ACTION_FAILED } from '../types';
 import { createArticle, fetchArticle } from '../postArticles';
 
 jest.mock('axios');
@@ -26,6 +26,34 @@ describe('testing new article', () => {
       expect(store.getActions()).toEqual(expectedAction);
     });
   });
+  it("dispatches NEW_ARTICLE action and returns an error", async () => {
+    const testStore = configureMockStore([thunk]);
+    const store = testStore({});
+    mockAxios.post.mockImplementationOnce(() =>
+      Promise.reject({
+        error: "Something bad happened"
+      })
+    );
+
+    try { 
+      await store.dispatch(createArticle());
+    } catch {
+      const actions = store.getActions();
+
+      expect.assertions(1);
+
+      const expectedAction = [
+        {
+          type: NEW_ARTICLE,
+          payload: {},
+        },
+      ];
+
+      return store.dispatch(createArticle({})).then(() => {
+        expect(store.getActions()).toEqual(expectedAction);
+      });
+    }
+  });
 
   it('tests fetching a single article', () => {
     const testStore = configureMockStore([thunk]);
@@ -44,4 +72,32 @@ describe('testing new article', () => {
       expect(store.getActions()).toEqual(expectedAction);
     });
   });
+  it("dispatches FETCH_ARTICLE action and returns an error", async () => {
+    const testStore = configureMockStore([thunk]);
+    const store = testStore({});
+    mockAxios.get.mockImplementationOnce(() =>
+      Promise.reject({
+        error: "Something bad happened"
+      })
+    );
+
+    try { 
+      await store.dispatch(fetchArticle());
+    } catch {
+      const actions = store.getActions();
+
+      expect.assertions(1);
+
+      const expectedAction = [
+        {
+          type: FETCH_ARTICLE,
+          payload: undefined,
+        },
+      ];
+
+      return store.dispatch(fetchArticle({})).then(() => {
+        expect(store.getActions()).toEqual(expectedAction);
+      });
+    }
+  });
 });

src/actions/tests/reportarticle.test.js

@@ -0,0 +1,56 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import mockAxios from 'axios';
+
+import { REPORT_ARTICLE, ACTION_FAILED } from '../types';
+import { reportArticle } from '../reportArticle';
+
+
+describe('testing report article', () => {
+  it('tests reporting an article', () => {
+    const testStore = configureMockStore([thunk]);
+    const store = testStore({});
+    mockAxios.post.mockResolvedValue({
+      data: {},
+    });
+
+    const expectedAction = [
+      {
+        type: REPORT_ARTICLE,
+        payload: {},
+      },
+    ];
+
+    return store.dispatch(reportArticle({})).then(() => {
+      expect(store.getActions()).toEqual(expectedAction);
+    });
+  });
+  it("dispatches REPORT_ARTICLE action and returns an error", async () => {
+    const testStore = configureMockStore([thunk]);
+    const store = testStore({});
+    mockAxios.post.mockImplementationOnce(() =>
+      Promise.reject({
+        error: "Something bad happened"
+      })
+    );
+
+    try { 
+      await store.dispatch(reportArticle());
+    } catch {
+      const actions = store.getActions();
+
+      expect.assertions(1);
+
+      const expectedAction = [
+        {
+          type: REPORT_ARTICLE,
+          payload: {},
+        },
+      ];
+
+      return store.dispatch(reportArticle({})).then(() => {
+        expect(store.getActions()).toEqual(expectedAction);
+      });
+    }
+  });
+});

src/actions/types.js

@@ -14,3 +14,4 @@ export const ACTION_FAILED = 'ACTION_FAILED';
 export const LIKE_REQUEST = 'LIKE_REQUEST';
 export const LIKE_SUCCESSFUL = 'LIKE_SUCCESSFUL';
 export const LIKE_FAILURE = 'LIKE_FAILURE';
+export const REPORT_ARTICLE = 'REPORT_ARTICLE';

src/components/Articles/Articles.scss

@@ -37,3 +37,16 @@
 
 .demo-editor {
   font-size: 16px !important; }
+
+.modal-content {
+  background-color: #f7f7f7 !important;
+  text-align: centered !important;
+}
+
+.modal-open {
+  color: black !important;
+  .custom-control-label {
+    color: black !important;
+    font-size: inherit;
+  }
+}