[#363] Replace datetime number format with timestamp format

kbss-cvut · Oct 16, 2024 · 542f288 · 542f288
1 parent f95edc6
commit 542f288
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 50 deletions.
diff --git a/src/components/answer/DateTimeAnswer.jsx b/src/components/answer/DateTimeAnswer.jsx
@@ -4,28 +4,13 @@ import { FormGroup, Form } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { format, parse } from "date-fns";
 import FormUtils from "../../util/FormUtils";
-import Constants from "../../constants/Constants";
 import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import classNames from "classnames";
 
 const DateTimeAnswer = (props) => {
   const { componentsOptions } = useContext(ConfigurationContext);
   const [date, setDate] = useState(null);
-
-  useEffect(() => {
-    if (props.value) {
-      const parsedDate = parse(props.value, datePickerFormat, new Date());
-      if (!isNaN(parsedDate.getTime())) {
-        setDate(parsedDate);
-      } else {
-        console.error(
-          `Invalid date value ${props.value} of question ${props.question["@id"]}.`
-        );
-      }
-    } else {
-      setDate(null);
-    }
-  }, [props.value, datePickerFormat]);
+  const [errorMessage, setErrorMessage] = useState("");
 
   const dateFormat = FormUtils.resolveDateTimeFormat(
     props.question,
@@ -35,28 +20,38 @@ const DateTimeAnswer = (props) => {
 
   const isDate = FormUtils.isDate(props.question);
   const isTime = FormUtils.isTime(props.question);
-  const isTimestamp = FormUtils.isTimestamp(props.question);
-
-  // DatePicker does not know dateFormat "x", translate to datetime
-  const datePickerFormat =
-    dateFormat === "x"
-      ? componentsOptions.dateTimeAnswer.dateTimeFormat
-      : dateFormat;
-
-  const handleDateChange = (date) => {
-    setDate(date);
-    if (!date) {
-      props.onChange("");
-    }
+  const isTimestampFormat = FormUtils.isTimestamp(props.question);
 
-    let timeValue;
-    if (isTimestamp) {
-      timeValue = date.getTime();
-    } else if (dateFormat === Constants.DATETIME_NUMBER_FORMAT) {
-      timeValue = Number(date);
+  useEffect(() => {
+    const parsedDate = parseDate(props.value);
+    if (parsedDate) {
+      setDate(parsedDate);
     } else {
-      timeValue = format(date, dateFormat);
+      setDate(null);
+      setErrorMessage(
+        `Invalid date value ${props.value} of question ${props.question["@id"]}.`
+      );
+      console.error(errorMessage);
     }
+  }, [props.value, dateFormat]);
+
+  const parseDate = (value) => {
+    if (!value) return null;
+
+    const parsed = isTimestampFormat
+      ? new Date(value)
+      : parse(value, dateFormat, new Date());
+    return isNaN(parsed.getTime()) ? null : parsed;
+  };
+
+  const handleDateChange = (selectedDate) => {
+    setDate(selectedDate);
+    const timeValue = selectedDate
+      ? isTimestampFormat
+        ? selectedDate.getTime()
+        : format(selectedDate, dateFormat)
+      : "";
+
     props.onChange(timeValue);
   };
 
@@ -65,14 +60,14 @@ const DateTimeAnswer = (props) => {
       <Form.Label className={"w-100"}>{props.label}</Form.Label>
       <DatePicker
         selected={date}
-        placeholderText={datePickerFormat}
+        placeholderText={dateFormat}
         onChange={handleDateChange}
         showTimeSelect={!isDate}
         showTimeSelectOnly={isTime}
         timeFormat="HH:mm"
         timeIntervals={1}
         timeCaption="Time"
-        dateFormat={datePickerFormat}
+        dateFormat={dateFormat}
         className={classNames("form-control", props.validation.classname)}
         disabled={
           componentsOptions.readOnly || FormUtils.isDisabled(props.question)

diff --git a/src/util/FormUtils.js b/src/util/FormUtils.js
@@ -451,24 +451,22 @@ export default class FormUtils {
    * @return {*} Format from Configuration
    */
   static resolveDateTimeFormat(question, originalValue, options) {
-    const isNumber = typeof originalValue === "number";
     const isDate = FormUtils.isDate(question);
     const isTime = FormUtils.isTime(question);
     const isDatetime = FormUtils.isDateTime(question);
 
-    if (isNumber) {
-      return Constants.DATETIME_NUMBER_FORMAT;
-    }
-    if (isDate) {
-      return question[Constants.DATE_FORMAT] || options.dateFormat;
-    }
-    if (isTime) {
-      return question[Constants.TIME_FORMAT] || options.timeFormat;
-    }
-    if (isDatetime) {
-      return question[Constants.DATETIME_FORMAT] || options.dateTimeFormat;
+    switch (true) {
+      case isDate:
+        return question[Constants.DATE_FORMAT] || options.dateFormat;
+
+      case isTime:
+        return question[Constants.TIME_FORMAT] || options.timeFormat;
+
+      case isDatetime:
+        return question[Constants.DATETIME_FORMAT] || options.dateTimeFormat;
+      default:
+        return null;
     }
-    return null;
   }
 
   /**