From 2cdd0d0259a6c0a003de51be0f57bae20a7d86fd Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Fri, 25 Nov 2022 02:29:49 -0500
Subject: [PATCH] time ago in words for in progress tab per harmeet feedback

---
 .../TableCellWithTimeAgoInWords.tsx           | 17 ++++++
 .../components/TasksForMyOpenProcesses.tsx    |  9 ++-
 .../src/components/TasksWaitingForMe.tsx      |  9 ++-
 .../components/TasksWaitingForMyGroups.tsx    |  9 ++-
 spiffworkflow-frontend/src/helpers/timeago.js | 58 +++++++++++++++++++
 5 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx
 create mode 100644 spiffworkflow-frontend/src/helpers/timeago.js

diff --git a/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx b/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx
new file mode 100644
index 000000000..754c37fb5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
index 95e082e72..05121c861 100644
--- a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
+++ b/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"
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
index a3656bb34..e5504ff05 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
+++ b/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"
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
index edeb6b6bd..c27f1b21d 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
+++ b/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"
diff --git a/spiffworkflow-frontend/src/helpers/timeago.js b/spiffworkflow-frontend/src/helpers/timeago.js
new file mode 100644
index 000000000..fb36012ab
--- /dev/null
+++ b/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;
+})();