Merge branch 'change-date-format' into 'develop'

Change date format globally to use 12-hr format

See merge request soapbox-pub/soapbox!1836

app/soapbox/components/announcements/announcement.tsx

@@ -34,22 +34,23 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
         <Text theme='muted'>
           <FormattedDate
             value={startsAt}
-            hour12={false}
+            hour12
             year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
             month='short'
             day='2-digit'
-            hour={skipTime ? undefined : '2-digit'} minute={skipTime ? undefined : '2-digit'}
+            hour={skipTime ? undefined : 'numeric'}
+            minute={skipTime ? undefined : '2-digit'}
           />
           {' '}
           -
           {' '}
           <FormattedDate
             value={endsAt}
-            hour12={false}
+            hour12
             year={(skipYear || endsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
             month={skipEndDate ? undefined : 'short'}
             day={skipEndDate ? undefined : '2-digit'}
-            hour={skipTime ? undefined : '2-digit'}
+            hour={skipTime ? undefined : 'numeric'}
             minute={skipTime ? undefined : '2-digit'}
           />
         </Text>

app/soapbox/components/relative-timestamp.tsx

@@ -17,11 +17,11 @@ const messages = defineMessages({
 });
 
 const dateFormatOptions: FormatDateOptions = {
-  hour12: false,
+  hour12: true,
   year: 'numeric',
   month: 'short',
   day: '2-digit',
-  hour: '2-digit',
+  hour: 'numeric',
   minute: '2-digit',
 };
 
@@ -32,8 +32,8 @@ const shortDateFormatOptions: FormatDateOptions = {
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
-const HOUR   = 1000 * 60 * 60;
+const HOUR = 1000 * 60 * 60;
-const DAY    = 1000 * 60 * 60 * 24;
+const DAY = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
@@ -170,12 +170,12 @@ class RelativeTimestamp extends React.Component<RelativeTimestampProps, Relative
       clearTimeout(this._timer);
     }
 
-    const { timestamp }  = this.props;
+    const { timestamp } = this.props;
-    const delta          = (new Date(timestamp)).getTime() - this.state.now;
+    const delta = (new Date(timestamp)).getTime() - this.state.now;
-    const unitDelay      = getUnitDelay(selectUnits(delta));
+    const unitDelay = getUnitDelay(selectUnits(delta));
-    const unitRemainder  = Math.abs(delta % unitDelay);
+    const unitRemainder = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
 
     this._timer = setTimeout(() => {
       this.setState({ now: Date.now() });

app/soapbox/features/admin/moderation_log.tsx

@@ -32,7 +32,7 @@ const ModerationLog = () => {
         setIsLoading(false);
         setLastPage(1);
       })
-      .catch(() => {});
+      .catch(() => { });
   }, []);
 
   const handleLoadMore = () => {
@@ -43,7 +43,7 @@ const ModerationLog = () => {
       .then(() => {
         setIsLoading(false);
         setLastPage(page);
-      }).catch(() => {});
+      }).catch(() => { });
   };
 
   return (
@@ -62,11 +62,11 @@ const ModerationLog = () => {
             <div className='logentry__timestamp'>
               <FormattedDate
                 value={new Date(item.time * 1000)}
-                hour12={false}
+                hour12
                 year='numeric'
                 month='short'
                 day='2-digit'
-                hour='2-digit'
+                hour='numeric'
                 minute='2-digit'
               />
             </div>

app/soapbox/features/auth_token_list/index.tsx

@@ -31,11 +31,11 @@ const AuthToken: React.FC<IAuthToken> = ({ token }) => {
           <Text size='sm' theme='muted'>
             <FormattedDate
               value={new Date(token.valid_until)}
-              hour12={false}
+              hour12
               year='numeric'
               month='short'
               day='2-digit'
-              hour='2-digit'
+              hour='numeric'
               minute='2-digit'
             />
           </Text>
@@ -51,7 +51,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token }) => {
   );
 };
 
-const AuthTokenList: React.FC = () =>{
+const AuthTokenList: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const tokens = useAppSelector(state => state.security.get('tokens').reverse());

app/soapbox/features/status/components/detailed-status.tsx

@@ -108,7 +108,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             <span>
               <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
                 <Text tag='span' theme='muted' size='sm'>
-                  <FormattedDate value={new Date(actualStatus.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+                  <FormattedDate value={new Date(actualStatus.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
                 </Text>
               </a>
 
@@ -122,7 +122,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
                     tabIndex={0}
                   >
                     <Text tag='span' theme='muted' size='sm'>
-                      <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} />
+                      <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: true, month: 'short', day: '2-digit', hour: 'numeric', minute: '2-digit' }) }} />
                     </Text>
                   </div>
                 </>

app/soapbox/features/ui/components/compare_history_modal.tsx

@@ -79,7 +79,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
               )}
 
               <Text align='right' tag='span' theme='muted' size='sm'>
-                <FormattedDate value={new Date(version.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+                <FormattedDate value={new Date(version.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
               </Text>
             </div>
           );

app/soapbox/features/ui/components/profile_fields_panel.tsx

@@ -22,8 +22,8 @@ const dateFormatOptions: FormatDateOptions = {
   month: 'short',
   day: 'numeric',
   year: 'numeric',
-  hour12: false,
+  hour12: true,
-  hour: '2-digit',
+  hour: 'numeric',
   minute: '2-digit',
 };