From 245634b8277db654741a283c5715a6425122c444 Mon Sep 17 00:00:00 2001
From: Sapan Bodiwala <sapan.bodiwala@adp.com>
Date: Mon, 7 Oct 2019 20:07:14 -0400
Subject: [PATCH] Added Heart component

---
 src/components/Heart.js      | 30 ++++++++++++++++++++++++++++++
 src/components/MentorList.js |  2 ++
 src/styles.css               | 28 ++++++++++++++++++++++++----
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Heart.js

diff --git a/src/components/Heart.js b/src/components/Heart.js
new file mode 100644
index 0000000..8d2d0dc
--- /dev/null
+++ b/src/components/Heart.js
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+
+function Heart (props) {
+    const [ likeCount, setLikeCount ] = useState(0);
+
+    useEffect(() => {
+        getLikeCountForMentor(props.name);
+    }, []);
+
+    function getLikeCountForMentor (mentorName) {
+        const mentorLikeCount = localStorage.getItem(`${mentorName}_likeCount`);
+        if (mentorLikeCount) {
+            setLikeCount(parseInt(mentorLikeCount));
+        }
+    }
+
+    function setLikeCountToLocalStorage () {
+        setLikeCount(likeCount + 1)
+        localStorage.setItem(`${props.name}_likeCount`, likeCount + 1);
+    }
+
+    return (
+        <div className='heart-container' onClick={setLikeCountToLocalStorage}>
+            <div className='heart'>&#x2665;</div>
+            <div className='like-count'>{likeCount}</div>
+        </div>
+    );
+}
+
+export default Heart;
\ No newline at end of file
diff --git a/src/components/MentorList.js b/src/components/MentorList.js
index 18ff20e..4b77c26 100644
--- a/src/components/MentorList.js
+++ b/src/components/MentorList.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Link } from 'react-router-dom';
+import Heart from './Heart';
 
 class MentorList extends Component {
     render() {
@@ -12,6 +13,7 @@ class MentorList extends Component {
                         <p className="tags">{this.props.data.technology}</p>
                         <div className="bottom-info">
                           <p>{this.props.data.country}</p>
+                          <Heart {...this.props.data} />
                         </div>
                     </div>
                 </Link>
diff --git a/src/styles.css b/src/styles.css
index 4793da1..79a21dd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -115,7 +115,6 @@ body {
 
 .card .content-card {
 	padding: 20px;
-	margin-bottom: 20px;
 }
 
 .card h3 {
@@ -147,9 +146,8 @@ body {
 .card .bottom-info {
 	font-size: 14px;
 	width: 100%;
-	position: absolute;
-	bottom: 0px;
-	padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
 }
 
 .productList{
@@ -235,4 +233,26 @@ body {
     width: 60vh;
     padding: 20px;
     margin: 20px auto;
+}
+
+.heart-container {
+    cursor: pointer;
+    display: flex;
+}
+
+.heart-container:hover {
+    color: red;
+}
+
+.heart {
+    font-size: 1rem;
+    margin-right: 5px;
+}
+
+.like-count {
+    font-size: 1rem;
+}
+
+.like-count:hover {
+    color: red;
 }
\ No newline at end of file