Add reminder creator
This commit is contained in:
jude committed
1 parent
0f259824fc
commit
e36d2610da
14 files changed
+237
-3
No files matched your search
@@ -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"}>
|
||||||
|
|||||||
File renamed without changes.
File renamed without changes.
@@ -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{" "}
|
||||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Reference in new issue
Block a user