time ago in words for in progress tab per harmeet feedback

spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx

@@ -0,0 +1,17 @@
+// @ts-ignore
+import { TimeAgo } from '../helpers/timeago';
+import { convertSecondsToFormattedDateTime } from '../helpers';
+
+type OwnProps = {
+  time_in_seconds: number;
+};
+
+export default function TableCellWithTimeAgoInWords({
+  time_in_seconds,
+}: OwnProps) {
+  return (
+    <td title={convertSecondsToFormattedDateTime(time_in_seconds) || '-'}>
+      {time_in_seconds ? TimeAgo.inWords(time_in_seconds) : '-'}
+    </td>
+  );
+}

spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx

@@ -10,6 +10,7 @@ import {
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
+import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 const paginationQueryParamPrefix = 'tasks_for_my_open_processes';
@@ -73,11 +74,9 @@ export default function MyOpenProcesses() {
               rowToUse.created_at_in_seconds
             ) || '-'}
           </td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.updated_at_in_seconds
-            ) || '-'}
-          </td>
+          <TableCellWithTimeAgoInWords
+            time_in_seconds={rowToUse.updated_at_in_seconds}
+          />
           <td>
             <Button
               variant="primary"

spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx

@@ -10,6 +10,7 @@ import {
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
+import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 
@@ -73,11 +74,9 @@ export default function TasksWaitingForMe() {
               rowToUse.created_at_in_seconds
             ) || '-'}
           </td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.updated_at_in_seconds
-            ) || '-'}
-          </td>
+          <TableCellWithTimeAgoInWords
+            time_in_seconds={rowToUse.updated_at_in_seconds}
+          />
           <td>
             <Button
               variant="primary"

spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx

@@ -10,6 +10,7 @@ import {
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
+import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 const paginationQueryParamPrefix = 'tasks_waiting_for_my_groups';
@@ -74,11 +75,9 @@ export default function TasksWaitingForMyGroups() {
               rowToUse.created_at_in_seconds
             ) || '-'}
           </td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.updated_at_in_seconds
-            ) || '-'}
-          </td>
+          <TableCellWithTimeAgoInWords
+            time_in_seconds={rowToUse.updated_at_in_seconds}
+          />
           <td>
             <Button
               variant="primary"

spiffworkflow-frontend/src/helpers/timeago.js

@@ -0,0 +1,58 @@
+// https://gist.github.com/caiotarifa/30ae974f2293c761f3139dd194abd9e5
+export const TimeAgo = (function () {
+  const self = {};
+
+  // Public Methods
+  self.locales = {
+    prefix: '',
+    sufix: 'ago',
+
+    seconds: 'less than a minute',
+    minute: 'about a minute',
+    minutes: '%d minutes',
+    hour: 'about an hour',
+    hours: 'about %d hours',
+    day: 'a day',
+    days: '%d days',
+    month: 'about a month',
+    months: '%d months',
+    year: 'about a year',
+    years: '%d years',
+  };
+
+  self.inWords = function (timeAgo) {
+    const milliseconds = timeAgo * 1000;
+    const seconds = Math.floor((new Date() - parseInt(milliseconds)) / 1000);
+    const separator = this.locales.separator || ' ';
+    let words = this.locales.prefix + separator;
+    let interval = 0;
+    const intervals = {
+      year: seconds / 31536000,
+      month: seconds / 2592000,
+      day: seconds / 86400,
+      hour: seconds / 3600,
+      minute: seconds / 60,
+    };
+
+    let distance = this.locales.seconds;
+
+    for (const key in intervals) {
+      interval = Math.floor(intervals[key]);
+
+      if (interval > 1) {
+        distance = this.locales[`${key}s`];
+        break;
+      } else if (interval === 1) {
+        distance = this.locales[key];
+        break;
+      }
+    }
+
+    distance = distance.replace(/%d/i, interval);
+    words += distance + separator + this.locales.sufix;
+
+    return words.trim();
+  };
+
+  return self;
+})();