Changeset 7976 for sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/tracker.jsx

Timestamp:

12/17/2018 07:34:12 AM (7 years ago)

Author:

vedjain

Message:

WCPT Application Tracker: Multiple changes in rendering of application status report, see desc.

1. Add customRender option to allow specifying different render logic in application tracker report.
2. Send timestamp for lastUpdated column instead of humanize_time_diff. Move logic for humanize_time_diff to frontend, because its a very simple logic, and would make a easy fix for #2501
3. Use customRender option to display X time ago instead of absolute timestamp.

File:

• sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/tracker.jsx (modified) (1 diff)

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wcpt/javascript/tracker/source/tracker.jsx

@@ -7 +7 @@
 require( './style.scss' );
 
+/**
+ * Courtesy: https://stackoverflow.com/a/3177838/1845153
+ *
+ * Converts unix seconds into human readable time.
+ * Looks like exact javascript convert of WordPress's human_time_diff, except this always compares from current time, instead of getting two arguments.
+ *
+ * @param {int} date Unix timestamp date to compare from
+ *
+ * @returns {string} Human readable time ago
+ */
+const timeSince = ( date ) => {
+
+    const seconds = Math.floor( (new Date() / 1000 ) - date );
+
+    let interval = Math.floor(seconds / 31536000);
+
+    if (interval > 1) {
+        return interval + " years";
+    }
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1) {
+        return interval + " months";
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1) {
+        return interval + " days";
+    }
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1) {
+        return interval + " hours";
+    }
+    interval = Math.floor(seconds / 60);
+    if (interval > 1) {
+        return interval + " minutes";
+    }
+    return Math.floor(seconds) + " seconds";
+};
+
+/**
+ * Custom render function for lastUpdatedColumn. Will display X time ago instead of unix timestamp
+ */
+const renderHumanizeTime = ( time ) => {
+    return timeSince( time ) + " ago";
+};
+
+
 ReactDOM.render(
     <FilterableTable
         initialSortField = { wpcApplicationTracker.initialSortField }
         columns          = { wpcApplicationTracker.displayColumns }
+        customRender     = {
+            {
+                lastUpdate: renderHumanizeTime
+            }
+        }
     />,
     document.getElementById( 'wpc-application-tracker' )