Add reminder creator

This commit is contained in:
jude 2023-10-30 21:24:05 +00:00
parent 0f259824fc
commit e36d2610da
14 changed files with 237 additions and 3 deletions

View File

@ -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"}>

View 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>
);
};

View File

@ -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{" "}