Fix time inputs
This commit is contained in:
parent
8c2296b9c8
commit
0e0ab053f3
@ -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) => ({
|
||||||
|
@ -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,
|
||||||
}));
|
}));
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
Loading…
Reference in New Issue
Block a user