Ignore admin api errors + added relative time formatting

apps/comments-ui/src/App.js

@@ -69,10 +69,20 @@ export default class App extends React.Component {
             const {site, member} = await this.fetchApiData();
             const {comments, pagination} = await this.fetchComments();
             this.adminApi = this.setupAdminAPI();
-            const admin = await this.adminApi.getUser();
-            /* eslint-disable no-console */
-            console.log(admin);
-            /* eslint-enable no-console */
+
+            let admin = null;
+            try {
+                admin = await this.adminApi.getUser();
+
+                /* eslint-disable no-console */
+                console.log(admin);
+                /* eslint-enable no-console */
+            } catch (e) {
+                // Loading of admin failed. Could be not signed in, or a different error (not important)
+                // eslint-disable-next-line no-console
+                console.error(e);
+            }
+            
             const state = {
                 site,
                 member,

apps/comments-ui/src/components/Comment.js

@@ -1,4 +1,5 @@
 import Avatar from './Avatar';
+import {formatRelativeTime} from '../utils/helpers';
 
 function Comment(props) {
     const comment = props.comment;
@@ -13,7 +14,7 @@ function Comment(props) {
                     <h4 className="text-lg font-sans font-semibold mb-1">{comment.member.name}</h4>
                     {/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
                     <div className="text-sm text-neutral-400 font-sans font-normal">
-                        2 minutes ago
+                        {formatRelativeTime(comment.created_at)}
                     </div>
                 </div>
                 <div className="mb-4 font-sans leading-normal">

apps/comments-ui/src/utils/api.js

@@ -86,7 +86,8 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
                         bio: 'CEO',
                         name: 'Terry Korsgaard'
                     },
-                    html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis erat vitae diam gravida accumsan vitae quis nisl. Donec luctus laoreet mauris, nec posuere turpis accumsan in. Proin sagittis magna quis vulputate tempus.'
+                    html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis erat vitae diam gravida accumsan vitae quis nisl. Donec luctus laoreet mauris, nec posuere turpis accumsan in. Proin sagittis magna quis vulputate tempus.',
+                    created_at: '2022-07-05T13:33:00.284Z'
                 };
             });
 

apps/comments-ui/src/utils/helpers.js

@@ -29,3 +29,61 @@ export function isSentryEventAllowed({event: sentryEvent}) {
     const lastFileName = fileNames[fileNames.length - 1] || '';
     return lastFileName.includes('@tryghost/comments');
 }
+
+export function formatRelativeTime(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+
+    // Diff is in seconds
+    let diff = Math.round((now.getTime() - date.getTime()) / 1000);
+    if (diff < 5) {
+        return 'Just now';
+    }
+
+    if (diff < 60) {
+        return `${diff} seconds ago`;
+    }
+
+    // Diff in minutes
+    diff = diff / 60;
+    if (diff < 60) {
+        if (Math.floor(diff) === 1) {
+            return `One minute ago`;
+        }
+        return `${Math.floor(diff)} minutes ago`;
+    }
+
+    // First check for yesterday 
+    // (we ignore setting 'yesterday' if close to midnight and keep using minutes until 1 hour difference)
+    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+    if (date.getFullYear() === yesterday.getFullYear() && date.getMonth() === yesterday.getMonth() && date.getDate() === yesterday.getDate()) {
+        return 'Yesterday';
+    }
+
+    // Diff in hours
+    diff = diff / 60;
+    if (diff < 24) {
+        if (Math.floor(diff) === 1) {
+            return `One hour ago`;
+        }
+        return `${Math.floor(diff)} hours ago`;
+    }
+
+    // Diff in days
+    diff = diff / 24;
+    if (diff < 7) {
+        if (Math.floor(diff) === 1) {
+            // Special case, we should compare based on dates in the future instead
+            return `One day ago`;
+        }
+        return `${Math.floor(diff)} days ago`;
+    }
+
+    // Diff in weeks
+    diff = diff / 7;
+    if (Math.floor(diff) === 1) {
+        // Special case, we should compare based on dates in the future instead
+        return `One week ago`;
+    }
+    return `${Math.floor(diff)} weeks ago`;
+}