Add "member since 2017" (#44)

* Add date joined

* Create a Date object to get the year

* Add date joined

* Create a Date object to get the year

* add i18n

* Update 18n key

src/components/ProfilePage.jsx

@@ -24,6 +24,7 @@ import SocialLinks from './ProfilePage/SocialLinks';
 import Bio from './ProfilePage/Bio';
 import Certificates from './ProfilePage/Certificates';
 import AgeMessage from './ProfilePage/AgeMessage';
+import DateJoined from './ProfilePage/DateJoined';
 
 export class ProfilePage extends React.Component {
   constructor(props) {
@@ -71,7 +72,7 @@ export class ProfilePage extends React.Component {
 
   render() {
     const {
-      profileImage, username, errors,
+      profileImage, username, dateJoined, errors,
     } = this.props;
 
     const commonFormProps = {
@@ -98,7 +99,7 @@ export class ProfilePage extends React.Component {
                 />
                 <div>
                   <h2 className="mb-0">{username}</h2>
-                  <p className="mb-0">Member since 2017</p>
+                  <DateJoined date={dateJoined} />
                 </div>
               </div>
             </Col>
@@ -137,6 +138,7 @@ ProfilePage.propTypes = {
 
   // Profile data
   username: PropTypes.string,
+  dateJoined: PropTypes.string,
   profileImage: PropTypes.string,
   accountPrivacy: PropTypes.string,
   certificates: PropTypes.arrayOf(PropTypes.shape({
@@ -187,6 +189,7 @@ ProfilePage.defaultProps = {
   visibility: {}, // eslint-disable-line
   yearOfBirth: null,
   requiresParentalConsent: null,
+  dateJoined: null,
 };
 
 const mapStateToProps = (state) => {
@@ -211,6 +214,7 @@ const mapStateToProps = (state) => {
     visibility: state.profilePage.preferences.visibility || {},
     yearOfBirth: state.profilePage.account.yearOfBirth,
     requiresParentalConsent: state.profilePage.account.requiresParentalConsent,
+    dateJoined: state.profilePage.account.dateJoined,
   };
 };
 

src/components/ProfilePage/DateJoined.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedDate } from 'react-intl';
+
+function DateJoined({ date }) {
+  if (date == null) return null;
+
+  return (
+    <FormattedMessage
+      id="profile.datejoined.member.since"
+      defaultMessage="Member since {year}"
+      description="A label for how long the user has been a member"
+      values={{
+        year: <FormattedDate value={new Date(date)} year="numeric" />,
+      }}
+      tagName="p"
+      className="mb-0"
+    />
+  );
+}
+
+DateJoined.propTypes = {
+  date: PropTypes.string,
+};
+DateJoined.defaultProps = {
+  date: null,
+};
+
+export default DateJoined;