Refactor niceDateTime out

src/components/account.jsx

@@ -7,6 +7,7 @@ import { api } from '../utils/api';
 import emojifyText from '../utils/emojify-text';
 import enhanceContent from '../utils/enhance-content';
 import handleContentLinks from '../utils/handle-content-links';
+import niceDateTime from '../utils/nice-date-time';
 import shortenNumber from '../utils/shorten-number';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
@@ -205,11 +206,9 @@ function Account({ account, instance: propInstance, onClose }) {
                     <br />
                     <b>
                       <time datetime={createdAt}>
-                        {Intl.DateTimeFormat('en', {
+                        {niceDateTime(createdAt, {
-                          year: 'numeric',
+                          hideTime: true,
-                          month: 'short',
+                        })}
-                          day: 'numeric',
-                        }).format(new Date(createdAt))}
                       </time>
                     </b>
                   </span>

src/components/drafts.jsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useReducer, useState } from 'react';
 
 import { api } from '../utils/api';
 import db from '../utils/db';
+import niceDateTime from '../utils/nice-date-time';
 import states from '../utils/states';
 import { getCurrentAccountNS } from '../utils/store-utils';
 
@@ -81,19 +82,7 @@ function Drafts() {
                               <br />
                             </>
                           )}
-                          {Intl.DateTimeFormat('en', {
+                          {niceDateTime(updatedAtDate)}
-                            // Show year if not current year
-                            year:
-                              updatedAtDate.getFullYear() === currentYear
-                                ? undefined
-                                : 'numeric',
-                            month: 'short',
-                            day: 'numeric',
-                            weekday: 'short',
-                            hour: 'numeric',
-                            minute: '2-digit',
-                            second: '2-digit',
-                          }).format(updatedAtDate)}
                         </time>
                       </b>
                       <button

src/components/status.jsx

@@ -16,6 +16,7 @@ import { api } from '../utils/api';
 import enhanceContent from '../utils/enhance-content';
 import handleContentLinks from '../utils/handle-content-links';
 import htmlContentLength from '../utils/html-content-length';
+import niceDateTime from '../utils/nice-date-time';
 import shortenNumber from '../utils/shorten-number';
 import showToast from '../utils/show-toast';
 import states, { saveStatus, statusKey } from '../utils/states';
@@ -226,25 +227,8 @@ function Status({
   const textWeight = () =>
     Math.round((spoilerText.length + htmlContentLength(content)) / 140) || 1;
 
-  const locale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  const createdDateText = niceDateTime(createdAtDate);
-  const createdDateText = Intl.DateTimeFormat(locale, {
+  const editedDateText = editedAt && niceDateTime(editedAtDate);
-    // Show year if not current year
-    year: createdAtDate.getFullYear() === currentYear ? undefined : 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  }).format(createdAtDate);
-  const editedDateText =
-    editedAt &&
-    Intl.DateTimeFormat(locale, {
-      // Show year if not this year
-      year: editedAtDate.getFullYear() === currentYear ? undefined : 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-    }).format(editedAtDate);
 
   const isSizeLarge = size === 'l';
   // TODO: if visibility = private, only can boost own statuses
@@ -1271,21 +1255,7 @@ function EditedAtModal({
               return (
                 <li key={createdAt} class="history-item">
                   <h3>
-                    <time>
+                    <time>{niceDate(createdAtDate)}</time>
-                      {Intl.DateTimeFormat('en', {
-                        // Show year if not current year
-                        year:
-                          createdAtDate.getFullYear() === currentYear
-                            ? undefined
-                            : 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                        weekday: 'short',
-                        hour: 'numeric',
-                        minute: '2-digit',
-                        second: '2-digit',
-                      }).format(createdAtDate)}
-                    </time>
                   </h3>
                   <Status
                     status={status}

src/pages/notifications.jsx

@@ -13,6 +13,7 @@ import NameText from '../components/name-text';
 import RelativeTime from '../components/relative-time';
 import Status from '../components/status';
 import { api } from '../utils/api';
+import niceDateTime from '../utils/nice-date-time';
 import states, { saveStatus } from '../utils/states';
 import store from '../utils/store';
 import useScroll from '../utils/useScroll';
@@ -213,15 +214,9 @@ function Notifications() {
               const heading =
                 notificationDay.toDateString() === yesterdayDate.toDateString()
                   ? 'Yesterday'
-                  : Intl.DateTimeFormat('en', {
+                  : niceDate(currentDay, {
-                      // Show year if not current year
+                      hideTime: true,
-                      year:
+                    });
-                        currentDay.getFullYear() === todayDate.getFullYear()
-                          ? undefined
-                          : 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                    }).format(currentDay);
               return (
                 <>
                   {differentDay && <h2 class="timeline-header">{heading}</h2>}

src/utils/nice-date-time.js

@@ -0,0 +1,19 @@
+function niceDateTime(date, { hideTime } = {}) {
+  if (!(date instanceof Date)) {
+    date = new Date(date);
+  }
+  const currentYear = new Date().getFullYear();
+  const locale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  const dateText = Intl.DateTimeFormat(locale, {
+    // Show year if not current year
+    year: date.getFullYear() === currentYear ? undefined : 'numeric',
+    month: 'short',
+    day: 'numeric',
+    // Hide time if requested
+    hour: hideTime ? undefined : 'numeric',
+    minute: hideTime ? undefined : 'numeric',
+  }).format(date);
+  return dateText;
+}
+
+export default niceDateTime;