Merge pull request #40 from andela/bg-fix-favorited-teams-161237365

#161237365 Fix the favorite icon tooltip messages
andela · Oct 18, 2018 · 4dd8e3a · 4dd8e3a
2 parents e56f9fb + c25c671
commit 4dd8e3a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 59 deletions.
diff --git a/client/src/modules/HOC/index.jsx b/client/src/modules/HOC/index.jsx
@@ -23,8 +23,10 @@ const renderCards = (addFavorites, { teams }) => {
           favorite={favorite}
           addFavorites={addFavorites}
           isFavorited={item.favoritedByYou}
+          favoriteLinkTooltip="Add to favorites"
           lock={lock}
           toolTip={toolTip}
+          icon="favorite"
           progressBar={progress}
         />
         <ReactTooltip />

diff --git a/client/src/modules/Home/components/CardItem.jsx b/client/src/modules/Home/components/CardItem.jsx
@@ -3,74 +3,77 @@ import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 const CardItems = ({
-  item, favorite, lock, toolTip, progressBar, addFavorites, isFavorited
-}) => (
-  <div>
-    <div className="col s12 m6 l3 team-card">
-      <div className="card">
-        <div className={`card-header ${progressBar[0]}`}>
-          <span className="card-title">{item.name}</span>
-          <a
-            id="add-favorite-anchor"
-            onClick={() => { addFavorites(item.id); }}
-            href="#!"
-            data-tip="Add to favorites"
-            className={isFavorited ? `btn-floating favorite-icons halfway-fab waves-effect waves-light favorite-btn ${favorite}` : `btn-floating halfway-fab waves-effect waves-light favorite-btn ${favorite}`}
-          >
-            <i className="material-icons">favorite</i>
-          </a>
-        </div>
-        <div className="card-description black-text">
-          <p>{item.description}</p>
-        </div>
-        <div className="card-icons">
-          <div
-            className="row progress-bar"
-            id="progress-bar"
-            data-tip={`${item.progress}%`}
-          >
-            <div className={`progress center-block col s12 ${progressBar[1]}`}>
-              <div
-                className={`determinate ${progressBar[0]}`}
-                style={{ width: `${item.progress}%` }}
-              />
-            </div>
+  item, favorite, lock, toolTip, progressBar, addFavorites, favoriteLinkTooltip, icon, isFavorited
+}) => {
+  return (
+    <div>
+      <div className="col s12 m6 l3 team-card">
+        <div className="card">
+          <div className={`card-header ${progressBar[0]}`}>
+            <span className="card-title">{item.name}</span>
+            <a
+              id="add-favorite-anchor"
+              onClick={() => { addFavorites(item.id); }}
+              href="#!"
+              disabled={isFavorited || false}
+              data-tip={favoriteLinkTooltip}
+              className={isFavorited ? `btn-floating favorite-icons halfway-fab waves-effect waves-light favorite-btn ${favorite}` : `btn-floating halfway-fab waves-effect waves-light favorite-btn ${favorite}`}
+            >
+              <i className="material-icons">{icon}</i>
+            </a>
           </div>
-          <NavLink
-            to={`teams/${item.id}`}
-            className=" waves-effect waves-light uppercase"
-          >
+          <div className="card-description black-text">
+            <p>{item.description}</p>
+          </div>
+          <div className="card-icons">
+            <div
+              className="row progress-bar"
+              id="progress-bar"
+              data-tip={`${item.progress}%`}
+            >
+              <div className={`progress center-block col s12 ${progressBar[1]}`}>
+                <div
+                  className={`determinate ${progressBar[0]}`}
+                  style={{ width: `${item.progress}%` }}
+                />
+              </div>
+            </div>
+            <NavLink
+              to={`teams/${item.id}`}
+              className=" waves-effect waves-light uppercase"
+            >
               View team
-          </NavLink>
-          <i className="tiny-small material-icons right" data-tip={toolTip}>
-            {lock}
-          </i>
-          <a
-            className="waves-effect waves-light right modal-trigger icon-link"
-            href="#addMember"
-          >
-            <i className="tiny-small material-icons" data-tip="add member">
-                person_add
+            </NavLink>
+            <i className="tiny-small material-icons right" data-tip={toolTip}>
+              {lock}
             </i>
-          </a>
-          <i
-            className="tiny-small material-icons right"
-            data-tip={`manage ${item.members} member(s)`}
-          >
+            <a
+              className="waves-effect waves-light right modal-trigger icon-link"
+              href="#addMember"
+            >
+              <i className="tiny-small material-icons" data-tip="add member">
+                person_add
+              </i>
+            </a>
+            <i
+              className="tiny-small material-icons right"
+              data-tip={`manage ${item.members} member(s)`}
+            >
               groups
-          </i>
+            </i>
 
-          <i
-            className="tiny-small material-icons right"
-            data-tip="admin settings"
-          >
+            <i
+              className="tiny-small material-icons right"
+              data-tip="admin settings"
+            >
               settings
-          </i>
+            </i>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 
 CardItems.propTypes = {

diff --git a/client/src/modules/Teams/components/FavoriteTeams.jsx b/client/src/modules/Teams/components/FavoriteTeams.jsx
@@ -55,9 +55,11 @@ class Favorites extends Component {
                         item={items.team}
                         favorite={favorite}
                         lock={lock}
+                        favoriteLinkTooltip="Remove from favourites"
                         addFavorites={this.removeFavorites}
                         toolTip={toolTip}
                         progressBar={progress}
+                        icon="close"
                       />
                       <ReactTooltip />
                     </React.Fragment>