#399

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,4 +1,6 @@
-import DateTimeField from '@/components/common/DateTimeField'
+import { useEffect } from 'react'
+
+import DateTimeField, { toMinutePrecisionIsoUtc } from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
@@ -19,72 +21,92 @@ const PostOriginalCreatedTimeField: FC<Props> = (
       setOriginalCreatedFrom,
       originalCreatedBefore,
       setOriginalCreatedBefore,
-      errors }: Props) => (
-    <FormField label="オリジナルの作成日時" messages={errors}>
-      {({ describedBy, invalid }) => (
-	  <>
-	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
-	      <div className="min-w-0 flex-1">
-		<DateTimeField
-		    className="w-full"
-		    disabled={disabled ?? false}
-		    aria-describedby={describedBy}
-		    aria-invalid={invalid}
-		    invalid={invalid}
-		    value={originalCreatedFrom ?? undefined}
-		    onChange={setOriginalCreatedFrom}
-		    onBlur={ev => {
-		      const v = ev.target.value
-		      if (!(v))
-			return
+      errors }: Props) => {
+  useEffect (() => {
+    if (originalCreatedFrom == null)
+      return
 
-		      const d = new Date (v)
-		      if (d.getMinutes () === 0 && d.getHours () === 0)
-			d.setDate (d.getDate () + 1)
-		      else
-			d.setMinutes (d.getMinutes () + 1)
-		      setOriginalCreatedBefore (d.toISOString ())
-		    }}/>
-		以降
-	      </div>
-	      <div>
-		<Button
-		    type="button"
-		    className="bg-gray-600 text-white rounded"
-		    disabled={disabled}
-		    onClick={() => {
-		      setOriginalCreatedFrom (null)
-		    }}>
-		  リセット
-		</Button>
-	      </div>
-	    </div>
+    const normalised = toMinutePrecisionIsoUtc (originalCreatedFrom)
+    if (normalised !== originalCreatedFrom)
+      setOriginalCreatedFrom (normalised)
+  }, [originalCreatedFrom, setOriginalCreatedFrom])
 
-	    <div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
-	      <div className="min-w-0 flex-1">
-		<DateTimeField
-		    className="w-full"
-		    disabled={disabled}
-		    aria-describedby={describedBy}
-		    aria-invalid={invalid}
-		    invalid={invalid}
-		    value={originalCreatedBefore ?? undefined}
-		    onChange={setOriginalCreatedBefore}/>
-		より前
-	      </div>
-	      <div>
-		<Button
-		    type="button"
-		    className="bg-gray-600 text-white rounded"
-		    disabled={disabled}
-		    onClick={() => {
-		      setOriginalCreatedBefore (null)
-		    }}>
-		  リセット
-		</Button>
-	      </div>
-	    </div>
-	  </>)}
-    </FormField>)
+  useEffect (() => {
+    if (originalCreatedBefore == null)
+      return
+
+    const normalised = toMinutePrecisionIsoUtc (originalCreatedBefore)
+    if (normalised !== originalCreatedBefore)
+      setOriginalCreatedBefore (normalised)
+  }, [originalCreatedBefore, setOriginalCreatedBefore])
+
+  return (
+      <FormField label="オリジナルの作成日時" messages={errors}>
+	  {({ describedBy, invalid }) => (
+	      <>
+		<div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
+		  <div className="min-w-0 flex-1">
+		    <DateTimeField
+			className="w-full"
+			disabled={disabled ?? false}
+			aria-describedby={describedBy}
+			aria-invalid={invalid}
+			invalid={invalid}
+			value={originalCreatedFrom ?? undefined}
+			onChange={setOriginalCreatedFrom}
+			onBlur={ev => {
+			  const v = ev.target.value
+			  if (!(v))
+			    return
+
+			  const d = new Date (v)
+			  if (d.getMinutes () === 0 && d.getHours () === 0)
+			    d.setDate (d.getDate () + 1)
+			  else
+			    d.setMinutes (d.getMinutes () + 1)
+			  setOriginalCreatedBefore (toMinutePrecisionIsoUtc (d.toISOString ()))
+			}}/>
+		    以降
+		  </div>
+		  <div>
+		    <Button
+			type="button"
+			className="bg-gray-600 text-white rounded"
+			disabled={disabled}
+			onClick={() => {
+			  setOriginalCreatedFrom (null)
+			}}>
+		      リセット
+		    </Button>
+		  </div>
+		</div>
+
+		<div className="my-1 flex flex-col gap-2 sm:flex-row sm:items-start">
+		  <div className="min-w-0 flex-1">
+		    <DateTimeField
+			className="w-full"
+			disabled={disabled}
+			aria-describedby={describedBy}
+			aria-invalid={invalid}
+			invalid={invalid}
+			value={originalCreatedBefore ?? undefined}
+			onChange={setOriginalCreatedBefore}/>
+		    より前
+		  </div>
+		  <div>
+		    <Button
+			type="button"
+			className="bg-gray-600 text-white rounded"
+			disabled={disabled}
+			onClick={() => {
+			  setOriginalCreatedBefore (null)
+			}}>
+		      リセット
+		    </Button>
+		  </div>
+		</div>
+	      </>)}
+      </FormField>)
+}
 
 export default PostOriginalCreatedTimeField