chore(web): fix the date time component (#752)

Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Oct 23, 2023 · 615682e · 615682e
1 parent c1c3dee
commit 615682e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 import { styled } from "@reearth/services/theme";
 
@@ -13,8 +13,8 @@ export type Props = {
 };
 
 const DateTimeField: React.FC<Props> = ({ name, description, value, onChange }) => {
-  const [time, setTime] = useState<string>();
-  const [date, setDate] = useState<string>();
+  const [time, setTime] = useState<string>(value?.split(" ")[1] ?? "HH:MM:SS");
+  const [date, setDate] = useState<string>(value?.split(" ")[0] ?? "YYYY-MM-DD");
 
   const handleTimeChange = useCallback(
     (newValue: string | undefined) => {
@@ -36,19 +36,11 @@ const DateTimeField: React.FC<Props> = ({ name, description, value, onChange })
     [time, onChange],
   );
 
-  useEffect(() => {
-    if (value) {
-      const [dateString, timeString] = value.split(" ");
-      setTime(timeString);
-      setDate(dateString);
-    }
-  }, [value]);
-
   return (
     <Property name={name} description={description}>
       <Wrapper>
-        <TextInput type="date" value={value} onChange={handleDateChange} />
-        <TextInput type="time" value={value} onChange={handleTimeChange} />
+        <TextInput type="date" value={date} onChange={handleDateChange} />
+        <TextInput type="time" value={time} onChange={handleTimeChange} />
       </Wrapper>
     </Property>
   );

diff --git a/web/src/services/api/propertyApi/utils.ts b/web/src/services/api/propertyApi/utils.ts
@@ -279,6 +279,8 @@ export const toUi = (ui: PropertySchemaFieldUi | null | undefined): SchemaField[
       return "margin";
     case PropertySchemaFieldUi.Padding:
       return "padding";
+    case PropertySchemaFieldUi.Datetime:
+      return "datetime";
   }
   return undefined;
 };