From f310bbef54e39eb1640f03fa97458864bfcb1455 Mon Sep 17 00:00:00 2001 From: jude Date: Sun, 5 Nov 2023 12:41:59 +0000 Subject: [PATCH] Extend create reminder --- src/api.ts | 2 +- src/components/Reminder/ChannelSelector.tsx | 13 ++--- src/components/Reminder/CreateReminder.tsx | 35 ++++++++----- src/components/Reminder/Embed/Author.tsx | 2 +- src/components/Reminder/Embed/Color.tsx | 2 +- src/components/Reminder/Embed/Footer.tsx | 2 +- src/components/Reminder/Embed/index.tsx | 5 +- src/components/Reminder/IntervalSelector.tsx | 53 +++++++++++++++++--- src/components/Reminder/Message.tsx | 12 +---- src/components/Reminder/Name.tsx | 42 ++++++++++------ src/components/Reminder/Settings.tsx | 26 +++++++++- src/components/Reminder/TopBar.tsx | 8 +-- src/components/Reminder/Username.tsx | 13 +++-- 13 files changed, 149 insertions(+), 66 deletions(-) diff --git a/src/api.ts b/src/api.ts index 868b829..20b5fda 100644 --- a/src/api.ts +++ b/src/api.ts @@ -48,7 +48,7 @@ export type Reminder = { utc_time: DateTime; }; -type ChannelInfo = { +export type ChannelInfo = { id: string; name: string; }; diff --git a/src/components/Reminder/ChannelSelector.tsx b/src/components/Reminder/ChannelSelector.tsx index 1d7dd5e..a57ba96 100644 --- a/src/components/Reminder/ChannelSelector.tsx +++ b/src/components/Reminder/ChannelSelector.tsx @@ -1,13 +1,9 @@ import { useQuery } from "react-query"; import { useParams } from "wouter"; import { fetchGuildChannels } from "../../api"; -import { useReminder } from "./ReminderContext"; -export const ChannelSelector = () => { +export const ChannelSelector = ({ channel, setChannel }) => { const { guild } = useParams(); - - const [reminder, setReminder] = useReminder(); - const { isSuccess, data } = useQuery(fetchGuildChannels(guild)); return ( @@ -17,15 +13,12 @@ export const ChannelSelector = () => { name="channel" class="channel-selector" onInput={(ev) => { - setReminder((reminder) => ({ - ...reminder, - channel: ev.currentTarget.value, - })); + setChannel(ev.currentTarget.value); }} > {isSuccess && data.map((c) => ( - ))} diff --git a/src/components/Reminder/CreateReminder.tsx b/src/components/Reminder/CreateReminder.tsx index b2a3f30..dd33e7c 100644 --- a/src/components/Reminder/CreateReminder.tsx +++ b/src/components/Reminder/CreateReminder.tsx @@ -1,30 +1,30 @@ -import { useParams } from "wouter"; import { useState } from "preact/hooks"; -import { useQuery } from "react-query"; -import { fetchUserInfo, Reminder } from "../../api"; +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 { useParams } from "wouter"; function defaultReminder(): Reminder { return { - attachment: "", - attachment_name: "", - avatar: "", - channel: "", + attachment: null, + attachment_name: null, + avatar: null, + channel: null, content: "", embed_author: "", - embed_author_url: "", + embed_author_url: null, embed_color: 0, embed_description: "", embed_fields: [], embed_footer: "", - embed_footer_url: "", - embed_image_url: "", - embed_thumbnail_url: "", + embed_footer_url: null, + embed_image_url: null, + embed_thumbnail_url: null, embed_title: "", enabled: true, expires: null, @@ -41,9 +41,20 @@ function defaultReminder(): Reminder { } export const CreateReminder = () => { - const [reminder, setReminder] = useState(defaultReminder); + const { guild } = useParams(); + + 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 (
diff --git a/src/components/Reminder/Embed/Author.tsx b/src/components/Reminder/Embed/Author.tsx index 7c266ac..ad61836 100644 --- a/src/components/Reminder/Embed/Author.tsx +++ b/src/components/Reminder/Embed/Author.tsx @@ -4,7 +4,7 @@ import { Reminder } from "../../../api"; type Props = { name: string; icon: string; - setReminder: (r: (reminder: Reminder) => void) => void; + setReminder: (r: (reminder: Reminder) => Reminder) => void; }; export const Author = ({ name, icon, setReminder }: Props) => { diff --git a/src/components/Reminder/Embed/Color.tsx b/src/components/Reminder/Embed/Color.tsx index aca1649..2af56e3 100644 --- a/src/components/Reminder/Embed/Color.tsx +++ b/src/components/Reminder/Embed/Color.tsx @@ -5,7 +5,7 @@ import { Reminder } from "../../../api"; type Props = { color: string; - setReminder: (r: (reminder: Reminder) => void) => void; + setReminder: (r: (reminder: Reminder) => Reminder) => void; }; function colorToInt(hex: string) { diff --git a/src/components/Reminder/Embed/Footer.tsx b/src/components/Reminder/Embed/Footer.tsx index 660540a..dd908ae 100644 --- a/src/components/Reminder/Embed/Footer.tsx +++ b/src/components/Reminder/Embed/Footer.tsx @@ -4,7 +4,7 @@ import { ImagePicker } from "../ImagePicker"; type Props = { footer: string; icon: string; - setReminder: (r: (reminder: Reminder) => void) => void; + setReminder: (r: (reminder: Reminder) => Reminder) => void; }; export const Footer = ({ footer, icon, setReminder }: Props) => ( diff --git a/src/components/Reminder/Embed/index.tsx b/src/components/Reminder/Embed/index.tsx index fdce21b..50e82f0 100644 --- a/src/components/Reminder/Embed/index.tsx +++ b/src/components/Reminder/Embed/index.tsx @@ -5,6 +5,7 @@ import { Footer } from "./Footer"; import { Color } from "./Color"; import { Reminder } from "../../../api"; import { ImagePicker } from "../ImagePicker"; +import { useReminder } from "../ReminderContext"; function intToColor(num: number) { return `#${num.toString(16).padStart(6, "0")}`; @@ -12,7 +13,9 @@ function intToColor(num: number) { const DEFAULT_COLOR = 9418359; -export const Embed = ({ reminder, setReminder }) => { +export const Embed = () => { + const [reminder, setReminder] = useReminder(); + return (
{ +export const IntervalSelector = ({ + months: monthsProp, + days: daysProp, + seconds: secondsProp, + setInterval, + clearInterval, +}) => { const [months, setMonths] = useState(monthsProp); const [days, setDays] = useState(daysProp); - const [seconds, setSeconds] = useState(secondsProp); - let [hours, minutes, secondsRem] = [0, 0, 0]; - if (seconds !== null) { - [hours, minutes, secondsRem] = secondsToHMS(seconds); + let [_hours, _minutes, _seconds] = [0, 0, 0]; + if (secondsProp !== null) { + [_hours, _minutes, _seconds] = secondsToHMS(secondsProp); } + const [seconds, setSeconds] = useState(_seconds); + const [minutes, setMinutes] = useState(_minutes); + const [hours, setHours] = useState(_hours); + + useEffect(() => { + if (seconds || minutes || hours || days || months) { + setInterval({ + seconds: seconds + minutes * 60 + hours * 3600, + days: days, + months: months, + }); + } else { + clearInterval(); + } + }, [seconds, minutes, hours, days, months]); + return (
@@ -38,6 +60,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: maxlength={2} placeholder="" value={months || ""} + onInput={(ev) => { + setMonths(parseInt(ev.currentTarget.value)); + }} >{" "} months, @@ -51,6 +76,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: maxlength={4} placeholder="" value={days || ""} + onInput={(ev) => { + setDays(parseInt(ev.currentTarget.value)); + }} >{" "} days, @@ -66,6 +94,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: maxlength={2} placeholder="HH" value={hours || ""} + onInput={(ev) => { + setHours(parseInt(ev.currentTarget.value)); + }} > : @@ -79,6 +110,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: maxlength={2} placeholder="MM" value={minutes || ""} + onInput={(ev) => { + setMinutes(parseInt(ev.currentTarget.value)); + }} > : @@ -91,7 +125,10 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: name="interval_seconds" maxlength={2} placeholder="SS" - value={secondsRem || ""} + value={seconds || ""} + onInput={(ev) => { + setSeconds(parseInt(ev.currentTarget.value)); + }} > @@ -102,6 +139,8 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: setMonths(0); setDays(0); setSeconds(0); + setMinutes(0); + setHours(0); }} > Clear interval diff --git a/src/components/Reminder/Message.tsx b/src/components/Reminder/Message.tsx index a61f67d..b963ffd 100644 --- a/src/components/Reminder/Message.tsx +++ b/src/components/Reminder/Message.tsx @@ -27,17 +27,9 @@ export const Message = () => {
- { - setReminder((reminder) => ({ - ...reminder, - username, - })); - }} - > + - +
diff --git a/src/components/Reminder/Name.tsx b/src/components/Reminder/Name.tsx index e82cba8..244c66d 100644 --- a/src/components/Reminder/Name.tsx +++ b/src/components/Reminder/Name.tsx @@ -1,17 +1,29 @@ -export const Name = ({ value }) => ( -
-
-
- - +import { useReminder } from "./ReminderContext"; + +export const Name = () => { + const [reminder, setReminder] = useReminder(); + + return ( +
+
+
+ + { + setReminder((reminder) => ({ + ...reminder, + name: ev.currentTarget.value, + })); + }} + > +
-
-); + ); +}; diff --git a/src/components/Reminder/Settings.tsx b/src/components/Reminder/Settings.tsx index f002b08..a289695 100644 --- a/src/components/Reminder/Settings.tsx +++ b/src/components/Reminder/Settings.tsx @@ -22,7 +22,15 @@ export const Settings = () => { Channel*
- + { + setReminder((reminder) => ({ + ...reminder, + channel: channel, + })); + }} + />
@@ -65,6 +73,22 @@ export const Settings = () => { 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, + })); + }} >
diff --git a/src/components/Reminder/TopBar.tsx b/src/components/Reminder/TopBar.tsx index 2ed6df6..db1a618 100644 --- a/src/components/Reminder/TopBar.tsx +++ b/src/components/Reminder/TopBar.tsx @@ -10,13 +10,15 @@ export const TopBar = ({ toggleCollapsed }) => { const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild)); - const channelName = (reminder: Reminder) => - guildChannels.find((c) => c.id === reminder.channel); + const channelName = (reminder: Reminder) => { + const channel = guildChannels.find((c) => c.id === reminder.channel); + return channel === undefined ? "" : channel.name; + }; return (
{isSuccess &&
#{channelName(reminder)}
} - +