before final demo

andela · Mar 6, 2019 · 57abe37 · 57abe37
1 parent af5c4e3
commit 57abe37
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/components/widgets/ReactionIcons.jsx b/src/components/widgets/ReactionIcons.jsx
@@ -6,25 +6,31 @@ import { dateFormatter } from '../../helpers/articleInfoFormatter';
 import { getTotalReactions, articleReaction } from '../../actions/articleReactionsAction';
 
 class ReactionIcons extends Component {
+  state = {
+    timeoutId: ''
+  };
+
   componentDidMount = () => {
     this.props.getTotalReactions(this.props.selectedArticleId);
   };
 
-  createLikeIcon = () => (
-    <i role="presentation" onClick={this.createReaction.bind(this, 'like')}>
-      <Icon disabled link size="small" fitted name="thumbs up outline" />
-    </i>
-  );
+  componentWillUnmount = () => {
+    clearTimeout(this.state.timeoutId);
+  };
 
-  createDislikeIcon = () => (
-    <i role="presentation" onClick={this.createReaction.bind(this, 'dislike')}>
-      <Icon disabled link size="small" fitted name="thumbs down outline" />
+  createReactionIcon = (reaction, position) => (
+    <i role="presentation" onClick={this.createReaction.bind(this, reaction)}>
+      <Icon disabled link size="small" fitted name={`thumbs ${position} outline`} />
     </i>
   );
 
   createReaction = (newReaction) => {
     this.props.articleReaction(this.props.selectedArticleId, newReaction);
-    setTimeout(() => this.props.getTotalReactions(this.props.selectedArticleId), 100);
+    const timeoutId = setTimeout(
+      () => this.props.getTotalReactions(this.props.selectedArticleId),
+      100
+    );
+    this.setState({ timeoutId });
   };
 
   render() {
@@ -37,9 +43,9 @@ class ReactionIcons extends Component {
           <span>{dateFormatter(date)}</span>
         </Icon>
         <i className="dates">{date}</i>
-        {this.createLikeIcon()}
+        {this.createReactionIcon('like', 'up')}
         {likes}
-        {this.createDislikeIcon()}
+        {this.createReactionIcon('dislike', 'down')}
         {dislikes}
         <i className="articleComment">
           <Icon disabled link size="small" fitted name="comments outline" />

diff --git a/src/containers/ProfileContainer/test/__snapshots__/ProfileContainer.test.js.snap b/src/containers/ProfileContainer/test/__snapshots__/ProfileContainer.test.js.snap
@@ -61,6 +61,9 @@ exports[`Profile should match snapshot when an authenticated user view user prof
         userId="id"
       >
         <ProfileContainer
+          fetchCurrentUser={[Function]}
+          fetchCurrentUserFailure={[Function]}
+          fetchCurrentUserSuccess={[Function]}
           fetchIsLoading={false}
           fetchUser={[Function]}
           fetchUserFailure={[Function]}
@@ -1692,6 +1695,9 @@ exports[`Profile should match snapshot when an unauthenticated user view user pr
         userId="id"
       >
         <ProfileContainer
+          fetchCurrentUser={[Function]}
+          fetchCurrentUserFailure={[Function]}
+          fetchCurrentUserSuccess={[Function]}
           fetchIsLoading={false}
           fetchUser={[Function]}
           fetchUserFailure={[Function]}
@@ -3246,6 +3252,9 @@ exports[`Profile should match snapshot when current user view own profile 1`] =
         userId="d1564aa6-e81d-41ab-8469-0aa573f4a6c5"
       >
         <ProfileContainer
+          fetchCurrentUser={[Function]}
+          fetchCurrentUserFailure={[Function]}
+          fetchCurrentUserSuccess={[Function]}
           fetchIsLoading={false}
           fetchUser={[Function]}
           fetchUserFailure={[Function]}