From 3c72c93a8dc4aab5e15db0ebf4b09aeae479e696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bu=C4=9Fra=20G=C3=BCnd=C3=BCz?=
 <38699522+bgrgndzz@users.noreply.github.com>
Date: Thu, 2 Aug 2018 18:39:51 +0300
Subject: [PATCH] feat(profile): Create top contributor badge (#17805)

---
 .../routes/Profile/components/CamperHOC.jsx   | 11 +++++---
 common/app/routes/Profile/profile.less        |  2 +-
 .../app/routes/Settings/components/Camper.jsx | 26 +++++++++++++++++--
 common/models/user.js                         |  6 +++--
 common/models/user.json                       |  4 +++
 server/utils/publicUserProps.js               |  3 ++-
 6 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/common/app/routes/Profile/components/CamperHOC.jsx b/common/app/routes/Profile/components/CamperHOC.jsx
index e4b4023bac..beadb648a2 100644
--- a/common/app/routes/Profile/components/CamperHOC.jsx
+++ b/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>
diff --git a/common/app/routes/Profile/profile.less b/common/app/routes/Profile/profile.less
index de1bb54db2..7c600634d2 100644
--- a/common/app/routes/Profile/profile.less
+++ b/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;
 }
diff --git a/common/app/routes/Settings/components/Camper.jsx b/common/app/routes/Settings/components/Camper.jsx
index 947249c426..ad8b0ebd13 100644
--- a/common/app/routes/Settings/components/Camper.jsx
+++ b/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>
   );
diff --git a/common/models/user.js b/common/models/user.js
index 00b60b0fe7..d0dff0432f 100644
--- a/common/models/user.js
+++ b/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
     };
   }
 
diff --git a/common/models/user.json b/common/models/user.json
index 67f554fcc9..3f636a9fa2 100644
--- a/common/models/user.json
+++ b/common/models/user.json
@@ -206,6 +206,10 @@
       "type": "array",
       "default": []
     },
+    "yearsTopContributor": {
+      "type": "array",
+      "default": []
+    },
     "rand": {
       "type": "number",
       "index": true
diff --git a/server/utils/publicUserProps.js b/server/utils/publicUserProps.js
index 726cbe2f04..85b9072a21 100644
--- a/server/utils/publicUserProps.js
+++ b/server/utils/publicUserProps.js
@@ -35,7 +35,8 @@ export const publicUserProps = [
   'streak',
   'twitter',
   'username',
-  'website'
+  'website',
+  'yearsTopContributor'
 ];
 
 export const userPropsForSession = [