diff --git a/reminder-dashboard/src/components/Reminder/TimeInput.tsx b/reminder-dashboard/src/components/Reminder/TimeInput.tsx index 823505e..f2e350f 100644 --- a/reminder-dashboard/src/components/Reminder/TimeInput.tsx +++ b/reminder-dashboard/src/components/Reminder/TimeInput.tsx @@ -16,28 +16,28 @@ export const TimeInput = ({ defaultValue, onInput }) => { const ref = useRef(null); const [timezone] = useTimezone(); - const [time, setTime] = useState( - defaultValue ? DateTime.fromISO(defaultValue, { zone: "UTC" }) : null, + const [localTime, setLocalTime] = useState( + defaultValue ? DateTime.fromISO(defaultValue, { zone: "UTC" }).setZone(timezone) : null, ); const updateTime = useCallback( (upd: TimeUpdate) => { if (upd === null) { - setTime(null); + setLocalTime(null); } - let newTime = time; + let newTime = localTime; if (newTime === null) { - newTime = DateTime.now().setZone("UTC"); + newTime = DateTime.now().setZone(timezone); } - setTime(newTime.setZone(timezone).set(upd).setZone("UTC")); + setLocalTime(newTime.set(upd)); }, - [time, timezone], + [localTime, timezone], ); useEffect(() => { - onInput(time?.setZone("UTC").toFormat("yyyy-LL-dd'T'HH:mm:ss")); - }, [time]); + onInput(localTime?.setZone("UTC").toFormat("yyyy-LL-dd'T'HH:mm:ss")); + }, [localTime]); const flash = useFlash(); @@ -51,14 +51,14 @@ export const TimeInput = ({ defaultValue, onInput }) => { let dt = DateTime.fromISO(pasteValue, { zone: timezone }); if (dt.isValid) { - setTime(dt); + setLocalTime(dt); return; } dt = DateTime.fromSQL(pasteValue); if (dt.isValid) { - setTime(dt); + setLocalTime(dt); return; } @@ -83,8 +83,8 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={4} placeholder="YYYY" value={ - time - ? time.setZone(timezone).year.toLocaleString("en-US", { + localTime + ? localTime.year.toLocaleString("en-US", { minimumIntegerDigits: 4, useGrouping: false, }) @@ -114,8 +114,8 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={2} placeholder="MM" value={ - time - ? time.setZone(timezone).month.toLocaleString("en-US", { + localTime + ? localTime.month.toLocaleString("en-US", { minimumIntegerDigits: 2, }) : "" @@ -144,10 +144,10 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={2} placeholder="DD" value={ - time - ? time - .setZone(timezone) - .day.toLocaleString("en-US", { minimumIntegerDigits: 2 }) + localTime + ? localTime.day.toLocaleString("en-US", { + minimumIntegerDigits: 2, + }) : "" } onBlur={(ev) => { @@ -173,10 +173,10 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={2} placeholder="hh" value={ - time - ? time - .setZone(timezone) - .hour.toLocaleString("en-US", { minimumIntegerDigits: 2 }) + localTime + ? localTime.hour.toLocaleString("en-US", { + minimumIntegerDigits: 2, + }) : "" } onBlur={(ev) => { @@ -203,8 +203,8 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={2} placeholder="mm" value={ - time - ? time.setZone(timezone).minute.toLocaleString("en-US", { + localTime + ? localTime.minute.toLocaleString("en-US", { minimumIntegerDigits: 2, }) : "" @@ -233,8 +233,8 @@ export const TimeInput = ({ defaultValue, onInput }) => { maxlength={2} placeholder="ss" value={ - time - ? time.setZone(timezone).second.toLocaleString("en-US", { + localTime + ? localTime.second.toLocaleString("en-US", { minimumIntegerDigits: 2, }) : "" @@ -276,18 +276,16 @@ export const TimeInput = ({ defaultValue, onInput }) => { type="datetime-local" step="1" value={ - time - ? time.toFormat("yyyy-LL-dd'T'HH:mm:ss") - : DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss") + localTime + ? localTime.toFormat("yyyy-LL-dd'T'HH:mm:ss") + : DateTime.now().setZone(timezone).toFormat("yyyy-LL-dd'T'HH:mm:ss") } ref={ref} onInput={(ev) => { ev.currentTarget.value === "" ? updateTime(null) - : setTime( - DateTime.fromISO(ev.currentTarget.value, { zone: timezone }).setZone( - "UTC", - ), + : setLocalTime( + DateTime.fromISO(ev.currentTarget.value, { zone: timezone }), ); }} >