Merge 0b2254f into 3bd0077

src/__tests__/__actions__/following.test.js

@@ -0,0 +1,72 @@
+import moxios from "moxios";
+import thunk from "redux-thunk";
+import configureMockStore from "redux-mock-store";
+import axios from "../../utils/axios";
+
+import { followUser } from "../../redux/actions/followingActions";
+import {
+  FOLLOWING_FAILED,
+  FOLLOWING_SUCCESS,
+  WAITING_RESPONSE
+} from "../../redux/actionTypes";
+
+const mockStore = configureMockStore([thunk]);
+let store;
+
+describe("test the notification actions", () => {
+  beforeEach(() => {
+    moxios.install(axios);
+    store = mockStore({});
+  });
+
+  afterEach(() => {
+    moxios.uninstall(axios);
+  });
+
+  describe("test fetch notifications", () => {
+    test("should dispatch the success action after successfully following the user", () => {
+      store = mockStore({});
+      const expectedActions = [
+        { type: WAITING_RESPONSE },
+        { type: FOLLOWING_SUCCESS, payload: true }
+      ];
+      moxios.stubRequest(`${process.env.API_BASE_URL}/profiles/claude/follow`, {
+        status: 201,
+        response: { message: "Follow successful" }
+      });
+      return store.dispatch(followUser("claude")).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    test("should dispatch the success action after successfully unfollowing the user", () => {
+      store = mockStore({});
+      const expectedActions = [
+        { type: WAITING_RESPONSE },
+        { type: FOLLOWING_SUCCESS, payload: false }
+      ];
+      moxios.stubRequest(`${process.env.API_BASE_URL}/profiles/claude/follow`, {
+        status: 202,
+        response: { message: "You have unfollowed this author" }
+      });
+      return store.dispatch(followUser("claude")).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+
+    test("should dispatch the failed action if there was a problem while following the user", () => {
+      store = mockStore({});
+      const expectedActions = [
+        { type: WAITING_RESPONSE },
+        { type: FOLLOWING_FAILED, payload: false }
+      ];
+      moxios.stubRequest(`${process.env.API_BASE_URL}/profiles/claude/follow`, {
+        status: 500,
+        response: { message: "Error while following the user" }
+      });
+      return store.dispatch(followUser("claude")).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+    });
+  });
+});

src/__tests__/__mocks__/testData.js

@@ -29,6 +29,12 @@ export const article3 = {
   description: "Hello world"
 };
 export const props1 = {
+  following: {
+    status: true,
+    isFetching: false
+  },
+  followAuthor: jest.fn(),
+  followUser: jest.fn(),
   history: {
     push: jest.fn()
   },
@@ -73,6 +79,10 @@ export const props1 = {
   deleteOneArticle: jest.fn()
 };
 export const props2 = {
+  following: {
+    status: true,
+    isFetching: false
+  },
   history: {
     push: jest.fn()
   },
@@ -116,6 +126,10 @@ export const props2 = {
   deleteOneArticle: jest.fn()
 };
 export const props3 = {
+  following: {
+    status: true,
+    isFetching: false
+  },
   history: {
     push: jest.fn()
   },
@@ -133,6 +147,10 @@ export const props3 = {
   deleteOneArticle: jest.fn(() => "hello world")
 };
 export const props4 = {
+  following: {
+    status: true,
+    isFetching: false
+  },
   history: {
     push: jest.fn()
   },
@@ -150,6 +168,10 @@ export const props4 = {
   deleteOneArticle: jest.fn()
 };
 export const props5 = {
+  following: {
+    status: true,
+    isFetching: false
+  },
   history: {
     push: jest.fn()
   },

src/__tests__/__reducers__/following.test.js

@@ -0,0 +1,48 @@
+import followingReducer, {
+  initialState
+} from "../../redux/reducers/followingReducer";
+import {
+  FOLLOWING_FAILED,
+  FOLLOWING_SUCCESS,
+  WAITING_RESPONSE
+} from "../../redux/actionTypes";
+
+describe("Following reducers", () => {
+  it("should return initial state", () => {
+    expect(followingReducer(undefined, {})).toEqual(initialState);
+  });
+
+  it("should handle FOLLOWING", () => {
+    expect(followingReducer(initialState, { type: WAITING_RESPONSE })).toEqual({
+      ...initialState,
+      isFetching: true
+    });
+  });
+
+  it("should handle FOLLOWING SUCCESS, if followed, the status must be true", () => {
+    expect(
+      followingReducer(initialState, {
+        type: FOLLOWING_SUCCESS,
+        payload: true
+      })
+    ).toEqual({ ...initialState, status: true });
+  });
+
+  it("should handle FOLLOWING SUCCESS, if unfollowed, the status must be false", () => {
+    expect(
+      followingReducer(initialState, {
+        type: FOLLOWING_SUCCESS,
+        payload: false
+      })
+    ).toEqual({ ...initialState, status: false });
+  });
+
+  it("should handle WAITING_RESPONSE FAILED", () => {
+    expect(
+      followingReducer(initialState, {
+        type: FOLLOWING_FAILED,
+        payload: false
+      })
+    ).toEqual({ ...initialState, status: false });
+  });
+});

src/__tests__/__views__/ReadArticle.test.js

@@ -7,7 +7,14 @@ import {
 } from "../../views/ReadArticle";
 import { props1, props2, props3, props4, props5 } from "../__mocks__/testData";
 
-describe(" Read article", () => {
+let inst;
+const wrp = shallow(<Article {...props1} />);
+beforeAll(() => {
+  inst = wrp.instance();
+  jest.spyOn(inst, "followAuthor");
+});
+
+describe("Read article", () => {
   test("render the full component with aside articles", () => {
     const wrapper = shallow(<Article {...props1} />);
     expect(wrapper.find(".article-container")).toHaveLength(1);
@@ -45,7 +52,8 @@ describe(" Read article", () => {
         asideArticles: {
           articles: [{ body: "hello world" }, { body: "hello world" }]
         }
-      }
+      },
+      following: { isFetching: true, status: true }
     };
     expect(mapStateToProps(state)).toEqual({
       currentUser: {
@@ -54,7 +62,8 @@ describe(" Read article", () => {
       asideArticles: {
         articles: [{ body: "hello world" }, { body: "hello world" }]
       },
-      article: state.fetchedArticle
+      article: state.fetchedArticle,
+      following: { isFetching: true, status: true }
     });
   });
 
@@ -85,4 +94,19 @@ describe(" Read article", () => {
     });
     expect(secondCall).toEqual(false);
   });
+
+  describe("Follow an author", () => {
+    test("should map followUser article to props", () => {
+      const dispatch = jest.fn();
+      mapDispatchToProps(dispatch).followUser("claude");
+      expect(dispatch.mock.calls[0][0]).toBeDefined();
+    });
+
+    test("should call followAuthor when the follow button is clicked", () => {
+      wrp.find(`[data-test="follow_author"]`).simulate("click");
+      expect(inst.followAuthor).toHaveBeenCalledWith(
+        props1.article.article.author.username
+      );
+    });
+  });
 });

src/redux/actionTypes.js

@@ -55,3 +55,10 @@ export const FETCHING_ASIDE_ARTICLES = "FETCHING_ASIDE_ARTICLES";
  * @description delete article action types
  */
 export const DELETE_ARTICLE = " DELETE_ARTICLE";
+
+/**
+ * @description following action types
+ */
+export const FOLLOWING_SUCCESS = "FOLLOWING_SUCCESS";
+export const WAITING_RESPONSE = "WAITING_RESPONSE";
+export const FOLLOWING_FAILED = "FOLLOWING_FAILED";

src/redux/actions/followingActions.js

@@ -0,0 +1,30 @@
+import "@babel/polyfill";
+import axios from "../../utils/axios";
+import {
+  FOLLOWING_FAILED,
+  FOLLOWING_SUCCESS,
+  WAITING_RESPONSE
+} from "../actionTypes";
+
+export const followed = () => ({
+  type: FOLLOWING_SUCCESS,
+  payload: true
+});
+
+export const unfollowed = () => ({
+  type: FOLLOWING_SUCCESS,
+  payload: false
+});
+
+export const failed = () => ({ type: FOLLOWING_FAILED, payload: false });
+
+export const followUser = username => async dispatch => {
+  try {
+    dispatch({ type: WAITING_RESPONSE });
+    const { status } = await axios.post(`/profiles/${username}/follow`);
+    if (status === 201) dispatch(followed());
+    if (status === 202) dispatch(unfollowed());
+  } catch (error) {
+    dispatch(failed());
+  }
+};

src/redux/reducers/followingReducer.js

@@ -0,0 +1,35 @@
+import {
+  FOLLOWING_FAILED,
+  FOLLOWING_SUCCESS,
+  WAITING_RESPONSE
+} from "../actionTypes";
+
+export const initialState = {
+  isFetching: false,
+  status: null
+};
+
+export default (state = initialState, action) => {
+  const { type, payload } = action;
+  switch (type) {
+    case WAITING_RESPONSE:
+      return {
+        ...state,
+        isFetching: true
+      };
+    case FOLLOWING_SUCCESS:
+      return {
+        ...state,
+        isFetching: false,
+        status: payload
+      };
+    case FOLLOWING_FAILED:
+      return {
+        ...state,
+        isFetching: false,
+        status: payload
+      };
+    default:
+      return state;
+  }
+};

src/redux/reducers/index.js

@@ -5,6 +5,7 @@ import updatePasswordReducers from "./updatePasswordReducers";
 import socialAuthReducers from "./socialAuthReducers";
 import createArticleReducer from "./createArticleReducer";
 import readArticleReducer from "./readArticleReducer";
+import following from "./followingReducer";
 
 export default combineReducers({
   auth: loginReducers,
@@ -13,5 +14,6 @@ export default combineReducers({
   resetPassword: resetPasswordReducers,
   updatePassword: updatePasswordReducers,
   socialAuth: socialAuthReducers,
-  fetchedArticle: readArticleReducer
+  fetchedArticle: readArticleReducer,
+  following
 });

src/styles/base/_button.scss

@@ -12,3 +12,19 @@ input[type="button"] {
     color: #666666 !important;
   }
 }
+
+.btn:hover {
+  background-color: $color-primary;
+  color: $white-primary;
+}
+
+.focus {
+  justify-content: center;
+  @include btn {
+    width: 7em;
+    height: 2em;
+    color: $white-primary;
+    background-color: $color-primary;
+  }
+  @include action-btn__mobile;
+}

src/styles/pages/_article.scss

@@ -35,7 +35,7 @@ body {
         }
 
         .author-follow {
-          justify-content: flex-end;
+          justify-content: center;
           @include btn {
             width: 7em;
             height: 2em;