From 6f4753b7db1c0bc0334dfccbc2a6912fcc9e75bf Mon Sep 17 00:00:00 2001
From: Adam Butterworth <adamjbutterworth@gmail.com>
Date: Thu, 28 Feb 2019 16:08:09 -0500
Subject: [PATCH] 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            |  8 +++++--
 src/components/ProfilePage/DateJoined.jsx | 29 +++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ProfilePage/DateJoined.jsx

diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index a8a7054..4524518 100644
--- a/src/components/ProfilePage.jsx
+++ b/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,
   };
 };
 
diff --git a/src/components/ProfilePage/DateJoined.jsx b/src/components/ProfilePage/DateJoined.jsx
new file mode 100644
index 0000000..b2651d9
--- /dev/null
+++ b/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;