fix(app-headless-cms): ensure time value contains seconds (#4293)

webiny · Sep 25, 2024 · 98bc686 · 98bc686
1 parent 00db1aa
commit 98bc686
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 43 deletions.
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Input } from "./Input";
 import { Select } from "./Select";
 import { Grid, Cell } from "@webiny/ui/Grid";
@@ -8,7 +8,9 @@ import {
     DEFAULT_TIMEZONE,
     getCurrentDate,
     getCurrentLocalTime,
-    getCurrentTimeZone
+    getCurrentTimeZone,
+    getHHmmss,
+    getHHmm
 } from "./utils";
 import { CmsModelField } from "~/types";
 import { BindComponentRenderProp } from "@webiny/form";
@@ -37,11 +39,11 @@ const parseDateTime = (value?: string): Pick<State, "date"> & { rest: string } =
     };
 };
 
-const parseTime = (value?: string): Pick<State, "time" | "timezone"> => {
+const parseTime = (value?: string, defaultTimeZone?: string): Pick<State, "time" | "timezone"> => {
     if (!value) {
         return {
             time: "",
-            timezone: ""
+            timezone: defaultTimeZone || ""
         };
     }
     const sign = value.includes("+") ? "+" : "-";
@@ -62,20 +64,15 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
     const defaultTimeZone = getCurrentTimeZone() || DEFAULT_TIMEZONE;
 
     // "2020-05-18T09:00+10:00"
-    const initialValue = getDefaultFieldValue(field, bind, () => {
-        const date = new Date();
-        return `${getCurrentDate(date)}T${getCurrentLocalTime(date)}${defaultTimeZone}`;
-    });
-    const { date, rest } = parseDateTime(initialValue);
-    const { time, timezone = defaultTimeZone } = parseTime(rest);
+    const value =
+        bind.value ||
+        getDefaultFieldValue(field, bind, () => {
+            const date = new Date();
+            return `${getCurrentDate(date)}T${getCurrentLocalTime(date)}${defaultTimeZone}`;
+        });
 
-    const bindValue = bind.value || "";
-    useEffect(() => {
-        if (!date || !time || !timezone || bindValue === initialValue) {
-            return;
-        }
-        bind.onChange(initialValue);
-    }, [bindValue]);
+    const { date, rest } = parseDateTime(value);
+    const { time, timezone } = parseTime(rest, defaultTimeZone);
 
     const cellSize = trailingIcon ? 3 : 4;
 
@@ -93,11 +90,8 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                                 }
                                 return bind.onChange("");
                             }
-                            return bind.onChange(
-                                `${value}T${time || getCurrentLocalTime()}${
-                                    timezone || defaultTimeZone
-                                }`
-                            );
+
+                            return bind.onChange(`${value}T${getHHmmss(time)}${timezone}`);
                         }
                     }}
                     field={{
@@ -111,7 +105,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                 <Input
                     bind={{
                         ...bind,
-                        value: time,
+                        value: getHHmm(time),
                         onChange: async value => {
                             if (!value) {
                                 if (!bind.value) {
@@ -120,7 +114,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                                 return bind.onChange("");
                             }
                             return bind.onChange(
-                                `${date || getCurrentDate()}T${value}${timezone || defaultTimeZone}`
+                                `${date || getCurrentDate()}T${getHHmmss(value)}${timezone}`
                             );
                         }
                     }}
@@ -135,7 +129,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
             <Cell span={cellSize}>
                 <Select
                     label="Timezone"
-                    value={timezone || defaultTimeZone}
+                    value={timezone}
                     onChange={value => {
                         if (!value) {
                             if (!bind.value) {

diff --git a/...es/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx b/...es/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx
@@ -1,9 +1,11 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Grid, Cell } from "@webiny/ui/Grid";
 import {
     getCurrentDate,
     getCurrentLocalTime,
     getDefaultFieldValue,
+    getHHmm,
+    getHHmmss,
     RemoveFieldButton
 } from "./utils";
 import { Input } from "./Input";
@@ -55,21 +57,14 @@ export const DateTimeWithoutTimezone = ({
     trailingIcon
 }: DateTimeWithoutTimezoneProps) => {
     // "2020-05-18 09:00:00"
-    const initialValue = getDefaultFieldValue(field, bind, () => {
-        const date = new Date();
-        return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;
-    });
+    const value =
+        bind.value ||
+        getDefaultFieldValue(field, bind, () => {
+            const date = new Date();
+            return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;
+        });
 
-    const { date, time } = parseDateTime(initialValue);
-
-    const bindValue = bind.value || "";
-
-    useEffect(() => {
-        if (!date || !time || bindValue === initialValue) {
-            return;
-        }
-        bind.onChange(initialValue);
-    }, [bindValue]);
+    const { date, time } = parseDateTime(value);
 
     const cellSize = trailingIcon ? 5 : 6;
 
@@ -87,7 +82,7 @@ export const DateTimeWithoutTimezone = ({
                                 }
                                 return bind.onChange("");
                             }
-                            return bind.onChange(`${value} ${time || getCurrentLocalTime()}`);
+                            return bind.onChange(`${value} ${getHHmmss(time)}`);
                         }
                     }}
                     field={{
@@ -101,15 +96,15 @@ export const DateTimeWithoutTimezone = ({
                 <Input
                     bind={{
                         ...bind,
-                        value: time,
+                        value: getHHmm(time),
                         onChange: async value => {
                             if (!value) {
                                 if (!bind.value) {
                                     return;
                                 }
                                 return bind.onChange("");
                             }
-                            return bind.onChange(`${date || getCurrentDate()} ${value}`);
+                            return bind.onChange(`${date || getCurrentDate()} ${getHHmmss(value)}`);
                         }
                     }}
                     field={{

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx
@@ -58,6 +58,22 @@ export const getCurrentDate = (date?: Date): string => {
     return `${year}-${month}-${day}`;
 };
 
+export const getHHmm = (time?: string) => {
+    if (!time) {
+        return "";
+    }
+    const parsableTime = time || getCurrentLocalTime();
+    return parsableTime.split(":").slice(0, 2).join(":");
+};
+
+// Ensure a valid HH:mm:ss string, ending with :00 for seconds.
+export const getHHmmss = (time?: string) => {
+    const parsableTime = time || getCurrentLocalTime();
+    const parts = [...parsableTime.split(":").slice(0, 2), "00"];
+
+    return parts.join(":");
+};
+
 const deleteIconStyles = css({
     width: "100% !important",
     height: "100% !important",