Extend create reminder

src/api.ts

@@ -48,7 +48,7 @@ export type Reminder = {
     utc_time: DateTime;
 };
 
-type ChannelInfo = {
+export type ChannelInfo = {
     id: string;
     name: string;
 };

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) => ({
+                        setChannel(ev.currentTarget.value);
-                            ...reminder,
-                            channel: ev.currentTarget.value,
-                        }));
                     }}
                 >
                     {isSuccess &&
                         data.map((c) => (
-                            <option value={c.id} selected={c.id === reminder.channel}>
+                            <option value={c.id} selected={c.id === channel}>
                                 {c.name}
                             </option>
                         ))}

src/components/Reminder/CreateReminder.tsx

@@ -1,30 +1,30 @@
-import { useParams } from "wouter";
 import { useState } from "preact/hooks";
-import { useQuery } from "react-query";
+import { fetchGuildChannels, Reminder } from "../../api";
-import { fetchUserInfo, 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: null,
-        attachment_name: "",
+        attachment_name: null,
-        avatar: "",
+        avatar: null,
-        channel: "",
+        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_footer_url: null,
-        embed_image_url: "",
+        embed_image_url: null,
-        embed_thumbnail_url: "",
+        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 (
         <ReminderContext.Provider value={[reminder, setReminder]}>
             <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>

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) => {

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) {

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) => (

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 (
         <div
             class="discord-embed"

src/components/Reminder/IntervalSelector.tsx

@@ -1,4 +1,5 @@
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
+import { useReminder } from "./ReminderContext";
 
 function divmod(a: number, b: number) {
     return [Math.floor(a / b), a % b];
@@ -13,16 +14,37 @@ function secondsToHMS(seconds: number) {
     return [hours, minutes, seconds];
 }
 
-export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: secondsProp }) => {
+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];
+    let [_hours, _minutes, _seconds] = [0, 0, 0];
-    if (seconds !== null) {
+    if (secondsProp !== null) {
-        [hours, minutes, secondsRem] = secondsToHMS(seconds);
+        [_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 (
         <div class="control intervalSelector">
             <div class="input interval-group">
@@ -38,6 +60,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
                                 maxlength={2}
                                 placeholder=""
                                 value={months || ""}
+                                onInput={(ev) => {
+                                    setMonths(parseInt(ev.currentTarget.value));
+                                }}
                             ></input>{" "}
                             <span class="half-rem"></span> months, <span class="half-rem"></span>
                         </label>
@@ -51,6 +76,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
                                 maxlength={4}
                                 placeholder=""
                                 value={days || ""}
+                                onInput={(ev) => {
+                                    setDays(parseInt(ev.currentTarget.value));
+                                }}
                             ></input>{" "}
                             <span class="half-rem"></span> days, <span class="half-rem"></span>
                         </label>
@@ -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));
+                                }}
                             ></input>
                             :
                         </label>
@@ -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));
+                                }}
                             ></input>
                             :
                         </label>
@@ -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));
+                                }}
                             ></input>
                         </label>
                     </span>
@@ -102,6 +139,8 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
                         setMonths(0);
                         setDays(0);
                         setSeconds(0);
+                        setMinutes(0);
+                        setHours(0);
                     }}
                 >
                     <span class="is-sr-only">Clear interval</span>

src/components/Reminder/Message.tsx

@@ -27,17 +27,9 @@ export const Message = () => {
                 </figure>
                 <div class="media-content">
                     <div class="content">
-                        <Username
+                        <Username />
-                            value={reminder.username}
-                            onInput={(username: string) => {
-                                setReminder((reminder) => ({
-                                    ...reminder,
-                                    username,
-                                }));
-                            }}
-                        ></Username>
                         <Content />
-                        <Embed reminder={reminder} setReminder={setReminder}></Embed>
+                        <Embed />
                     </div>
                 </div>
             </article>

src/components/Reminder/Name.tsx

@@ -1,4 +1,9 @@
-export const Name = ({ value }) => (
+import { useReminder } from "./ReminderContext";
+
+export const Name = () => {
+    const [reminder, setReminder] = useReminder();
+
+    return (
         <div class="name-bar">
             <div class="field">
                 <div class="control">
@@ -9,9 +14,16 @@ export const Name = ({ value }) => (
                         name="name"
                         placeholder="Reminder Name"
                         maxlength={100}
-                    value={value}
+                        value={reminder.name}
+                        onInput={(ev) => {
+                            setReminder((reminder) => ({
+                                ...reminder,
+                                name: ev.currentTarget.value,
+                            }));
+                        }}
                     ></input>
                 </div>
             </div>
         </div>
-);
+    );
+};

src/components/Reminder/Settings.tsx

@@ -22,7 +22,15 @@ export const Settings = () => {
                         Channel*
                     </label>
                 </div>
-                <ChannelSelector />
+                <ChannelSelector
+                    channel={reminder.channel}
+                    setChannel={(channel: string) => {
+                        setReminder((reminder) => ({
+                            ...reminder,
+                            channel: channel,
+                        }));
+                    }}
+                />
             </div>
 
             <div class="field">
@@ -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,
+                                    }));
+                                }}
                             ></IntervalSelector>
                         </div>
 

src/components/Reminder/TopBar.tsx

@@ -10,13 +10,15 @@ export const TopBar = ({ toggleCollapsed }) => {
 
     const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
 
-    const channelName = (reminder: Reminder) =>
+    const channelName = (reminder: Reminder) => {
-        guildChannels.find((c) => c.id === reminder.channel);
+        const channel = guildChannels.find((c) => c.id === reminder.channel);
+        return channel === undefined ? "" : channel.name;
+    };
 
     return (
         <div class="columns is-mobile column reminder-topbar">
             {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
-            <Name value={reminder.name}></Name>
+            <Name />
             <div class="hide-button-bar">
                 <button class="button hide-box" onClick={toggleCollapsed}>
                     <span class="is-sr-only">Hide reminder</span>

src/components/Reminder/Username.tsx

@@ -1,4 +1,8 @@
-export const Username = ({ value, onInput }) => {
+import { useReminder } from "./ReminderContext";
+
+export const Username = () => {
+    const [reminder, setReminder] = useReminder();
+
     return (
         <div class="discord-message-header">
             <label class="is-sr-only">Username Override</label>
@@ -7,9 +11,12 @@ export const Username = ({ value, onInput }) => {
                 placeholder="Username Override"
                 maxlength={32}
                 name="username"
-                value={value}
+                value={reminder.username}
                 onInput={(ev) => {
-                    onInput(ev.currentTarget.value);
+                    setReminder((reminder) => ({
+                        ...reminder,
+                        username: ev.currentTarget.value,
+                    }));
                 }}
             ></input>
         </div>