feat(profile): Create top contributor badge (#17805)

common/app/routes/Profile/components/CamperHOC.jsx

@@ -14,14 +14,16 @@ const mapStateToProps = createSelector(
     location,
     points,
     picture,
-    about
+    about,
+    yearsTopContributor
   }) => ({
     name,
     username,
     location,
     points,
     picture,
-    about
+    about,
+    yearsTopContributor
   })
 );
 
@@ -35,7 +37,8 @@ const propTypes = {
   showLocation: PropTypes.bool,
   showName: PropTypes.bool,
   showPoints: PropTypes.bool,
-  username: PropTypes.string
+  username: PropTypes.string,
+  yearsTopContributor: PropTypes.array
 };
 
 function CamperHOC({
@@ -45,6 +48,7 @@ function CamperHOC({
   points,
   picture,
   about,
+  yearsTopContributor,
   showAbout,
   showLocation,
   showName,
@@ -60,6 +64,7 @@ function CamperHOC({
         picture={ picture }
         points={ showPoints ? points : null }
         username={ username }
+        yearsTopContributor={ yearsTopContributor }
       />
       <hr />
     </div>

common/app/routes/Profile/profile.less

@@ -21,7 +21,7 @@
   text-align: center;
 }
 
-.name, .location, .bio, .points {
+.name, .location, .bio, .points, .yearsTopContributor {
   font-size: 2rem;
   margin-bottom: 0;
 }

common/app/routes/Settings/components/Camper.jsx

@@ -10,12 +10,26 @@ const propTypes = {
   name: PropTypes.string,
   picture: PropTypes.string,
   points: PropTypes.number,
-  username: PropTypes.string
+  username: PropTypes.string,
+  yearsTopContributor: PropTypes.array
 };
 
 function pluralise(word, condition) {
   return condition ? word + 's' : word;
 }
+function joinArray(array) {
+  return array.reduce((string, item, index, array) => {
+    if (string.length > 0) {
+      if (index === array.length - 1) {
+        return `${string} and ${item}`;
+      } else {
+        return `${string}, ${item}`;
+      }
+    } else {
+      return item;
+    }
+  });
+}
 
 function Camper({
   name,
@@ -23,7 +37,8 @@ function Camper({
   location,
   points,
   picture,
-  about
+  about,
+  yearsTopContributor
 }) {
 
   return (
@@ -49,6 +64,13 @@ function Camper({
           </p>
         ) : null
       }
+      { yearsTopContributor.length > 0 &&
+        (
+          <p className='text-center yearsTopContributor'>
+            Top Contributor of { joinArray(yearsTopContributor) }
+          </p>
+        )
+      }
       <br/>
     </div>
   );

common/models/user.js

@@ -850,7 +850,8 @@ module.exports = function(User) {
       points,
       portfolio,
       streak,
-      username
+      username,
+      yearsTopContributor
     } = user;
     const {
       isLocked = true,
@@ -881,7 +882,8 @@ module.exports = function(User) {
       name: showName ? name : '',
       points: showPoints ? points : null,
       portfolio: showPortfolio ? portfolio : [],
-      streak: showHeatMap ? streak : {}
+      streak: showHeatMap ? streak : {},
+      yearsTopContributor: yearsTopContributor
     };
   }
 

common/models/user.json

@@ -206,6 +206,10 @@
       "type": "array",
       "default": []
     },
+    "yearsTopContributor": {
+      "type": "array",
+      "default": []
+    },
     "rand": {
       "type": "number",
       "index": true

server/utils/publicUserProps.js

@@ -35,7 +35,8 @@ export const publicUserProps = [
   'streak',
   'twitter',
   'username',
-  'website'
+  'website',
+  'yearsTopContributor'
 ];
 
 export const userPropsForSession = [