Fix time inputs

This commit is contained in:
jude 2024-03-01 16:54:56 +00:00
parent 8c2296b9c8
commit 0e0ab053f3
3 changed files with 113 additions and 56 deletions

View File

@ -128,38 +128,20 @@ export const fetchGuildRoles = (guild: string) => ({
export const fetchGuildReminders = (guild: string) => ({ export const fetchGuildReminders = (guild: string) => ({
queryKey: ["GUILD_REMINDERS", guild], queryKey: ["GUILD_REMINDERS", guild],
queryFn: () => queryFn: () =>
axios axios.get(`/dashboard/api/guild/${guild}/reminders`).then((resp) => resp.data) as Promise<
.get(`/dashboard/api/guild/${guild}/reminders`) Reminder[]
.then((resp) => resp.data) >,
.then((value) =>
value.map((reminder) => ({
...reminder,
utc_time: DateTime.fromISO(reminder.utc_time, { zone: "UTC" }),
expires:
reminder.expires === null
? null
: DateTime.fromISO(reminder.expires, { zone: "UTC" }),
})),
) as Promise<Reminder[]>,
staleTime: OTHER_STALE_TIME, staleTime: OTHER_STALE_TIME,
}); });
export const patchGuildReminder = (guild: string) => ({ export const patchGuildReminder = (guild: string) => ({
mutationFn: (reminder: Reminder) => mutationFn: (reminder: Reminder) =>
axios.patch(`/dashboard/api/guild/${guild}/reminders`, { axios.patch(`/dashboard/api/guild/${guild}/reminders`, reminder),
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
}),
}); });
export const postGuildReminder = (guild: string) => ({ export const postGuildReminder = (guild: string) => ({
mutationFn: (reminder: Reminder) => mutationFn: (reminder: Reminder) =>
axios axios.post(`/dashboard/api/guild/${guild}/reminders`, reminder).then((resp) => resp.data),
.post(`/dashboard/api/guild/${guild}/reminders`, {
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
})
.then((resp) => resp.data),
}); });
export const deleteGuildReminder = (guild: string) => ({ export const deleteGuildReminder = (guild: string) => ({
@ -182,12 +164,7 @@ export const fetchGuildTemplates = (guild: string) => ({
export const postGuildTemplate = (guild: string) => ({ export const postGuildTemplate = (guild: string) => ({
mutationFn: (reminder: Reminder) => mutationFn: (reminder: Reminder) =>
axios axios.post(`/dashboard/api/guild/${guild}/templates`, reminder).then((resp) => resp.data),
.post(`/dashboard/api/guild/${guild}/templates`, {
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
})
.then((resp) => resp.data),
}); });
export const deleteGuildTemplate = (guild: string) => ({ export const deleteGuildTemplate = (guild: string) => ({

View File

@ -43,11 +43,11 @@ export const Settings = () => {
<label class="label collapses"> <label class="label collapses">
Time* Time*
<TimeInput <TimeInput
defaultValue={reminder.utc_time.setZone(timezone)} defaultValue={reminder.utc_time}
onInput={(time: DateTime) => { onInput={(time: DateTime) => {
setReminder((reminder) => ({ setReminder((reminder) => ({
...reminder, ...reminder,
utc_time: time.toUTC(), utc_time: time,
})); }));
}} }}
/> />
@ -98,11 +98,11 @@ export const Settings = () => {
<label class="label"> <label class="label">
Expiration Expiration
<TimeInput <TimeInput
defaultValue={reminder.expires?.setZone(timezone)} defaultValue={reminder.expires}
onInput={(time: DateTime) => { onInput={(time: DateTime) => {
setReminder((reminder) => ({ setReminder((reminder) => ({
...reminder, ...reminder,
expires: time?.toUTC(), expires: time,
})); }));
}} }}
/> />

View File

@ -1,14 +1,42 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { useFlash } from "../App/FlashContext"; import { useFlash } from "../App/FlashContext";
import { useTimezone } from "../App/TimezoneProvider";
type TimeUpdate = {
year?: number | null;
month?: number;
day?: number;
hour?: number;
minute?: number;
second?: number;
};
export const TimeInput = ({ defaultValue, onInput }) => { export const TimeInput = ({ defaultValue, onInput }) => {
const ref = useRef(null); const ref = useRef(null);
const [time, setTime] = useState(defaultValue); const [timezone] = useTimezone();
const [time, setTime] = useState(
defaultValue ? DateTime.fromISO(defaultValue).setZone(timezone) : null,
);
const updateTime = useCallback(
(upd: TimeUpdate) => {
if (upd === null) {
setTime(null);
}
let newTime = time;
if (newTime === null) {
newTime = DateTime.now().setZone(timezone);
}
setTime(newTime.set(upd));
},
[time, timezone],
);
useEffect(() => { useEffect(() => {
onInput(time); onInput(time?.toFormat("yyyy-LL-dd'T'HH:mm:ss"));
}, [time]); }, [time]);
const flash = useFlash(); const flash = useFlash();
@ -54,12 +82,20 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={4} maxlength={4}
placeholder="YYYY" placeholder="YYYY"
value={time?.year.toLocaleString("en-US", { value={
minimumIntegerDigits: 4, time
useGrouping: false, ? time.year.toLocaleString("en-US", {
})} minimumIntegerDigits: 4,
useGrouping: false,
})
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ year: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
year: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -77,9 +113,19 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={2} maxlength={2}
placeholder="MM" placeholder="MM"
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={
time
? time.month.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ month: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
month: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -97,9 +143,17 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={2} maxlength={2}
placeholder="DD" placeholder="DD"
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={
time
? time.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ day: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
day: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -116,9 +170,17 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={2} maxlength={2}
placeholder="hh" placeholder="hh"
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={
time
? time.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ hour: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
hour: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -136,11 +198,19 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={2} maxlength={2}
placeholder="mm" placeholder="mm"
value={time?.minute.toLocaleString("en-US", { value={
minimumIntegerDigits: 2, time
})} ? time.minute.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ minute: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
minute: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -158,11 +228,19 @@ export const TimeInput = ({ defaultValue, onInput }) => {
pattern="\d*" pattern="\d*"
maxlength={2} maxlength={2}
placeholder="ss" placeholder="ss"
value={time?.second.toLocaleString("en-US", { value={
minimumIntegerDigits: 2, time
})} ? time.second.toLocaleString("en-US", {
minimumIntegerDigits: 2,
})
: ""
}
onBlur={(ev) => { onBlur={(ev) => {
setTime(time.set({ second: ev.currentTarget.value })); ev.currentTarget.value
? updateTime({
second: parseInt(ev.currentTarget.value),
})
: updateTime(null);
}} }}
></input>{" "} ></input>{" "}
</label> </label>
@ -200,7 +278,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
} }
ref={ref} ref={ref}
onInput={(ev) => { onInput={(ev) => {
setTime(DateTime.fromISO(ev.currentTarget.value)); ev.currentTarget.value === ""
? setTime(null)
: setTime(DateTime.fromISO(ev.currentTarget.value));
}} }}
></input> ></input>
</> </>