feature/date-and-time-service-fe

spiffworkflow-frontend/src/components/ActiveUsers.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 
 import HttpService from '../services/HttpService';
 import { User } from '../interfaces';
-import { refreshAtInterval, REFRESH_TIMEOUT_SECONDS } from '../helpers';
+import { refreshAtInterval } from '../helpers';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 async function sha256(message: string) {
   // encode as UTF-8
@@ -48,7 +49,7 @@ export default function ActiveUsers() {
 
     return refreshAtInterval(
       15,
-      REFRESH_TIMEOUT_SECONDS,
+      DateAndTimeService.REFRESH_TIMEOUT_SECONDS,
       updateActiveUsers,
       unregisterUser
     );

spiffworkflow-frontend/src/components/MessageInstanceList.tsx

@@ -7,13 +7,13 @@ import { Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from './PaginationForTable';
 import ProcessBreadcrumb from './ProcessBreadcrumb';
 import {
-  convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
   modifyProcessIdentifierForPathParam,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { FormatProcessModelDisplayName } from './MiniComponents';
 import { MessageInstance } from '../interfaces';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 type OwnProps = {
   processInstanceId?: number;
@@ -128,7 +128,9 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
           </td>
           <td>{row.status}</td>
           <td>
-            {convertSecondsToFormattedDateTime(row.created_at_in_seconds)}
+            {DateAndTimeService.convertSecondsToFormattedDateTime(
+              row.created_at_in_seconds
+            )}
           </td>
         </tr>
       );

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -36,22 +36,13 @@ import {
   DATE_FORMAT_FOR_DISPLAY,
 } from '../config';
 import {
-  convertDateAndTimeStringsToSeconds,
-  convertDateObjectToFormattedHoursMinutes,
-  convertSecondsToFormattedDateString,
-  convertSecondsToFormattedDateTime,
-  convertSecondsToFormattedTimeHoursMinutes,
   getKeyByValue,
   getLastMilestoneFromProcessInstance,
   getPageInfoFromSearchParams,
   modifyProcessIdentifierForPathParam,
   refreshAtInterval,
-  REFRESH_INTERVAL_SECONDS,
-  REFRESH_TIMEOUT_SECONDS,
   titleizeString,
   truncateString,
-  formatDurationForDisplay,
-  formatDateTime,
 } from '../helpers';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 
@@ -86,6 +77,7 @@ import { Can } from '../contexts/Can';
 import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 import UserService from '../services/UserService';
 import Filters from './Filters';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 type OwnProps = {
   filtersEnabled?: boolean;
@@ -443,13 +435,15 @@ export default function ProcessInstanceListTable({
             const timeFunctionToCall =
               dateParametersToAlwaysFilterBy[reportFilter.field_name][1];
             if (reportFilter.field_value) {
-              const dateString = convertSecondsToFormattedDateString(
-                reportFilter.field_value as any
-              );
+              const dateString =
+                DateAndTimeService.convertSecondsToFormattedDateString(
+                  reportFilter.field_value as any
+                );
               dateFunctionToCall(dateString);
-              const timeString = convertSecondsToFormattedTimeHoursMinutes(
-                reportFilter.field_value as any
-              );
+              const timeString =
+                DateAndTimeService.convertSecondsToFormattedTimeHoursMinutes(
+                  reportFilter.field_value as any
+                );
               timeFunctionToCall(timeString);
             }
           }
@@ -566,8 +560,8 @@ export default function ProcessInstanceListTable({
     checkFiltersAndRun();
     if (autoReload) {
       clearRefreshRef.current = refreshAtInterval(
-        REFRESH_INTERVAL_SECONDS,
-        REFRESH_TIMEOUT_SECONDS,
+        DateAndTimeService.REFRESH_INTERVAL_SECONDS,
+        DateAndTimeService.REFRESH_TIMEOUT_SECONDS,
         checkFiltersAndRun
       );
       return clearRefreshRef.current;
@@ -627,19 +621,22 @@ export default function ProcessInstanceListTable({
   // with the use of the setErrorMessageSafely function. we are not sure why the context not
   // changing still causes things to rerender when we call its setter without our extra check.
   const calculateStartAndEndSeconds = (validate: boolean = true) => {
-    const startFromSeconds = convertDateAndTimeStringsToSeconds(
-      startFromDate,
-      startFromTime || '00:00:00'
-    );
-    const startToSeconds = convertDateAndTimeStringsToSeconds(
-      startToDate,
-      startToTime || '00:00:00'
-    );
-    const endFromSeconds = convertDateAndTimeStringsToSeconds(
-      endFromDate,
-      endFromTime || '00:00:00'
-    );
-    const endToSeconds = convertDateAndTimeStringsToSeconds(
+    const startFromSeconds =
+      DateAndTimeService.convertDateAndTimeStringsToSeconds(
+        startFromDate,
+        startFromTime || '00:00:00'
+      );
+    const startToSeconds =
+      DateAndTimeService.convertDateAndTimeStringsToSeconds(
+        startToDate,
+        startToTime || '00:00:00'
+      );
+    const endFromSeconds =
+      DateAndTimeService.convertDateAndTimeStringsToSeconds(
+        endFromDate,
+        endFromTime || '00:00:00'
+      );
+    const endToSeconds = DateAndTimeService.convertDateAndTimeStringsToSeconds(
       endToDate,
       endToTime || '00:00:00'
     );
@@ -872,7 +869,9 @@ export default function ProcessInstanceListTable({
             onChange={(dateChangeEvent: any) => {
               if (!initialDate && !initialTime) {
                 onChangeTimeFunction(
-                  convertDateObjectToFormattedHoursMinutes(new Date())
+                  DateAndTimeService.convertDateObjectToFormattedHoursMinutes(
+                    new Date()
+                  )
                 );
               }
               onChangeDateFunction(dateChangeEvent.srcElement.value);
@@ -1691,7 +1690,7 @@ export default function ProcessInstanceListTable({
   };
 
   const formatSecondsForDisplay = (_row: ProcessInstance, seconds: any) => {
-    return convertSecondsToFormattedDateTime(seconds) || '-';
+    return DateAndTimeService.convertSecondsToFormattedDateTime(seconds) || '-';
   };
   const defaultFormatter = (_row: ProcessInstance, value: any) => {
     return value;
@@ -1710,8 +1709,8 @@ export default function ProcessInstanceListTable({
       last_milestone_bpmn_name: formatLastMilestone,
     };
     const displayTypeFormatters: Record<string, any> = {
-      date_time: formatDateTime,
-      duration: formatDurationForDisplay,
+      date_time: DateAndTimeService.formatDateTime,
+      duration: DateAndTimeService.formatDurationForDisplay,
     };
     const columnAccessor = column.accessor as keyof ProcessInstance;
     const formatter = column.display_type

spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx

@@ -15,7 +15,6 @@ import { createSearchParams, Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from './PaginationForTable';
 import {
   getPageInfoFromSearchParams,
-  convertSecondsToFormattedDateTime,
   selectKeysFromSearchParams,
 } from '../helpers';
 import HttpService from '../services/HttpService';
@@ -32,6 +31,7 @@ import {
   childrenForErrorObject,
   errorForDisplayFromProcessInstanceErrorDetail,
 } from './ErrorDisplay';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 type OwnProps = {
   variant: string; // 'all' or 'for-me'
@@ -306,7 +306,11 @@ export default function ProcessInstanceLogList({
     }
 
     let timestampComponent = (
-      <td>{convertSecondsToFormattedDateTime(logEntry.timestamp)}</td>
+      <td>
+        {DateAndTimeService.convertSecondsToFormattedDateTime(
+          logEntry.timestamp
+        )}
+      </td>
     );
     if (logEntry.spiff_task_guid && logEntry.event_type !== 'task_cancelled') {
       timestampComponent = (
@@ -317,7 +321,9 @@ export default function ProcessInstanceLogList({
             to={`${processInstanceShowPageBaseUrl}/${logEntry.process_instance_id}/${logEntry.spiff_task_guid}`}
             title="View state when task was completed"
           >
-            {convertSecondsToFormattedDateTime(logEntry.timestamp)}
+            {DateAndTimeService.convertSecondsToFormattedDateTime(
+              logEntry.timestamp
+            )}
           </Link>
         </td>
       );

spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { TimeAgo } from '../helpers/timeago';
-import { convertSecondsToFormattedDateTime } from '../helpers';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 type OwnProps = {
   timeInSeconds: number;
@@ -16,7 +16,10 @@ export default function TableCellWithTimeAgoInWords({
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <td
-      title={convertSecondsToFormattedDateTime(timeInSeconds) || '-'}
+      title={
+        DateAndTimeService.convertSecondsToFormattedDateTime(timeInSeconds) ||
+        '-'
+      }
       onClick={onClick}
       onKeyDown={onKeyDown}
     >

spiffworkflow-frontend/src/components/TaskListTable.tsx

@@ -6,18 +6,16 @@ import { TimeAgo } from '../helpers/timeago';
 import UserService from '../services/UserService';
 import PaginationForTable from './PaginationForTable';
 import {
-  convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
   modifyProcessIdentifierForPathParam,
   refreshAtInterval,
-  REFRESH_INTERVAL_SECONDS,
-  REFRESH_TIMEOUT_SECONDS,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject, ProcessInstanceTask, Task } from '../interfaces';
 import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 import CustomForm from './CustomForm';
 import InstructionsForEndUser from './InstructionsForEndUser';
+import DateAndTimeService from '../services/DateAndTimeService';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 
@@ -100,8 +98,8 @@ export default function TaskListTable({
     getTasks();
     if (autoReload) {
       return refreshAtInterval(
-        REFRESH_INTERVAL_SECONDS,
-        REFRESH_TIMEOUT_SECONDS,
+        DateAndTimeService.REFRESH_INTERVAL_SECONDS,
+        DateAndTimeService.REFRESH_TIMEOUT_SECONDS,
         getTasks
       );
     }
@@ -288,7 +286,7 @@ export default function TaskListTable({
     if (showDateStarted) {
       rowElements.push(
         <td>
-          {convertSecondsToFormattedDateTime(
+          {DateAndTimeService.convertSecondsToFormattedDateTime(
             processInstanceTask.created_at_in_seconds
           ) || '-'}
         </td>

spiffworkflow-frontend/src/helpers.test.tsx

@@ -1,10 +1,8 @@
 import {
-  convertSecondsToFormattedDateString,
   isANumber,
   slugifyString,
   underscorizeString,
   recursivelyChangeNullAndUndefined,
-  formatDurationForDisplay,
 } from './helpers';
 
 test('it can slugify a string', () => {
@@ -19,11 +17,6 @@ test('it can underscorize a string', () => {
   );
 });
 
-test('it can keep the correct date when converting seconds to date', () => {
-  const dateString = convertSecondsToFormattedDateString(1666325400);
-  expect(dateString).toEqual('2022-10-21');
-});
-
 test('it can validate numeric values', () => {
   expect(isANumber('11')).toEqual(true);
   expect(isANumber('hey')).toEqual(false);
@@ -102,13 +95,3 @@ test('it can replace null values in object with undefined', () => {
   expect(result.contacts.awesome).toEqual(false);
   expect(result.contacts.info).toEqual('');
 });
-
-test('it can properly format a duration', () => {
-  expect(formatDurationForDisplay(null, '0')).toEqual('0s');
-  expect(formatDurationForDisplay(null, '60')).toEqual('1m');
-  expect(formatDurationForDisplay(null, '65')).toEqual('1m 5s');
-  expect(formatDurationForDisplay(null, 65)).toEqual('1m 5s');
-  expect(formatDurationForDisplay(null, 86500)).toEqual('1d 1m 40s');
-  expect(formatDurationForDisplay(null, 2629746)).toEqual('30d 10h 29m 6s');
-  expect(formatDurationForDisplay(null, 31536765)).toEqual('365d 12m 45s');
-});