From 6e95c8b7a10e3467bfd2c3df84ccf886fe01ca5c Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Thu, 11 Mar 2021 14:57:25 +0000
Subject: [PATCH] feat(ui): add user ID to profile header

also adds some missing localized strings for the profile header
---
 .../UserProfile/ProfileHeader/index.tsx       | 24 +++++++++++++++++--
 src/i18n/locale/en.json                       |  3 +++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index 480db379..5cf9bd27 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -7,6 +7,10 @@ import Button from '../../Common/Button';
 const messages = defineMessages({
   settings: 'Edit Settings',
   profile: 'View Profile',
+  joindate: 'Joined {joindate}',
+  requests:
+    '{requestCount} {requestCount, plural, one {Request} other {Requests}}',
+  userid: 'User ID: {userid}',
 });
 
 interface ProfileHeaderProps {
@@ -21,6 +25,19 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   const intl = useIntl();
   const { user: loggedInUser, hasPermission } = useUser();
 
+  const subtextItems: React.ReactNode[] = [
+    intl.formatMessage(messages.joindate, {
+      joindate: intl.formatDate(user.createdAt),
+    }),
+    intl.formatMessage(messages.requests, {
+      requestCount: user.requestCount,
+    }),
+  ];
+
+  if (hasPermission(Permission.MANAGE_REQUESTS)) {
+    subtextItems.push(intl.formatMessage(messages.userid, { userid: user.id }));
+  }
+
   return (
     <div className="relative z-40 mt-6 mb-12 md:flex md:items-end md:justify-between md:space-x-5">
       <div className="flex items-end space-x-5 justify-items-end">
@@ -55,8 +72,11 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             )}
           </h1>
           <p className="text-sm font-medium text-gray-400">
-            Joined {intl.formatDate(user.createdAt)} |{' '}
-            {intl.formatNumber(user.requestCount)} Requests
+            {subtextItems.reduce((prev, curr) => (
+              <>
+                {prev} | {curr}
+              </>
+            ))}
           </p>
         </div>
       </div>
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 874e740c..a2c56a1f 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -705,8 +705,11 @@
   "components.UserList.userssaved": "Users saved!",
   "components.UserList.validationEmail": "You must provide a valid email address",
   "components.UserList.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
+  "components.UserProfile.ProfileHeader.joindate": "Joined {joindate}",
   "components.UserProfile.ProfileHeader.profile": "View Profile",
+  "components.UserProfile.ProfileHeader.requests": "{requestCount} {requestCount, plural, one {Request} other {Requests}}",
   "components.UserProfile.ProfileHeader.settings": "Edit Settings",
+  "components.UserProfile.ProfileHeader.userid": "User ID: {userid}",
   "components.UserProfile.UserSettings.UserGeneralSettings.accounttype": "Account Type",
   "components.UserProfile.UserSettings.UserGeneralSettings.admin": "Admin",
   "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",