Implement reducers for article ReactionIcons

- Create reducer file
- Add initial state
- Update state with database response
- Update view(Component) with new data

src/components/widgets/ReactionIcons.jsx

@@ -5,48 +5,37 @@ import PropTypes from 'prop-types';
 import { getTotalReactions, articleReaction } from '../../actions/articleReactionsAction';
 
 class ReactionIcons extends Component {
-  state = {
-    likeClicked: false,
-    dislikeClicked: false
-  };
-
   componentDidMount = () => {
     this.props.getTotalReactions(this.props.selectedArticleId);
   };
 
-  createLikeIcon = (outline = 'outline') => {
-    const name = outline.length === 0 ? 'thumbs up' : `thumbs up ${outline}`;
-    return (
-      <i role="presentation" onClick={this.createReaction.bind(this, 'like')}>
-        <Icon disabled link size="small" fitted name={`thumbs up ${name}`} />
-      </i>
-    );
-  };
+  createLikeIcon = newReaction => (
+    <i role="presentation" onClick={this.createReaction.bind(this, 'like', newReaction)}>
+      <Icon disabled link size="small" fitted name="thumbs up outline" />
+    </i>
+  );
 
-  createDislikeIcon = (outline = 'outline') => {
-    const name = outline.length === 0 ? 'thumbs down' : `thumbs down ${outline}`;
-    return (
-      <i role="presentation" onClick={this.createReaction.bind(this, 'dislike')}>
-        <Icon disabled link size="small" fitted name={`thumbs down ${name}`} />
-      </i>
-    );
-  };
+  createDislikeIcon = () => (
+    <i role="presentation" onClick={this.createReaction.bind(this, 'dislike')}>
+      <Icon disabled link size="small" fitted name="thumbs down outline" />
+    </i>
+  );
 
-  createReaction = (reaction) => {
-    this.props.articleReaction(this.props.selectedArticleId, reaction);
+  createReaction = (newReaction) => {
+    this.props.articleReaction(this.props.selectedArticleId, newReaction);
+    setTimeout(() => this.props.getTotalReactions(this.props.selectedArticleId), 100);
   };
 
   render() {
     const { date, numberofcomments, totalArticleReactions } = this.props;
     const { likes, dislikes } = totalArticleReactions.successResponse;
-    const { likeClicked, dislikeClicked } = this.state;
-    const outline = '';
+
     return (
       <Fragment>
         <i className="dates">{date}</i>
-        {likeClicked ? this.createLikeIcon(outline) : this.createLikeIcon()}
+        {this.createLikeIcon()}
         {likes}
-        {dislikeClicked ? this.createDislikeIcon(outline) : this.createDislikeIcon()}
+        {this.createDislikeIcon()}
         {dislikes}
         <i className="articleComment">
           <Icon disabled link size="small" fitted name="comments outline" />
@@ -71,7 +60,8 @@ ReactionIcons.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  totalArticleReactions: state.totalArticleReactions
+  totalArticleReactions: state.totalArticleReactions,
+  newArticleReaction: state.newArticleReaction
 });
 
 export { ReactionIcons as ReactionIconsPage };

src/components/widgets/test/ReactionIcons.test.js

@@ -6,17 +6,17 @@ import { getTotalReactions } from '../../../actions/articleReactionsAction';
 
 describe('Test for reaction Icons', () => {
   it('should have initial state of false and change when clicked ', () => {
+    const articleReaction = jest.fn();
     const wrapper = shallow(
       <ReactionIconsPage
         getTotalReactions={getTotalReactions}
         selectedArticleId={props.match.params.title}
         totalArticleReactions={props.totalArticleReactions}
+        articleReaction={articleReaction}
       />
     );
 
     expect(wrapper).toMatchSnapshot();
-
-    expect(wrapper.state().likeClicked).toEqual(false);
   });
 
   it('should have initial state of false and change when clicked ', () => {
@@ -32,6 +32,5 @@ describe('Test for reaction Icons', () => {
 
     expect(wrapper).toMatchSnapshot();
     wrapper.instance().createReaction();
-    expect(wrapper.state().dislikeClicked).toEqual(false);
   });
 });

src/components/widgets/test/__snapshots__/ReactionIcons.test.js.snap

@@ -16,7 +16,7 @@ exports[`Test for reaction Icons should have initial state of false and change w
       disabled={true}
       fitted={true}
       link={true}
-      name="thumbs up thumbs up outline"
+      name="thumbs up outline"
       size="small"
     />
   </i>
@@ -30,7 +30,7 @@ exports[`Test for reaction Icons should have initial state of false and change w
       disabled={true}
       fitted={true}
       link={true}
-      name="thumbs down thumbs down outline"
+      name="thumbs down outline"
       size="small"
     />
   </i>
@@ -67,7 +67,7 @@ exports[`Test for reaction Icons should have initial state of false and change w
       disabled={true}
       fitted={true}
       link={true}
-      name="thumbs up thumbs up outline"
+      name="thumbs up outline"
       size="small"
     />
   </i>
@@ -81,7 +81,7 @@ exports[`Test for reaction Icons should have initial state of false and change w
       disabled={true}
       fitted={true}
       link={true}
-      name="thumbs down thumbs down outline"
+      name="thumbs down outline"
       size="small"
     />
   </i>

src/reducers/articleReactionsReducer.js

@@ -0,0 +1,18 @@
+import actionTypes from '../actions/articleReactionsAction/actionTypes';
+import initialState from './initialState';
+
+const { ARTICLE_REACTION_SUCCESS } = actionTypes;
+
+const { articleReaction } = initialState;
+
+export default (state = articleReaction, action) => {
+  switch (action.type) {
+    case ARTICLE_REACTION_SUCCESS:
+      return {
+        success: true,
+        newReaction: action.payload
+      };
+    default:
+      return state;
+  }
+};

src/reducers/index.js

@@ -1,9 +1,16 @@
 import { combineReducers } from 'redux';
-import { trendingArticlesReducer, popularArticlesReducer, FeaturedArticlesReducer, TagsReducer, CategoriesReducer } from './articlesReducers/fetchArticlesReducers';
+import {
+  trendingArticlesReducer,
+  popularArticlesReducer,
+  FeaturedArticlesReducer,
+  TagsReducer,
+  CategoriesReducer
+} from './articlesReducers/fetchArticlesReducers';
 import authReducer from './authReducer';
 import socialLogin from './socialLoginReducer';
 import readArticle from './readArticleReducer';
 import totalArticleReactions from './totalArticleReactionReducer';
+import newArticleReaction from './articleReactionsReducer';
 
 const rootReducer = combineReducers({
   trendingArticlesReducer,
@@ -14,7 +21,8 @@ const rootReducer = combineReducers({
   authReducer,
   socialLogin,
   readArticle,
-  totalArticleReactions
+  totalArticleReactions,
+  newArticleReaction
 });
 
 export default rootReducer;

src/reducers/initialState.js

@@ -18,18 +18,17 @@ const initialState = {
   featuredArticles: {
     featuredArticlesResponse: [],
     featuredArticlesfailure: false,
-    featuredArticlesSuccess: false,
+    featuredArticlesSuccess: false
   },
   categories: {
     categoriesResponseSuccess: false,
     categoriesResponse: [],
-    categoriesResponsefailure: false,
+    categoriesResponsefailure: false
   },
   tags: {
     tagsResponseSuccess: false,
     tagsResponse: [],
-    tagsResponsefailure: false,
-
+    tagsResponsefailure: false
   },
   readArticle: {
     articleIsLoading: false,
@@ -42,6 +41,10 @@ const initialState = {
     success: false,
     successResponse: {},
     failureResponse: {}
+  },
+  articleReaction: {
+    success: false,
+    newReaction: ''
   }
 };
 

src/reducers/test/articleReactionReducer.test.js

@@ -0,0 +1,29 @@
+import actionTypes from '../../actions/articleReactionsAction/actionTypes';
+import initialState from '../initialState';
+import articleReactionsReducer from '../articleReactionsReducer';
+
+const { ARTICLE_REACTION_SUCCESS } = actionTypes;
+
+describe(' article reaction reducer', () => {
+  it('should return the initial state', () => {
+    expect(articleReactionsReducer(undefined, {})).toEqual(initialState.articleReaction);
+  });
+
+  it('should update state when the start action is dispatched', () => {
+    const action = {
+      payload: 'dislike'
+    };
+    expect(
+      articleReactionsReducer(initialState.articleReaction, {
+        type: ARTICLE_REACTION_SUCCESS,
+        payload: 'dislike'
+      })
+    ).toEqual(
+      (initialState,
+      {
+        success: true,
+        newReaction: action.payload
+      })
+    );
+  });
+});