Refactored duplicated code

src/shared/components/challenge-detail/Header/ChallengeTags.jsx

@@ -23,9 +23,8 @@ import {
 } from 'topcoder-react-ui-kit';
 
 import { COMPETITION_TRACKS } from 'utils/tc';
-import VerifiedIcon from 'assets/images/icon-verified.svg';
+import VerifiedTag from 'components/challenge-listing/VerifiedTag';
 import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
-import Tooltip from 'components/Tooltip';
 import { calculateScore } from '../../../utils/challenge-listing/helper';
 import './style.scss';
 
@@ -71,12 +70,6 @@ export default function ChallengeTags(props) {
 
   const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
 
-  const verifiedTagTooltip = item => (
-    <div styleName="tctooltiptext">
-      <p>{item} is verified based <br /> on past challenges you won</p>
-    </div>
-  );
-
   return (
     <div>
       {
@@ -105,28 +98,17 @@ export default function ChallengeTags(props) {
       }
       {
         matchScore && (
-          <MatchScore score={calculateScore(matchScore)} />
+          <span styleName="matchScoreWrap">
+            <MatchScore score={calculateScore(matchScore)} />
+          </span>
         )
       }
       {
         matchSkills.map(item => (
-          <div styleName="recommended-challenge-tooltip">
-            <Tooltip
-              id="recommended-tip"
-              content={verifiedTagTooltip(item)}
-              trigger={['hover', 'focus']}
-            >
-              <DevelopmentTrackEventTag
-                key={item}
-                role="button"
-                to={(challengesUrl && item.indexOf('+') !== 0) ? `${challengesUrl}?filter[tags][0]=${
-                  encodeURIComponent(item)}` : null}
-              >
-                <VerifiedIcon styleName="verified-tag" />
-                <span styleName="verified-tag-text">{item}</span>
-              </DevelopmentTrackEventTag>
-            </Tooltip>
-          </div>
+          <VerifiedTag
+            item={item}
+            challengesUrl={challengesUrl}
+          />
         ))
       }
       {

src/shared/components/challenge-detail/Header/style.scss

@@ -357,37 +357,8 @@
   top: -5px;
 }
 
-.verified-tag {
-  position: absolute;
-}
-
-.verified-tag-text {
-  margin-left: 15px;
-}
-
-.recommended-challenge-tooltip {
-  display: inline-block;
-  margin: 3px 0 0 0;
-}
-
-.tctooltiptext {
-  background: $tc-white;
-  color: $tc-gray-90;
-  border-radius: 3px;
-  padding: 10px;
-}
-
-.tctooltiptext::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  bottom: 4px;
-  margin-left: -5px;
-  border-width: 5px 5px 0;
-  left: 50%;
-  border-top-color: $tc-white;
-  z-index: 1000;
+.matchScoreWrap {
+  width: 100%;
+  margin-right: -2px;
+  padding: 0;
 }

src/shared/components/challenge-listing/ChallengeCard/MatchScore/style.scss

@@ -1,7 +1,7 @@
 @import "~styles/mixins";
 
 .matchScoreTag {
-  margin-right: 4px;
+  margin-right: 0;
   margin-bottom: 4px;
   display: inline-block;
 }

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -661,6 +661,7 @@ export default function FiltersPanel({
               status: 'Active',
               reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
               customDate: false,
+              recommended: false,
             });
             selectCommunity(defaultCommunityId);
             setSearchText('');

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -1,4 +1,3 @@
-@import "../../../../../styles/awesome.css";
 @import '~styles/mixins';
 
 .uppercase {

src/shared/components/challenge-listing/Listing/Bucket/index.jsx

@@ -121,7 +121,7 @@ export default function Bucket({
   if (!loading && sortedChallenges.length === 0) {
     return (
       <div styleName="no-results">
-        { filterState.recommended ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
+        { (filterState.recommended && activeBucket === 'openForRegistration') ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
       </div>
     );
   }

src/shared/components/challenge-listing/Listing/index.jsx

@@ -255,7 +255,7 @@ function Listing({
       {
         loading
           ? placeholders
-          : !filterState.recommended && (
+          : (!filterState.recommended || activeBucket !== 'openForRegistration') && (
             <div styleName="no-results">{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }</div>
           )
       }

src/shared/components/challenge-listing/Tags.jsx

@@ -4,11 +4,10 @@
 import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
-import { Tag, DevelopmentTrackEventTag } from 'topcoder-react-ui-kit';
-import VerifiedIcon from 'assets/images/icon-verified.svg';
+import { Tag } from 'topcoder-react-ui-kit';
 import Tooltip from 'components/Tooltip';
+import VerifiedTag from './VerifiedTag';
 import './style.scss';
-import cn from 'classnames';
 
 // The number of tags to be shown without requiring expanding
 const VISIBLE_TAGS = 3;
@@ -28,12 +27,6 @@ export default function Tags({
     }
   };
 
-  const verifiedTagTooltip = item => (
-    <div styleName="tctooltiptext">
-      <p>{item} is verified based <br /> on past challenges you won</p>
-    </div>
-  );
-
   const tagRedirectLink = (item) => {
     if (challengesUrl && item.indexOf('+') !== 0) {
       return `${challengesUrl}?filter[tags][0]=${
@@ -42,32 +35,19 @@ export default function Tags({
     return null;
   };
 
-  const renderVerifiedTag = item => (
-    <div styleName="recommended-challenge-tooltip">
-      <Tooltip
-        id="recommended-tip"
-        content={verifiedTagTooltip(item)}
-        trigger={['hover', 'focus']}
-      >
-        <DevelopmentTrackEventTag
-          onClick={() => onClick(item.trim())}
-          key={item}
-          role="button"
-          to={tagRedirectLink(item)}
-        >
-          <VerifiedIcon styleName="verified-tag" />
-          <span styleName={cn({ 'verified-tag-text': recommended })}>{item}</span>
-        </DevelopmentTrackEventTag>
-      </Tooltip>
-    </div>
-  );
-
   const additionalTags = (items, verifiedTagIndex) => (
     <div styleName="additionalTagWrapper">
       {
         items.map((item, index) => {
           if (index < verifiedTagIndex) {
-            return renderVerifiedTag(item);
+            return (
+              <VerifiedTag
+                challengesUrl={challengesUrl}
+                item={item}
+                onClick={onClick}
+                recommended={recommended}
+              />
+            );
           }
           return (
             (
@@ -126,7 +106,14 @@ export default function Tags({
                 </Tooltip>
               </div>
             )
-              : renderVerifiedTag(item)
+              : (
+                <VerifiedTag
+                  challengesUrl={challengesUrl}
+                  item={item}
+                  onClick={onClick}
+                  recommended={recommended}
+                />
+              )
           );
         }
 

src/shared/components/challenge-listing/VerifiedTag/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { DevelopmentTrackEventTag } from 'topcoder-react-ui-kit';
+import VerifiedIcon from 'assets/images/icon-verified.svg';
+import Tooltip from 'components/Tooltip';
+import PT from 'prop-types';
+import './style.scss';
+import cn from 'classnames';
+
+/**
+ * Verified Tag Componenet
+ */
+export default function VerifiedTag({
+  challengesUrl, item, onClick, recommended,
+}) {
+  const verifiedTagTooltip = skill => (
+    <div styleName="tctooltiptext">
+      <p>{skill} is verified based <br /> on past challenges you won</p>
+    </div>
+  );
+
+  const tagRedirectLink = (skill) => {
+    if (challengesUrl && skill.indexOf('+') !== 0) {
+      return `${challengesUrl}?search=${
+        encodeURIComponent(skill)}`;
+    }
+    return null;
+  };
+
+  return (
+    <div styleName="recommended-challenge-tooltip">
+      <Tooltip
+        id="recommended-tip"
+        content={verifiedTagTooltip(item)}
+        trigger={['hover', 'focus']}
+      >
+        <DevelopmentTrackEventTag
+          onClick={() => onClick(item.trim())}
+          key={item}
+          role="button"
+          to={tagRedirectLink(item)}
+        >
+          <VerifiedIcon styleName="verified-tag" />
+          <span styleName={cn({ 'verified-tag-text': recommended })}>{item}</span>
+        </DevelopmentTrackEventTag>
+      </Tooltip>
+    </div>
+  );
+}
+
+VerifiedTag.defaultProps = {
+  challengesUrl: '',
+  item: '',
+  onClick: null,
+  recommended: true,
+};
+
+VerifiedTag.propTypes = {
+  challengesUrl: PT.string,
+  item: PT.string,
+  onClick: PT.func,
+  recommended: PT.bool,
+};

src/shared/components/challenge-listing/VerifiedTag/style.scss

@@ -0,0 +1,36 @@
+@import '~styles/mixins';
+
+.recommended-challenge-tooltip {
+  display: inline-block;
+  margin: 3px 0 0 3px;
+}
+
+.tctooltiptext {
+  background: $tc-white;
+  color: $tc-gray-90;
+  border-radius: 3px;
+  padding: 10px;
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-white;
+  z-index: 1000;
+}
+
+.verified-tag {
+  position: absolute;
+}
+
+.verified-tag-text {
+  margin-left: 15px;
+}

src/shared/components/challenge-listing/index.jsx

@@ -103,6 +103,7 @@ export default function ChallengeListing(props) {
       {
         filterState.recommended
         && !loadingOpenForRegistrationChallenges
+        && activeBucket === 'openForRegistration'
         && !openForRegistrationChallenges.length && (
           <NoChallengeCard />
         )

src/shared/components/challenge-listing/style.scss

@@ -98,41 +98,6 @@ $challenge-radius-4: $corner-radius * 2;
   }
 }
 
-.verified-tag {
-  position: absolute;
-}
-
-.verified-tag-text {
-  margin-left: 15px;
-}
-
-.recommended-challenge-tooltip {
-  display: inline-block;
-  margin: 3px 0 0 3px;
-}
-
-.tctooltiptext {
-  background: $tc-white;
-  color: $tc-gray-90;
-  border-radius: 3px;
-  padding: 10px;
-}
-
-.tctooltiptext::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  bottom: 4px;
-  margin-left: -5px;
-  border-width: 5px 5px 0;
-  left: 50%;
-  border-top-color: $tc-white;
-  z-index: 1000;
-}
-
 .card-container {
   width: 70%;
 

src/shared/utils/challenge-listing/buckets.js

@@ -255,6 +255,7 @@ export function isFilterEmpty(filter, tab, bucket) {
       },
       search: '',
       types: ['CH', 'F2F', 'TSK'],
+      recommended: false,
     };
   }