Add reminder creator
This commit is contained in:
jude
parent
0f259824fc
commit
e36d2610da
@ -2,7 +2,8 @@ import { useParams } from "wouter";
|
|||||||
import { useQuery } from "react-query";
|
import { useQuery } from "react-query";
|
||||||
import { fetchGuildReminders } from "../../api";
|
import { fetchGuildReminders } from "../../api";
|
||||||
import { QueryKeys } from "../../consts";
|
import { QueryKeys } from "../../consts";
|
||||||
import { EditReminder } from "../EditReminder";
|
import { EditReminder } from "../Reminder/EditReminder";
|
||||||
|
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||||
|
|
||||||
export const GuildReminders = () => {
|
export const GuildReminders = () => {
|
||||||
const { guild } = useParams();
|
const { guild } = useParams();
|
||||||
@ -16,7 +17,7 @@ export const GuildReminders = () => {
|
|||||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||||
<strong>Create Reminder</strong>
|
<strong>Create Reminder</strong>
|
||||||
<div id={"reminderCreator"}>
|
<div id={"reminderCreator"}>
|
||||||
<></>
|
<CreateReminder></CreateReminder>
|
||||||
</div>
|
</div>
|
||||||
<br></br>
|
<br></br>
|
||||||
<div class={"field"}>
|
<div class={"field"}>
|
||||||
|
|||||||
231
src/components/Reminder/CreateReminder.tsx
Normal file
231
src/components/Reminder/CreateReminder.tsx
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
import { useParams } from "wouter";
|
||||||
|
import { useState } from "preact/hooks";
|
||||||
|
import { useQueries } from "react-query";
|
||||||
|
import { QueryKeys } from "../../consts";
|
||||||
|
import { fetchGuildChannels, fetchUserInfo } from "../../api";
|
||||||
|
import { Name } from "./Name";
|
||||||
|
import { Username } from "./Username";
|
||||||
|
import React from "react";
|
||||||
|
import { Content } from "./Content";
|
||||||
|
import { Embed } from "./Embed";
|
||||||
|
import { ChannelSelector } from "./ChannelSelector";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
|
import { IntervalSelector } from "./IntervalSelector";
|
||||||
|
|
||||||
|
export const CreateReminder = () => {
|
||||||
|
const { guild } = useParams();
|
||||||
|
const [reminder, setReminder] = useState({});
|
||||||
|
|
||||||
|
const [
|
||||||
|
{ isSuccess: channelsFetched, data: guildChannels },
|
||||||
|
{ isSuccess: userFetched, data: userInfo },
|
||||||
|
] = useQueries([
|
||||||
|
{
|
||||||
|
queryKey: [QueryKeys.GUILD_CHANNELS, guild],
|
||||||
|
queryFn: () => fetchGuildChannels(guild),
|
||||||
|
staleTime: 300,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
queryKey: [QueryKeys.USER_DATA],
|
||||||
|
queryFn: fetchUserInfo,
|
||||||
|
staleTime: Infinity,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
|
||||||
|
if (!channelsFetched || !userFetched) {
|
||||||
|
// todo
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||||
|
<div class="columns is-mobile column reminder-topbar">
|
||||||
|
<Name value={""}></Name>
|
||||||
|
<div class="hide-button-bar">
|
||||||
|
<button
|
||||||
|
class="button hide-box"
|
||||||
|
onClick={() => {
|
||||||
|
setCollapsed(!collapsed);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span class="is-sr-only">Hide reminder</span>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns reminder-settings">
|
||||||
|
<div class="column discord-frame">
|
||||||
|
<article class="media">
|
||||||
|
<figure class="media-left">
|
||||||
|
<p class="image is-32x32 customizable">
|
||||||
|
<a>
|
||||||
|
<img
|
||||||
|
class="is-rounded avatar"
|
||||||
|
src="/static/img/bg.webp"
|
||||||
|
alt="Image for discord avatar"
|
||||||
|
></img>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</figure>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="content">
|
||||||
|
<Username
|
||||||
|
value={""}
|
||||||
|
onChange={(username: string) => {
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
username,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></Username>
|
||||||
|
<Content
|
||||||
|
value={""}
|
||||||
|
onChange={(content: string) => {
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
content,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></Content>
|
||||||
|
<Embed reminder={{}} setReminder={setReminder}></Embed>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="column settings">
|
||||||
|
<div class="field channel-field">
|
||||||
|
<div class="collapses">
|
||||||
|
<label class="label" for="channelOption">
|
||||||
|
Channel*
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<ChannelSelector channel={null}></ChannelSelector>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<label class="label collapses">
|
||||||
|
Time*
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="datetime-local"
|
||||||
|
step="1"
|
||||||
|
name="time"
|
||||||
|
value={DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
|
||||||
|
onChange={(ev) => {
|
||||||
|
setReminder((reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
utc_time: DateTime.fromISO(
|
||||||
|
ev.currentTarget.value,
|
||||||
|
).toUTC(),
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapses split-controls">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class={userInfo.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={0}
|
||||||
|
days={0}
|
||||||
|
seconds={0}
|
||||||
|
></IntervalSelector>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<label class="label">
|
||||||
|
Expiration
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="datetime-local"
|
||||||
|
step="1"
|
||||||
|
name="expiration"
|
||||||
|
value={DateTime.now().toFormat(
|
||||||
|
"yyyy-LL-dd'T'HH:mm:ss",
|
||||||
|
)}
|
||||||
|
></input>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile tts-row">
|
||||||
|
<div class="column has-text-centered">
|
||||||
|
<div class="is-boxed">
|
||||||
|
<label class="label">
|
||||||
|
Enable TTS <input type="checkbox" name="tts"></input>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column has-text-centered">
|
||||||
|
<div class="file is-small is-boxed">
|
||||||
|
<label class="file-label">
|
||||||
|
<input
|
||||||
|
class="file-input"
|
||||||
|
type="file"
|
||||||
|
name="attachment"
|
||||||
|
></input>
|
||||||
|
<span class="file-cta">
|
||||||
|
<span class="file-label">Add Attachment</span>
|
||||||
|
<span class="file-icon">
|
||||||
|
<i class="fas fa-upload"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button-row">
|
||||||
|
<div class="button-row-reminder">
|
||||||
|
<button class="button is-success">
|
||||||
|
<span>Create Reminder</span>{" "}
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-sparkles"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="button-row-template">
|
||||||
|
<div>
|
||||||
|
<button class="button is-success is-outlined">
|
||||||
|
<span>Create Template</span>{" "}
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-file-spreadsheet"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="button is-outlined show-modal is-pulled-right">
|
||||||
|
Load Template
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -137,7 +137,9 @@ export const EditReminder = ({ reminder: initialReminder }: Props) => {
|
|||||||
|
|
||||||
<div class="collapses split-controls">
|
<div class="collapses split-controls">
|
||||||
<div>
|
<div>
|
||||||
<div class={!userInfo.patreon && "is-locked"}>
|
<div
|
||||||
|
class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}
|
||||||
|
>
|
||||||
<div class="patreon-invert foreground">
|
<div class="patreon-invert foreground">
|
||||||
Intervals available on{" "}
|
Intervals available on{" "}
|
||||||
<a href="https://patreon.com/jellywx">Patreon</a> or{" "}
|
<a href="https://patreon.com/jellywx">Patreon</a> or{" "}
|
||||||
Loading…
Reference in New Issue
Block a user