Update actions/reducers

src/newsreader/js/pages/homepage/actions/posts.js

@@ -9,6 +9,7 @@ export const RECEIVE_POST = 'RECEIVE_POST';
 export const REQUEST_POSTS = 'REQUEST_POSTS';
 
 export const MARK_POST_READ = 'MARK_POST_READ';
+export const MARKING_POST = 'MARKING_POST';
 
 export const requestPosts = () => ({ type: REQUEST_POSTS });
 
@@ -30,10 +31,14 @@ export const postRead = (post, section) => ({
   section,
 });
 
+export const markingPostRead = () => ({ type: MARKING_POST });
+
 export const markPostRead = (post, token) => {
   return (dispatch, getState) => {
     const { selected } = getState();
 
+    dispatch(markingPostRead());
+
     const url = `/api/posts/${post.id}/`;
     const options = {
       method: 'PATCH',

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -130,7 +130,6 @@ const mapDispatchToProps = dispatch => ({
   markPostRead: (post, token) => dispatch(markPostRead(post, token)),
 });
 
-// TODO use different boolean for saving mark post as read state
+const mapStateToProps = state => ({ isMarkingPost: state.posts.isMarking });
-const mapStateToProps = state => ({ isMarkingPost: state.posts.isFetching });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PostModal);

src/newsreader/js/pages/homepage/reducers/posts.js

@@ -5,6 +5,8 @@ import { CATEGORY_TYPE, RULE_TYPE } from '../constants.js';
 
 import {
   SELECT_POST,
+  MARKING_POST,
+  MARK_POST_READ,
   RECEIVE_POST,
   RECEIVE_POSTS,
   REQUEST_POSTS,
@@ -13,7 +15,7 @@ import { SELECT_CATEGORY } from '../actions/categories.js';
 import { SELECT_RULE } from '../actions/rules.js';
 import { MARK_SECTION_READ } from '../actions/selected.js';
 
-const defaultState = { items: {}, isFetching: false };
+const defaultState = { items: {}, isFetching: false, isMarking: false };
 
 export const posts = (state = { ...defaultState }, action) => {
   switch (action.type) {
@@ -62,6 +64,10 @@ export const posts = (state = { ...defaultState }, action) => {
           ...updatedPosts,
         },
       };
+    case MARKING_POST:
+      return { ...state, isMarking: true };
+    case MARK_POST_READ:
+      return { ...state, isMarking: false };
     default:
       return state;
   }

src/newsreader/js/tests/homepage/actions/post.test.js

@@ -14,12 +14,18 @@ describe('post actions', () => {
     fetchMock.restore();
   });
 
-  it('should create an action request posts', () => {
+  it('should create an action to request posts', () => {
     const expectedAction = { type: actions.REQUEST_POSTS };
 
     expect(actions.requestPosts()).toEqual(expectedAction);
   });
 
+  it('should create an action to mark a post read', () => {
+    const expectedAction = { type: actions.MARKING_POST };
+
+    expect(actions.markingPostRead()).toEqual(expectedAction);
+  });
+
   it('should create an action receive a post', () => {
     const post = {
       id: 2067,
@@ -147,6 +153,7 @@ describe('post actions', () => {
     });
 
     const expectedActions = [
+      { type: actions.MARKING_POST },
       {
         type: actions.RECEIVE_POST,
         post: { ...post, read: true },
@@ -362,6 +369,7 @@ describe('post actions', () => {
     });
 
     const expectedActions = [
+      { type: actions.MARKING_POST },
       { type: actions.RECEIVE_POST, post: {} },
       { type: errorActions.RECEIVE_API_ERROR, error: TypeError(errorMessage) },
     ];

src/newsreader/js/tests/homepage/reducers/post.test.js

@@ -12,7 +12,7 @@ describe('post actions', () => {
   it('should return state after requesting posts', () => {
     const action = { type: actions.REQUEST_POSTS };
 
-    const expectedState = { ...defaultState, isFetching: true };
+    const expectedState = { ...defaultState, isFetching: true, isMarking: false };
 
     expect(reducer(undefined, action)).toEqual(expectedState);
   });
@@ -40,6 +40,7 @@ describe('post actions', () => {
     const expectedState = {
       ...defaultState,
       isFetching: false,
+      isMarking: false,
       items: { [post.id]: post },
     };
 
@@ -85,6 +86,7 @@ describe('post actions', () => {
     const expectedState = {
       ...defaultState,
       isFetching: false,
+      isMarking: false,
       items: expectedPosts,
     };