From a362e0bbd72a8424d8d11051b0c1cab761aac97b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 14 Jul 2021 10:18:28 -0500
Subject: [PATCH] UserIndex: display account joined date when available

---
 app/soapbox/components/account.js        | 10 +++++++++-
 app/soapbox/features/admin/user_index.js |  2 +-
 app/soapbox/reducers/accounts.js         |  1 +
 app/styles/accounts.scss                 |  9 +++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/account.js b/app/soapbox/components/account.js
index bc236da85..189e90686 100644
--- a/app/soapbox/components/account.js
+++ b/app/soapbox/components/account.js
@@ -6,7 +6,9 @@ import { FormattedMessage } from 'react-intl';
 import Avatar from './avatar';
 import DisplayName from './display_name';
 import Permalink from './permalink';
+import Icon from './icon';
 import IconButton from './icon_button';
+import RelativeTimestamp from './relative_timestamp';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -41,6 +43,7 @@ class Account extends ImmutablePureComponent {
     actionIcon: PropTypes.string,
     actionTitle: PropTypes.string,
     onActionClick: PropTypes.func,
+    withDate: PropTypes.bool,
   };
 
   handleFollow = () => {
@@ -68,7 +71,7 @@ class Account extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me, withDate } = this.props;
 
     if (!account) {
       return <div />;
@@ -136,6 +139,11 @@ class Account extends ImmutablePureComponent {
             {buttons}
           </div>
         </div>
+
+        {withDate && (<div className='account__joined-at'>
+          <Icon id='calendar' />
+          <RelativeTimestamp timestamp={account.get('created_at')} />
+        </div>)}
       </div>
     );
   }
diff --git a/app/soapbox/features/admin/user_index.js b/app/soapbox/features/admin/user_index.js
index 8ae051080..3468e3036 100644
--- a/app/soapbox/features/admin/user_index.js
+++ b/app/soapbox/features/admin/user_index.js
@@ -117,7 +117,7 @@ class UserIndex extends ImmutablePureComponent {
           emptyMessage={intl.formatMessage(messages.empty)}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <AccountContainer key={id} id={id} withDate />,
           )}
         </ScrollableList>
       </Column>
diff --git a/app/soapbox/reducers/accounts.js b/app/soapbox/reducers/accounts.js
index e6896e003..b366702d2 100644
--- a/app/soapbox/reducers/accounts.js
+++ b/app/soapbox/reducers/accounts.js
@@ -138,6 +138,7 @@ const buildAccount = adminUser => fromJS({
   header_static: '',
   emojis: [],
   fields: [],
+  created_at: adminUser.get('created_at'),
   pleroma: {
     is_active: adminUser.get('is_active'),
     is_confirmed: adminUser.get('is_confirmed'),
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 2b6078a6e..35bc1aa3d 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -516,3 +516,12 @@ a .account__avatar {
     opacity: 1;
   }
 }
+
+.account__joined-at {
+  padding: 3px 2px 0 48px;
+  font-size: 14px;
+
+  i.fa-calendar {
+    padding-right: 5px;
+  }
+}