From c7d2dee162df28e04976018da1ebde82b1a5b9b1 Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Wed, 3 May 2023 18:57:24 +0100
Subject: [PATCH] Add "Join Date" to profile, fixes #54

---
 src/intl/en-US.js                              |  2 ++
 .../profile/AccountProfileDetails.html         | 18 +++++++++++++++++-
 src/routes/_utils/formatters.js                |  6 ++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index e952f4ee..dd4db1b0 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -296,9 +296,11 @@ export default {
   statuses: 'Toots',
   follows: 'Follows',
   followers: 'Followers',
+  joined: 'Joined',
   moreOptions: 'More options',
   followersLabel: 'Followed by {count}',
   followingLabel: 'Follows {count}',
+  joinedLabel: 'Joined on {date}',
   followLabel: `Follow {requested, select,
     true {(follow requested)}
     other {}
diff --git a/src/routes/_components/profile/AccountProfileDetails.html b/src/routes/_components/profile/AccountProfileDetails.html
index c275da01..60de834d 100644
--- a/src/routes/_components/profile/AccountProfileDetails.html
+++ b/src/routes/_components/profile/AccountProfileDetails.html
@@ -1,5 +1,15 @@
 <h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
 <div class="account-profile-details">
+  <span class="account-profile-details-item"
+    aria-label={joinedLabel}
+  >
+    <span class="account-profile-details-item-datum">
+      {joinDate}
+    </span>
+    <span class="account-profile-details-item-title">
+      {intl.joined}
+    </span>
+  </span>
   <div class="account-profile-details-item">
     <span class="account-profile-details-item-datum">
       {numStatusesDisplay}
@@ -93,6 +103,7 @@
   import { LOCALE } from '../../_static/intl.js'
   import { formatIntl } from '../../_utils/formatIntl.js'
   import { thunk } from '../../_utils/thunk.js'
+  import { shortAbsoluteDateOnlyFormatter } from '../../_utils/formatters.js'
 
   const numberFormat = thunk(() => new Intl.NumberFormat(LOCALE))
 
@@ -114,7 +125,12 @@
       ),
       followingLabel: ({ numFollowing }) => (
         formatIntl('intl.followingLabel', { count: numFollowing })
-      )
+      ),
+      joinedLabel: ({ joinDate }) => (
+        formatIntl('intl.joinedLabel', { date: joinDate })
+      ),
+      createdAtDateTS: ({ account }) => new Date(account.created_at).getTime(),
+      joinDate: ({ createdAtDateTS }) => shortAbsoluteDateOnlyFormatter().format(createdAtDateTS)
     }
   }
 </script>
diff --git a/src/routes/_utils/formatters.js b/src/routes/_utils/formatters.js
index c8f07cfa..515c5357 100644
--- a/src/routes/_utils/formatters.js
+++ b/src/routes/_utils/formatters.js
@@ -42,3 +42,9 @@ export const dayOnlyAbsoluteDateFormatter = thunk(() => safeFormatter(new Intl.D
   month: 'short',
   day: 'numeric'
 })))
+
+export const shortAbsoluteDateOnlyFormatter = thunk(() => safeFormatter(new Intl.DateTimeFormat(LOCALE, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+})))