add awardedAt date

Author: kkartunov

src/shared/components/ProfileBadgesPage/index.jsx

@@ -6,6 +6,7 @@ import { Modal } from 'topcoder-react-ui-kit';
 import IconClose from 'assets/images/tc-edu/icon-close-big.svg';
 import FallBackAwardIcon from 'assets/images/default-award.svg';
 import md from 'utils/markdown';
+import { format } from 'date-fns';
 import AwardModal from '../ProfilePage/Awards/AwardModal';
 
 import style from './styles.scss';
@@ -47,6 +48,10 @@ const ProfileBadges = ({ badges, handleParam }) => {
               if (description) {
                 description = md(description);
               }
+              let awardedAt = get(reward, 'awarded_at');
+              if (awardedAt) {
+                awardedAt = format(new Date(awardedAt), 'PPP');
+              }
 
               return (
                 <div
@@ -58,6 +63,7 @@ const ProfileBadges = ({ badges, handleParam }) => {
                       title,
                       description,
                       imageUrl,
+                      awardedAt,
                     });
                   }}
                 >

src/shared/components/ProfilePage/Awards/AwardModal/index.jsx

@@ -8,7 +8,7 @@ const AwatarModal = ({
   modalData,
 }) => {
   const {
-    title, description, imageUrl,
+    title, description, imageUrl, awardedAt,
   } = modalData;
 
   return (
@@ -25,6 +25,9 @@ const AwatarModal = ({
         <div styleName="title">
           <span>{title}</span>
         </div>
+        {
+          awardedAt && <div styleName="awardedAt">{`Awarded on ${awardedAt}`}</div>
+        }
 
         <div styleName="description">{description}</div>
 
@@ -41,6 +44,7 @@ AwatarModal.propTypes = {
   modalData: PT.shape(
     {
       title: PT.string,
+      awardedAt: PT.string,
       description: PT.string,
       imageUrl: PT.string,
     },

src/shared/components/ProfilePage/Awards/AwardModal/styles.scss

@@ -44,14 +44,24 @@
       }
     }
 
+    .awardedAt {
+      @include roboto-bold;
+
+      color: $listing-placeholder-gray;
+      font-size: 12px;
+      line-height: 16px;
+      text-transform: uppercase;
+      margin-top: 8px;
+    }
+
     .description {
       @include brackets-content;
 
       font-weight: 400;
       color: $tco-black;
       font-size: 16px;
       line-height: 24px;
-      margin-top: 10px;
+      margin-top: 16px;
     }
 
     @include xs-to-md {

src/shared/components/ProfilePage/Awards/index.jsx

@@ -5,6 +5,7 @@ import IconClose from 'assets/images/tc-edu/icon-close-big.svg';
 import _ from 'lodash';
 import md from 'utils/markdown';
 import { Link } from 'react-router-dom';
+import { format } from 'date-fns';
 
 import style from './styles.scss';
 import AwardBadge from './AwardBadge';
@@ -37,6 +38,10 @@ const Awards = ({ badges, info }) => {
               if (description) {
                 description = md(description);
               }
+              let awardedAt = _.get(reward, 'awarded_at');
+              if (awardedAt) {
+                awardedAt = format(new Date(awardedAt), 'PPP');
+              }
 
               return (
                 <AwardBadge
@@ -48,6 +53,7 @@ const Awards = ({ badges, info }) => {
                       title,
                       description,
                       imageUrl,
+                      awardedAt,
                     });
                   }}
                 />