136 lines
5.6 KiB
TypeScript
136 lines
5.6 KiB
TypeScript
import { ChannelSelector } from "./ChannelSelector";
|
|
import { DateTime } from "luxon";
|
|
import { IntervalSelector } from "./IntervalSelector";
|
|
import { useQuery } from "react-query";
|
|
import { fetchGuildInfo, fetchUserInfo } from "../../api";
|
|
import { useReminder } from "./ReminderContext";
|
|
import { Attachment } from "./Attachment";
|
|
import { TTS } from "./TTS";
|
|
import { TimeInput } from "./TimeInput";
|
|
import { useGuild } from "../App/useGuild";
|
|
|
|
export const Settings = () => {
|
|
const guild = useGuild();
|
|
const { isSuccess: userFetched, data: userInfo } = useQuery({ ...fetchUserInfo() });
|
|
const { isSuccess: guildFetched, data: guildInfo } = useQuery({ ...fetchGuildInfo(guild) });
|
|
|
|
const [reminder, setReminder] = useReminder();
|
|
|
|
if (!userFetched || !guildFetched) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<div class="column settings">
|
|
{guild && (
|
|
<div class="field channel-field">
|
|
<div class="collapses">
|
|
<label class="label" for="channelOption">
|
|
Channel*
|
|
</label>
|
|
</div>
|
|
<ChannelSelector
|
|
channel={reminder.channel}
|
|
setChannel={(channel: string) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
channel: channel,
|
|
}));
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="label collapses">
|
|
Time*
|
|
<TimeInput
|
|
defaultValue={reminder.utc_time}
|
|
onInput={(time: string) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
utc_time: time,
|
|
}));
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="collapses split-controls">
|
|
<div>
|
|
<div
|
|
class={
|
|
userInfo.patreon || guildInfo.patreon
|
|
? "patreon-only"
|
|
: "patreon-only is-locked"
|
|
}
|
|
>
|
|
<div class="patreon-invert foreground">
|
|
Intervals available on <a href="https://patreon.com/jellywx">Patreon</a>{" "}
|
|
or{" "}
|
|
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">
|
|
Interval{" "}
|
|
<a class="foreground" href="/help/intervals">
|
|
<i class="fas fa-question-circle"></i>
|
|
</a>
|
|
</label>
|
|
<IntervalSelector
|
|
months={reminder.interval_months}
|
|
days={reminder.interval_days}
|
|
seconds={reminder.interval_seconds}
|
|
setInterval={({ seconds, days, months }) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
interval_months: months,
|
|
interval_days: days,
|
|
interval_seconds: seconds,
|
|
}));
|
|
}}
|
|
clearInterval={() => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
interval_months: null,
|
|
interval_days: null,
|
|
interval_seconds: null,
|
|
}));
|
|
}}
|
|
></IntervalSelector>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="label">
|
|
Expiration
|
|
<TimeInput
|
|
defaultValue={reminder.expires}
|
|
onInput={(time: string) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
expires: time,
|
|
}));
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-mobile tts-row">
|
|
<div class="column has-text-centered">
|
|
<TTS />
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<Attachment />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|