toLocaleString all the things (#2473)

Automattic · Nov 17, 2020 · 3a535f2 · 3a535f2
1 parent d835ed3
commit 3a535f2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/lib/components/last-sync-time/index.tsx b/lib/components/last-sync-time/index.tsx
@@ -17,7 +17,13 @@ type Props = StateProps;
 export const LastSyncTime: FunctionComponent<Props> = ({ lastUpdated }) =>
   'undefined' !== typeof lastUpdated ? (
     <time dateTime={new Date(lastUpdated).toISOString()}>
-      {new Date(lastUpdated).toLocaleString()}
+      {new Date(lastUpdated).toLocaleString([], {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+      })}
     </time>
   ) : (
     <span />

diff --git a/lib/note-info/index.tsx b/lib/note-info/index.tsx
@@ -48,9 +48,10 @@ export class NoteInfo extends Component<Props> {
 
   render() {
     const { isMarkdown, isPinned, noteId, note } = this.props;
-    const formattedDate =
-      note.modificationDate && formatTimestamp(note.modificationDate);
     const isPublished = includes(note.systemTags, 'published');
+    const modificationDate = note.modificationDate
+      ? note.modificationDate * 1000
+      : null;
     const publishURL = this.getPublishURL(note.publishURL);
     const noteLink = this.getNoteLink(note, noteId);
 
@@ -67,12 +68,22 @@ export class NoteInfo extends Component<Props> {
               <CrossIcon />
             </button>
           </div>
-          {formattedDate && (
+          {modificationDate && (
             <p className="note-info-item">
               <span className="note-info-item-text">
                 <span className="note-info-name">Modified</span>
                 <br />
-                <span className="note-info-detail">{formattedDate}</span>
+                <span className="note-info-detail">
+                  <time dateTime={new Date(modificationDate).toISOString()}>
+                    {new Date(modificationDate).toLocaleString([], {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: 'numeric',
+                    })}
+                  </time>
+                </span>
               </span>
             </p>
           )}
@@ -176,10 +187,6 @@ export class NoteInfo extends Component<Props> {
     this.props.markdownNote(this.props.noteId, shouldEnableMarkdown);
 }
 
-function formatTimestamp(unixTime: number) {
-  return format(unixTime * 1000, 'MMM d, yyyy h:mm a');
-}
-
 // https://github.com/RadLikeWhoa/Countable
 function wordCount(content: string) {
   const matches = (content || '')

diff --git a/lib/note-info/reference.tsx b/lib/note-info/reference.tsx
@@ -29,25 +29,31 @@ type DispatchProps = {
 
 type Props = StateProps & DispatchProps;
 
-function formatTimestamp(unixTime: number) {
-  return format(unixTime * 1000, 'MM/dd/yyyy');
-}
-
 export const Reference: FunctionComponent<Props> = ({
   openNote,
   reference,
 }) => {
   if (!reference) {
     return null;
   }
-  const formattedDate =
-    reference.modificationDate && formatTimestamp(reference.modificationDate);
+
   return (
     <button className="reference-link" onClick={openNote}>
       <span className="reference-title note-info-name">{reference.title}</span>
       <span>
-        {reference.count} Reference{reference.count > 1 ? 's' : ''}, last
-        modified {formattedDate}
+        {reference.count} Reference{reference.count > 1 ? 's' : ''}
+        {reference.modificationDate && ', last modified '}
+        {reference.modificationDate && (
+          <time
+            dateTime={new Date(reference.modificationDate * 1000).toISOString()}
+          >
+            {new Date(reference.modificationDate * 1000).toLocaleString([], {
+              year: 'numeric',
+              month: 'numeric',
+              day: 'numeric',
+            })}
+          </time>
+        )}
       </span>
     </button>
   );

diff --git a/lib/note-info/style.scss b/lib/note-info/style.scss
@@ -83,6 +83,7 @@
     padding: 5px;
     text-align: left;
     text-decoration: none;
+    width: 100%;
 
     span {
       color: $studio-gray-50;