* Load UTC time correctly at page load * Don't translate to/from timezone when using the browser date/time input
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
import { fetchGuildChannels, Reminder } from "../../api";
|
|
import { DateTime } from "luxon";
|
|
import { CreateButtonRow } from "./ButtonRow/CreateButtonRow";
|
|
import { TopBar } from "./TopBar";
|
|
import { Message } from "./Message";
|
|
import { Settings } from "./Settings";
|
|
import { ReminderContext } from "./ReminderContext";
|
|
import { useQuery } from "react-query";
|
|
import "./styles.scss";
|
|
import { useGuild } from "../App/useGuild";
|
|
import { DEFAULT_COLOR } from "./Embed";
|
|
import { useTimezone } from "../App/TimezoneProvider";
|
|
|
|
function defaultReminder(): Reminder {
|
|
return {
|
|
attachment: null,
|
|
attachment_name: null,
|
|
avatar: null,
|
|
channel: null,
|
|
content: "",
|
|
embed_author: "",
|
|
embed_author_url: null,
|
|
embed_color: DEFAULT_COLOR,
|
|
embed_description: "",
|
|
embed_fields: [],
|
|
embed_footer: "",
|
|
embed_footer_url: null,
|
|
embed_image_url: null,
|
|
embed_thumbnail_url: null,
|
|
embed_title: "",
|
|
enabled: true,
|
|
expires: null,
|
|
interval_days: null,
|
|
interval_months: null,
|
|
interval_seconds: null,
|
|
name: "",
|
|
restartable: false,
|
|
tts: false,
|
|
uid: "",
|
|
username: "",
|
|
utc_time: DateTime.now().setZone("UTC").toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
|
};
|
|
}
|
|
|
|
export const CreateReminder = () => {
|
|
const guild = useGuild();
|
|
|
|
const [reminder, setReminder] = useState(defaultReminder());
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
|
|
|
|
if (isSuccess && reminder.channel === null) {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
channel: reminder.channel || guildChannels[0].id,
|
|
}));
|
|
}
|
|
|
|
return (
|
|
<ReminderContext.Provider value={[reminder, setReminder]}>
|
|
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
|
<TopBar
|
|
isCreating={true}
|
|
toggleCollapsed={() => {
|
|
setCollapsed(!collapsed);
|
|
}}
|
|
/>
|
|
<div class="columns reminder-settings">
|
|
<Message />
|
|
<Settings />
|
|
</div>
|
|
<CreateButtonRow />
|
|
</div>
|
|
</ReminderContext.Provider>
|
|
);
|
|
};
|