heartIcon

src/js/common/components/Style/DesignTokenColors.js

@@ -16,6 +16,7 @@ const primitiveColorNames = {
   steel200: '#C8D4DF',
   white: '#FFFFFF',
   red: '#EF0716',
+  alert: '#F3363D',
 };
 
 // These are semanticColorNames
@@ -37,6 +38,7 @@ const DesignTokenColors = {
   secondary200: primitiveColorNames.steel200,
   whiteUI: primitiveColorNames.white,
   alert500: primitiveColorNames.red,
+  alert400: primitiveColorNames.alert,
 };
 
 export default DesignTokenColors;

src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx

@@ -1,43 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import DesignTokenColors from '../../Style/DesignTokenColors';
-import HeartFavoriteToggleIcon from './HeartFavoriteToggleIcon';
+import LikeDislikeIcon from './HeartFavoriteToggleIcon';
 
 const ContainerLikeDislike = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // width: 135px;
   height: 32px;
   border-radius: 20px;
   padding-left: 8px;
   padding-right: 8px;
-
   border: 1px solid ${DesignTokenColors.neutralUI100};
   background: ${DesignTokenColors.whiteUI};
-
-
-  // &:focus {
-  //   outline: 2px solid ${DesignTokenColors.primary} !important;
-  //   outline-offset: 2px;
-  // }
-
-  // /* Hover state */
-  // &:hover {
-  //   background-color: ${DesignTokenColors.primaryHover};
-  // }
 `;
 
 const LikeContainer = styled.div`
   display: flex;
   padding-right: 8px;
-  border-right: 1px solid ${DesignTokenColors.neutralUI100};
+  border-right: 1px solid ${DesignTokenColors.neutralUI100};  
+  cursor: pointer;
 `;
 
 const DislikeContainer = styled.div`
   display: flex;
   padding-left: 8px;
+  cursor: pointer;
 `;
 
 class Like extends React.Component {
@@ -54,70 +43,71 @@ class Like extends React.Component {
   }
 
   incrementLike = (plus) => {
-    this.state.liked = true;
-    this.state.disLiked = false;
-    console.log(' this.state.likeActive  this.state.disLikeActive!!!', this.state.likeActive, this.state.disLikeActive);
-
     if (plus === '+') {
       this.setState((prevState) => ({
         likeCounter: prevState.likeCounter + 1,
-        likeActive: 'likePressed',
-        // disLikeActive: 'dislike',
       }));
-
-      console.log('plus like', this.state.likeActive, this.state.disLikeActive);
     } else {
       this.setState((prevState) => ({
         likeCounter: prevState.likeCounter - 1,
-        likeActive: 'like',
       }));
     }
   };
 
   dicrementLike = (minus) => {
-    this.state.liked = false;
-    this.state.disLiked = true;
-
-    console.log('minus like!', this.state.likeActive);
     if (minus === '-') {
       this.setState((prevState) => ({
         dislikeCounter: prevState.dislikeCounter + 1,
-        disLikeActive: 'dislikePressed',
-        likeActive: 'like',
       }));
-      console.log('minus like', this.state.likeActive, this.state.disLikeActive);
     } else {
       this.setState((prevState) => ({ dislikeCounter: prevState.dislikeCounter - 1 }));
     }
   };
 
+  handleClick = (a) => {
+    if (a === 'like') {
+      this.setState((prevState) => ({
+        likeActive: prevState.likeActive === 'like' ? 'liked' : 'like',
+        disLikeActive: 'dislike',
+        liked: true,
+        disLiked: false,
+      }), () => {
+        this.incrementLike(this.state.likeActive === 'like' ? '-' : '+');
+      });
+    }
+
+    if (a === 'dislike') {
+      this.setState((prevState) => ({
+        disLikeActive: prevState.disLikeActive === 'dislike' ? 'dislikePressed' : 'dislike',
+        likeActive: 'like',
+        liked: false,
+        disLiked: true,
+      }), () => {
+        this.dicrementLike(this.state.disLikeActive === 'dislike' ? '+' : '-');
+      });
+    }
+  };
+
   render () {
     return (
 
       <ContainerLikeDislike>
-
-        <LikeContainer>
-          <HeartFavoriteToggleIcon
-            iconType={this.state.likeActive}
-            handleData={this.incrementLike}
+        <LikeContainer onClick={() => { this.handleClick('like'); }}>
+          <LikeDislikeIcon
+            state={this.state.likeActive}
           />
 
           {this.state.liked && this.state.likeCounter}
-
         </LikeContainer>
 
-
-        <DislikeContainer>
-
-          <HeartFavoriteToggleIcon
-            iconType={this.state.disLikeActive}
-            handleData={this.dicrementLike}
+        <DislikeContainer onClick={() => this.handleClick('dislike')} handleData={this.dicrementLike}>
+          <LikeDislikeIcon
+            state={this.state.disLikeActive}
           />
 
           {this.state.disLiked && this.state.dislikeCounter}
         </DislikeContainer>
 
-
       </ContainerLikeDislike>
     );
   }
@@ -127,15 +117,5 @@ export default Like;
 
 Like.propTypes = {
   counter: PropTypes.number.isRequired,
-  // likeCounter: PropTypes.number.isRequired,
-  // secondary: PropTypes.bool,
-  // size: PropTypes.oneOf(['small', 'medium', 'large']),
-  // label: PropTypes.string.isRequired,
-  // onClick: PropTypes.func,
 };
 
-// Button.defaultProps = {
-//   primary: false,
-//   size: 'medium',
-//   onClick: undefined,
-// };

src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleIcon.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import DesignTokenColors from '../../Style/DesignTokenColors';
@@ -50,51 +50,22 @@ const IconContainer = styled.div`
 
 `;
 
-const HeartFavoriteToggleIcon = ({ iconType: initialIconType, handleData }) => {
-  const [iconType, setIconType] = useState(initialIconType);
+const HeartFavoriteToggleIcon = ({ state }) => (
+  <IconContainer>
+    <Icon
+        state={state}
+    >
+      {state === 'like' && <HeartFavorite />}
+      {state === 'liked' && <HeartFavoritePressed />}
+      {state === 'dislike' && <HeartDislike />}
+      {state === 'dislikePressed' && <HeartDislikePressed />}
+    </Icon>
 
-  const handleClick = () => {
-    switch (iconType) {
-      case 'like':
-        setIconType('likePressed');
-        handleData('+');
-        break;
-      case 'dislike':
-        setIconType('dislikePressed');
-        handleData('-');
-        break;
-      case 'likePressed':
-        setIconType('like');
-        handleData();
-        break;
-      case 'dislikePressed':
-        setIconType('dislike');
-        handleData();
-        break;
-      default:
-        break;
-    }
-  };
-
-  return (
-    <IconContainer>
-      <Icon
-        iconType={iconType}
-        onClick={handleClick}
-      >
-        {iconType === 'like' && <HeartFavorite />}
-        {iconType === 'likePressed' && <HeartFavoritePressed />}
-        {iconType === 'dislike' && <HeartDislike />}
-        {iconType === 'dislikePressed' && <HeartDislikePressed />}
-      </Icon>
-
-    </IconContainer>
-  );
-};
+  </IconContainer>
+);
 
 export default HeartFavoriteToggleIcon;
 
 HeartFavoriteToggleIcon.propTypes = {
-  iconType: PropTypes.string.isRequired,
-  handleData: PropTypes.func,
+  state: PropTypes.string,
 };

src/js/common/stories/HeartFavoriteToggle.stories.js

@@ -18,16 +18,8 @@ const Container = styled.div`
   width: 340px;
 `;
 
-// const counterHandler = () => {
-//   let counter = 2340;
-//   counter += 1;
-//   console.log(counter, 'counter');
-//   return counter;
-// };
-
 export const Like = () => (
   <Container>
-    {/* <HeartFavoriteToggleBase onClick={counterHandler} counter={counterHandler} /> */}
     <HeartFavoriteToggleBase />
   </Container>
 );