final fixes for recommender POC.

__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

@@ -184,6 +184,7 @@ exports[`Matches shallow shapshot 2`] = `
       </div>
     </div>
   </div>
+  <hr />
   <div
     className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__buttons___2r3xW"
   >

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

@@ -0,0 +1,20 @@
+import PT from 'prop-types';
+import React from 'react';
+
+import './style.scss';
+
+export default function MatchScore({ score }) {
+  return (
+    <span styleName="match-score">
+      {score}% match
+    </span>
+  );
+}
+
+MatchScore.defaultProps = {
+  score: 0,
+};
+
+MatchScore.propTypes = {
+  score: PT.number,
+};

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

@@ -0,0 +1,12 @@
+@import "~styles/mixins";
+
+.match-score {
+  background-color: $tc-light-blue-30;
+  color: $tc-dark-blue-100;
+  font-size: 10px;
+  line-height: 12px;
+  padding: 3px;
+  border-radius: 2px;
+  margin-left: 5px;
+  margin-top: 1px;
+}

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

@@ -13,6 +13,8 @@ import Tags from '../Tags';
 
 import ChallengeStatus from './Status';
 import TrackAbbreviationTooltip from '../Tooltips/TrackAbbreviationTooltip';
+import MatchScore from './MatchScore';
+import { calculateScore } from '../../../utils/challenge-listing/helper';
 import './style.scss';
 
 /* TODO: Note that this component uses a dirty trick to cheat linter and to be
@@ -67,13 +69,19 @@ function ChallengeCard({
         </div>
 
         <div styleName={isRegistrationOpen ? 'challenge-details with-register-button' : 'challenge-details'}>
-          <Link
-            onClick={() => selectChallengeDetailsTab(DETAIL_TABS.DETAILS)}
-            to={challengeDetailLink}
-            styleName="challenge-title"
-            openNewTab={openChallengesInNewTabs}
-          ><p>{challenge.name}</p>
-          </Link>
+          <div styleName="challenge-detail-header">
+            <Link
+              onClick={() => selectChallengeDetailsTab(DETAIL_TABS.DETAILS)}
+              to={challengeDetailLink}
+              styleName="challenge-title"
+              openNewTab={openChallengesInNewTabs}
+            ><p>{challenge.name}</p>
+            </Link>
+            {
+              challenge.matchScore
+              && <MatchScore score={calculateScore(challenge.matchScore)} />
+            }
+          </div>
           <div styleName="details-footer">
             <span styleName="date">
               {challenge.status === 'Active' ? 'Ends ' : 'Ended '}

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

@@ -106,6 +106,10 @@ $challenge-radius-4: $corner-radius * 2;
         display: inline-block;
       }
     }
+
+    .challenge-detail-header {
+      display: flex;
+    }
   }
   // date and technologies
   .details-footer {

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

@@ -22,7 +22,7 @@
 /* eslint-disable jsx-a11y/label-has-for */
 
 import _ from 'lodash';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PT from 'prop-types';
 import Select from 'components/Select';
 import DateRangePicker from 'components/DateRangePicker';
@@ -250,8 +250,30 @@ export default function FiltersPanel({
   const past = isPastBucket(activeBucket);
   const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
 
-  const availableTypes = activeBucket === 'openForRegistration'
-    ? validTypes : validTypes.filter(item => item.abbreviation !== 'REC');
+  const availableTypes = validTypes.filter(item => item.abbreviation !== 'REC');
+  const isRecommendedChallengesVisible = activeBucket === 'openForRegistration';
+  const [recommendedToggle, setRecommendedToggle] = useState(false);
+
+  useEffect(() => {
+    if (recommendedToggle) {
+      const types = _.union(filterState.types, ['REC']);
+      setFilterState({ ..._.clone(filterState), types });
+    }
+  }, []);
+
+  const onSwitchRecommendedChallenge = (on) => {
+    const { types } = filterState;
+    types.push('REC');
+    setRecommendedToggle(on);
+
+    if (on) {
+      setSort('openForRegistration', 'updatedBy');
+      setFilterState({ ..._.clone(filterState), types });
+    } else {
+      setFilterState({ ..._.clone(filterState), types: ['TSK', 'CH', 'F2F'] });
+      setSort('openForRegistration', 'startDate');
+    }
+  };
 
   const handleTypeChange = (option, e) => {
     let { types } = filterState;
@@ -261,20 +283,14 @@ export default function FiltersPanel({
       types = types.filter(type => type !== option.value);
     }
 
-    if (option.label === 'Recommended') {
-      types = types.filter(type => type === 'REC');
-      if (!e.target.checked) {
-        setFilterState({ ..._.clone(filterState), types: ['TSK', 'CH', 'F2F'] });
-        setSort('openForRegistration', 'startDate');
-      } else {
-        setSort('openForRegistration', 'updatedBy');
-        setFilterState({ ..._.clone(filterState), types });
-      }
+    if (recommendedToggle) {
+      types = [...types, 'REC'];
     } else {
       types = types.filter(type => type !== 'REC');
-      setFilterState({ ..._.clone(filterState), types });
-      setSort('openForRegistration', 'startDate');
     }
+
+    setFilterState({ ..._.clone(filterState), types });
+    setSort('openForRegistration', 'startDate');
   };
 
   const recommendedCheckboxTip = (
@@ -462,24 +478,7 @@ export default function FiltersPanel({
                             checked={filterState.types.includes(option.value)}
                             onChange={e => handleTypeChange(option, e)}
                           />
-                          {
-                            option.label === 'Recommended'
-                              ? (
-                                <label styleName="checkbox-label" htmlFor={option.label}>
-                                  <Tooltip
-                                    id="recommended-tip"
-                                    content={recommendedCheckboxTip}
-                                    className={style['tooltip-overlay']}
-                                    trigger={['hover', 'focus']}
-                                  >
-                                    {option.label}
-                                  </Tooltip>
-
-                                </label>
-                              )
-
-                              : <label styleName="checkbox-label" htmlFor={option.label}>{option.label}</label>
-                          }
+                          <label styleName="checkbox-label" htmlFor={option.label}>{option.label}</label>
                         </span>
                       ))
                   }
@@ -579,8 +578,41 @@ export default function FiltersPanel({
             </div>
           )
         }
+
+        {
+          isRecommendedChallengesVisible
+          && (
+            <div styleName="filter-row recommended-challenges-filter">
+              <span
+                styleName="filter-switch-with-label"
+                aria-label={`Recommended challenge toggle button pressed ${recommendedToggle ? 'On' : 'Off'}`}
+                role="switch"
+                aria-checked={recommendedToggle}
+              >
+                <SwitchWithLabel
+                  enabled={recommendedToggle}
+                  labelAfter="Recommended Challenges"
+                  onSwitch={onSwitchRecommendedChallenge}
+                />
+              </span>
+
+              <div styleName="recommended-challenge-tooltip">
+                <Tooltip
+                  id="recommended-tip"
+                  content={recommendedCheckboxTip}
+                  className={style['tooltip-overlay']}
+                  trigger={['hover', 'focus']}
+                >
+                  <i className="fa fa-info-cirle" aria-hidden="true" />
+                </Tooltip>
+              </div>
+            </div>
+          )
+        }
       </div>
 
+      <hr />
+
       <div styleName="buttons">
         <Button
           composeContextTheme={COMPOSE.SOFT}

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

@@ -1,3 +1,4 @@
+@import "../../../../../styles/awesome.css";
 @import '~styles/mixins';
 
 .uppercase {
@@ -285,7 +286,7 @@
           display: inline-block;
           line-height: 30px;
           flex: 1 0 auto;
-          min-width: calc(11% - 10px);
+          min-width: calc(33% - 10px);
 
           &:not(:last-child) {
             padding-right: 10px;
@@ -422,6 +423,15 @@
       }
     }
   }
+
+  .recommended-challenges-filter {
+    display: flex;
+    margin-bottom: 25px;
+
+    .recommended-challenge-tooltip {
+      margin: 3px 0 0 3px;
+    }
+  }
 }
 
 .tctooltiptext {

src/shared/reducers/challenge-listing/index.js

@@ -660,7 +660,7 @@ function onGetRecommendedChallengesDone(state, { error, payload }) {
     allRecommendedChallengesLoaded: challenges.length >= payload.meta.allRecommendedChallengesCount,
     meta: {
       ...state.meta,
-      allRecommendedChallengesCount: payload.meta.allRecommendedChallengesCount,
+      openChallengesCount: payload.meta.allRecommendedChallengesCount,
     },
   };
 }

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

@@ -275,7 +275,7 @@ export function isPastBucket(bucket) {
  * @param {Object} filterState current filter state
 */
 export function isRecommendedChallengeType(bucket, filterState) {
-  return bucket === 'openForRegistration' && filterState.types.length === 1 && filterState.types[0] === 'REC';
+  return bucket === 'openForRegistration' && filterState.types.includes('REC');
 }
 
 export default undefined;

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

@@ -33,3 +33,11 @@ export function phaseStartDate(phase) {
   // For all other cases, take the `actualStartDate` as phase is already started
   return new Date(phase.actualStartDate);
 }
+
+/**
+ * Calculate match percentage.
+ * @param {Float} score
+ */
+export function calculateScore(score) {
+  return Math.trunc(Math.abs(score + 1.0) * 100.0 / 2.0);
+}

src/styles/awesome.css

@@ -65,6 +65,10 @@
   content: "\f110";
 }
 
+.fa-info-cirle::before {
+  content: "\0024D8";
+}
+
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);