attempting to use date objects as the date states w/ burnettk

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -27,8 +27,11 @@ import {
 } from '@carbon/react';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
+  convertDateObjectToFormattedString,
   convertDateStringToSeconds,
-  convertSecondsToFormattedDate,
+  convertDateToSeconds,
+  convertSecondsToDateObject,
+  convertSecondsToFormattedDateString,
   convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
@@ -70,10 +73,13 @@ export default function ProcessInstanceListTable({
 
   const oneHourInSeconds = 3600;
   const oneMonthInSeconds = oneHourInSeconds * 24 * 30;
-  const [startFrom, setStartFrom] = useState<string>('');
+  const [startFrom, setStartFrom] = useState<Date | null | undefined | string>(
-  const [startTo, setStartTo] = useState<string>('');
+    null
-  const [endFrom, setEndFrom] = useState<string>('');
+  );
-  const [endTo, setEndTo] = useState<string>('');
+  const [startTo, setStartTo] = useState<Date | null>(null);
+  const [startFromString, setStartFromString] = useState<string>('');
+  const [endFrom, setEndFrom] = useState<Date | null>(null);
+  const [endTo, setEndTo] = useState<Date | null>(null);
   const [showFilterOptions, setShowFilterOptions] = useState<boolean>(false);
 
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
@@ -140,10 +146,11 @@ export default function ProcessInstanceListTable({
         const searchParamValue = searchParams.get(paramName);
         if (searchParamValue) {
           queryParamString += `&${paramName}=${searchParamValue}`;
-          const dateString = convertSecondsToFormattedDate(
+          const dateObject = convertSecondsToDateObject(
             searchParamValue as any
           );
-          functionToCall(dateString);
+          console.log('dateObject1', dateObject);
+          functionToCall(dateObject);
           setShowFilterOptions(true);
         }
       });
@@ -160,6 +167,10 @@ export default function ProcessInstanceListTable({
             const functionToCall = parametersToGetFromSearchParams[paramName];
             queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
             if (functionToCall !== null) {
+              console.log(
+                'searchParams.get(paramName)',
+                searchParams.get(paramName)
+              );
               functionToCall(searchParams.get(paramName) || '');
             }
             setShowFilterOptions(true);
@@ -223,45 +234,6 @@ export default function ProcessInstanceListTable({
     perPageOptions,
   ]);
 
-  useEffect(() => {
-    const filters = processInstanceFilters as any;
-    Object.keys(parametersToAlwaysFilterBy).forEach((paramName: string) => {
-      // @ts-expect-error TS(7053) FIXME:
-      const functionToCall = parametersToAlwaysFilterBy[paramName];
-      const paramValue = filters[paramName];
-      functionToCall('');
-      if (paramValue) {
-        const dateString = convertSecondsToFormattedDate(paramValue as any);
-        functionToCall(dateString);
-        setShowFilterOptions(true);
-      }
-    });
-
-    setProcessModelSelection(null);
-    processModelAvailableItems.forEach((item: any) => {
-      if (item.id === filters.process_model_identifier) {
-        setProcessModelSelection(item);
-      }
-    });
-
-    const processStatusSelectedArray: string[] = [];
-    if (filters.process_status) {
-      PROCESS_STATUSES.forEach((processStatusOption: any) => {
-        const regex = new RegExp(`\\b${processStatusOption}\\b`);
-        if (filters.process_status.match(regex)) {
-          processStatusSelectedArray.push(processStatusOption);
-        }
-      });
-      setShowFilterOptions(true);
-    }
-    setProcessStatusSelection(processStatusSelectedArray);
-  }, [
-    processInstanceFilters,
-    parametersToAlwaysFilterBy,
-    parametersToGetFromSearchParams,
-    processModelAvailableItems,
-  ]);
-
   // does the comparison, but also returns false if either argument
   // is not truthy and therefore not comparable.
   const isTrueComparison = (param1: any, operation: any, param2: any) => {
@@ -289,10 +261,10 @@ export default function ProcessInstanceListTable({
     );
     let queryParamString = `per_page=${perPage}&page=${page}&user_filter=true`;
 
-    const startFromSeconds = convertDateStringToSeconds(startFrom);
+    const startFromSeconds = convertDateToSeconds(startFrom);
-    const endFromSeconds = convertDateStringToSeconds(endFrom);
+    const endFromSeconds = convertDateToSeconds(endFrom);
-    const startToSeconds = convertDateStringToSeconds(startTo);
+    const startToSeconds = convertDateToSeconds(startTo);
-    const endToSeconds = convertDateStringToSeconds(endTo);
+    const endToSeconds = convertDateToSeconds(endTo);
     if (isTrueComparison(startFromSeconds, '>', startToSeconds)) {
       setErrorMessage({
         message: '"Start date from" cannot be after "start date to"',
@@ -346,8 +318,10 @@ export default function ProcessInstanceListTable({
     labelString: any,
     name: any,
     initialDate: any,
+    initialDateString: string,
     onChangeFunction: any
   ) => {
+    // value={convertDateObjectToFormattedString(initialDate)}
     return (
       <>
         <DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single">
@@ -360,9 +334,20 @@ export default function ProcessInstanceListTable({
             autocomplete="off"
             allowInput={false}
             onChange={(dateChangeEvent: any) => {
-              onChangeFunction(dateChangeEvent.srcElement.value);
+              let dateTime = new Date();
+              if (initialDate) {
+                dateTime = new Date(initialDate.getTime());
+              }
+
+              const [year, month, day] =
+                dateChangeEvent.srcElement.value.split('-');
+              dateTime.setDate(day);
+              dateTime.setMonth(month - 1);
+              // @ts-ignore setYear does exist on Date
+              dateTime.setYear(year);
+              onChangeFunction(dateTime);
             }}
-            value={initialDate}
+            value={initialDateString}
           />
         </DatePicker>
         <TimePicker
@@ -401,16 +386,17 @@ export default function ProcessInstanceListTable({
   const clearFilters = () => {
     setProcessModelSelection(null);
     setProcessStatusSelection([]);
-    setStartFrom('');
+    setStartFrom(null);
-    setStartTo('');
+    setStartTo(null);
-    setEndFrom('');
+    setEndFrom(null);
-    setEndTo('');
+    setEndTo(null);
   };
 
   const filterOptions = () => {
     if (!showFilterOptions) {
       return null;
     }
+    console.log('startFrom', startFrom);
     return (
       <>
         <Grid fullWidth className="with-bottom-margin">
@@ -431,17 +417,36 @@ export default function ProcessInstanceListTable({
               'Start date from',
               'start-from',
               startFrom,
+              startFromString,
               setStartFrom
             )}
           </Column>
           <Column md={4}>
-            {dateComponent('Start date to', 'start-to', startTo, setStartTo)}
+            {dateComponent(
+              'Start date to',
+              'start-to',
+              startTo,
+              startFromString,
+              setStartTo
+            )}
           </Column>
           <Column md={4}>
-            {dateComponent('End date from', 'end-from', endFrom, setEndFrom)}
+            {dateComponent(
+              'End date from',
+              'end-from',
+              endFrom,
+              startFromString,
+              setEndFrom
+            )}
           </Column>
           <Column md={4}>
-            {dateComponent('End date to', 'end-to', endTo, setEndTo)}
+            {dateComponent(
+              'End date to',
+              'end-to',
+              endTo,
+              startFromString,
+              setEndTo
+            )}
           </Column>
         </Grid>
         <Grid fullWidth className="with-bottom-margin">
@@ -587,6 +592,9 @@ export default function ProcessInstanceListTable({
   };
 
   if (pagination) {
+    setStartFromString(
+      convertDateObjectToFormattedString(startFrom as any) || ''
+    );
     // eslint-disable-next-line prefer-const
     let { page, perPage } = getPageInfoFromSearchParams(
       searchParams,

spiffworkflow-frontend/src/helpers.test.tsx

@@ -1,4 +1,4 @@
-import { convertSecondsToFormattedDate, slugifyString } from './helpers';
+import { convertSecondsToFormattedDateString, slugifyString } from './helpers';
 
 test('it can slugify a string', () => {
   expect(slugifyString('hello---world_ and then Some such-')).toEqual(
@@ -7,6 +7,6 @@ test('it can slugify a string', () => {
 });
 
 test('it can keep the correct date when converting seconds to date', () => {
-  const dateString = convertSecondsToFormattedDate(1666325400);
+  const dateString = convertSecondsToFormattedDateString(1666325400);
   expect(dateString).toEqual('2022-10-21');
 });

spiffworkflow-frontend/src/helpers.tsx

@@ -42,6 +42,13 @@ export const convertDateToSeconds = (
   return null;
 };
 
+export const convertDateObjectToFormattedString = (dateObject: Date) => {
+  if (dateObject) {
+    return format(dateObject, DATE_FORMAT);
+  }
+  return null;
+};
+
 export const convertStringToDate = (dateString: string) => {
   if (dateString) {
     // add midnight time to the date so it c uses the correct date
@@ -51,18 +58,25 @@ export const convertStringToDate = (dateString: string) => {
   return null;
 };
 
-export const convertSecondsToFormattedDateTime = (seconds: number) => {
+export const convertSecondsToDateObject = (seconds: number) => {
   if (seconds) {
-    const dateObject = new Date(seconds * 1000);
+    return new Date(seconds * 1000);
+  }
+  return null;
+};
+
+export const convertSecondsToFormattedDateTime = (seconds: number) => {
+  const dateObject = convertSecondsToDateObject(seconds);
+  if (dateObject) {
     return format(dateObject, DATE_TIME_FORMAT);
   }
   return null;
 };
 
-export const convertSecondsToFormattedDate = (seconds: number) => {
+export const convertSecondsToFormattedDateString = (seconds: number) => {
-  if (seconds) {
+  const dateObject = convertSecondsToDateObject(seconds);
-    const dateObject = new Date(seconds * 1000);
+  if (dateObject) {
-    return format(dateObject, DATE_FORMAT);
+    return convertDateObjectToFormattedString(dateObject);
   }
   return null;
 };

spiffworkflow-frontend/src/routes/MessageInstanceList.tsx

@@ -5,7 +5,7 @@ import { Link, useParams, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
-  convertSecondsToFormattedDate,
+  convertSecondsToFormattedDateString,
   getPageInfoFromSearchParams,
   modifyProcessModelPath,
   unModifyProcessModelPath,
@@ -68,7 +68,9 @@ export default function MessageInstanceList() {
           <td>{rowToUse.failure_cause || '-'}</td>
           <td>{rowToUse.status}</td>
           <td>
-            {convertSecondsToFormattedDate(rowToUse.created_at_in_seconds)}
+            {convertSecondsToFormattedDateString(
+              rowToUse.created_at_in_seconds
+            )}
           </td>
         </tr>
       );

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -6,7 +6,7 @@ import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
   getPageInfoFromSearchParams,
-  convertSecondsToFormattedDate,
+  convertSecondsToFormattedDateString,
   modifyProcessModelPath,
   unModifyProcessModelPath,
 } from '../helpers';
@@ -49,7 +49,7 @@ export default function ProcessInstanceLogList() {
               data-qa="process-instance-show-link"
               to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${rowToUse.process_instance_id}/${rowToUse.spiff_step}`}
             >
-              {convertSecondsToFormattedDate(rowToUse.timestamp)}
+              {convertSecondsToFormattedDateString(rowToUse.timestamp)}
             </Link>
           </td>
         </tr>