WIP: Reuse DateTimeSelector on IpaCalendar

Signed-off-by: Carla Martinez <carlmart@redhat.com>
freeipa · Jan 11, 2024 · 5914a0d · 5914a0d
1 parent 3d328f9
commit 5914a0d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 114 deletions.
diff --git a/src/components/Form/DateTimeSelector.tsx b/src/components/Form/DateTimeSelector.tsx
@@ -12,13 +12,16 @@ import {
   parseFullDateStringToUTCFormat,
   toGeneralizedTime,
 } from "src/utils/utils";
+import { IPAObject, updateIpaObject } from "src/utils/ipaObjectUtils";
 
 interface PropsToDateTimeSelector {
   timeValue: string; // Generalized time format ('YYYYMMDDHHMMSSZ')
-  setTimeValue: (timeValue: string) => void;
+  setTimeValue?: (timeValue: string) => void;
   name: string;
   ariaLabel?: string;
   isDisabled?: boolean;
+  ipaObject?: Record<string, unknown>;
+  onChange?: (ipaObject: IPAObject) => void;
 }
 
 const DateTimeSelector = (props: PropsToDateTimeSelector) => {
@@ -54,7 +57,15 @@ const DateTimeSelector = (props: PropsToDateTimeSelector) => {
       ) {
         setValueDate(newFromDate);
         // Parse to generalized format
-        props.setTimeValue(toGeneralizedTime(newFromDate));
+        if (props.setTimeValue !== undefined) {
+          props.setTimeValue(toGeneralizedTime(newFromDate));
+        }
+      }
+      // Update 'ipaObject' with the new date
+      // - Parse to generalized format (to return to the "user_mod" API call)
+      if (props.ipaObject !== undefined && props.onChange !== undefined) {
+        const LDAPDate: string = toGeneralizedTime(newFromDate);
+        updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name);
       }
     }
   };
@@ -70,7 +81,16 @@ const DateTimeSelector = (props: PropsToDateTimeSelector) => {
 
     setValueDate(updatedFromDate);
     // Parse to generalized format
-    props.setTimeValue(toGeneralizedTime(updatedFromDate));
+    if (props.setTimeValue !== undefined) {
+      props.setTimeValue(toGeneralizedTime(updatedFromDate));
+    }
+
+    // Update 'ipaObject' with the new date
+    // - Parse to generalized format (to return to the "user_mod" API call)
+    if (props.ipaObject !== undefined && props.onChange !== undefined) {
+      const LDAPDate = toGeneralizedTime(updatedFromDate);
+      updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name);
+    }
   };
 
   // Parse the current date into 'HH:MM' format

diff --git a/src/components/Form/IpaCalendar.tsx b/src/components/Form/IpaCalendar.tsx
@@ -1,12 +1,4 @@
 import React from "react";
-// PatternFly
-import {
-  DatePicker,
-  InputGroup,
-  TimePicker,
-  isValidDate,
-  InputGroupItem,
-} from "@patternfly/react-core";
 // Utils
 import {
   parseFullDateStringToUTCFormat,
@@ -17,9 +9,10 @@ import {
   IPAParamDefinition,
   ParamProperties,
   getParamProperties,
-  updateIpaObject,
 } from "src/utils/ipaObjectUtils";
 import { ParamMetadata } from "src/utils/datatypes/globalDataTypes";
+// Components
+import DateTimeSelector from "./DateTimeSelector";
 
 export interface DateParam {
   __datetime__: string;
@@ -62,113 +55,24 @@ function getParamPropertiesDateTime(
   };
 }
 
-function cloneDate(date: Date): Date {
-  return parseFullDateStringToUTCFormat(toGeneralizedTime(date)) as Date;
-}
-
 const IpaCalendar = (props: IPAParamDefinition) => {
   const { readOnly, value } = getParamPropertiesDateTime(props);
 
-  // On change date handler
-  const onDateChange = (
-    _event: React.FormEvent<HTMLInputElement>,
-    inputDate: string,
-    newFromDate: Date | undefined
-  ) => {
-    if (newFromDate !== undefined) {
-      if (
-        isValidDate(newFromDate) &&
-        inputDate === yyyyMMddFormat(newFromDate)
-      ) {
-        if (value) {
-          newFromDate.setHours(value.getHours());
-          newFromDate.setMinutes(value.getMinutes());
-        }
-        // Update 'ipaObject' with the new date
-        // - Parse to generalized format (to return to the "user_mod" API call)
-        if (props.ipaObject !== undefined && props.onChange !== undefined) {
-          const LDAPDate: string = toGeneralizedTime(newFromDate);
-          updateIpaObject(
-            props.ipaObject,
-            props.onChange,
-            LDAPDate,
-            props.name
-          );
-        }
-      }
-    }
-  };
-
-  // On change time handler
-  const onTimeChange = (_event, time, hour, minute) => {
-    // Assume inital data is null
-    // If the date is empty, create a new one with the current time
-    let updatedFromDate: Date = new Date();
-    if (value && isValidDate(value)) {
-      updatedFromDate = cloneDate(value);
-    }
-    updatedFromDate.setHours(hour);
-    updatedFromDate.setMinutes(minute);
-
-    // Update 'ipaObject' with the new date
-    // - Parse to generalized format (to return to the "user_mod" API call)
-    if (props.ipaObject !== undefined && props.onChange !== undefined) {
-      const LDAPDate = toGeneralizedTime(updatedFromDate);
-      updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name);
-    }
-  };
-
-  // Parse the current date into 'YYYY-MM-DD' format
-  const yyyyMMddFormat = (date: Date | null | undefined): string => {
-    if (date === undefined || date === null) return "";
-
-    // This convertion is needed to prevent any Date data type issues
-    const dt = new Date(date);
-    const year = dt.getFullYear();
-    const month = dt.getMonth() + 1;
-    const day = dt.getDate().toString().padStart(2, "0");
-
-    const res = year.toString() + "-" + month.toString() + "-" + day;
-    return res;
-  };
-
-  // Parse the current date into 'HH:MM' format
-  const hhMMFormat = (date: Date | null | undefined): string => {
-    if (date === undefined || date === null) return "";
-
-    // This convertion is needed to prevent any Date data type issues
-    const dt = new Date(date);
-    const hours = dt.getHours().toString().padStart(2, "0");
-    const minutes = dt.getMinutes().toString().padStart(2, "0");
-
-    const res = hours + ":" + minutes;
-    return res;
-  };
+  // Date-time selectors
+  const [time, setTime] = React.useState<string>(
+    value ? (toGeneralizedTime(value) as string) : ""
+  );
 
   return (
-    <InputGroup>
-      <InputGroupItem>
-        <DatePicker
-          name={"add-date-" + props.name}
-          value={yyyyMMddFormat(value)}
-          onChange={onDateChange}
-          aria-label="Kerberos principal expiration date"
-          placeholder="YYYY-MM-DD"
-          isDisabled={readOnly}
-        />
-      </InputGroupItem>
-      <InputGroupItem>
-        <TimePicker
-          name={"add-time-" + props.name}
-          time={hhMMFormat(value)}
-          aria-label="Kerberos principal expiration time"
-          onChange={onTimeChange}
-          placeholder="HH:MM"
-          is24Hour={true}
-          isDisabled={readOnly}
-        />
-      </InputGroupItem>
-    </InputGroup>
+    <DateTimeSelector
+      timeValue={time}
+      setTimeValue={setTime}
+      name={props.name}
+      ariaLabel="Kerberos principal expiration date"
+      isDisabled={readOnly}
+      ipaObject={props.ipaObject}
+      onChange={props.onChange}
+    />
   );
 };