Add sort options

src/components/Guild/GuildReminders.tsx

@@ -1,13 +1,26 @@
 import { useParams } from "wouter";
 import { useQuery } from "react-query";
-import { fetchGuildReminders } from "../../api";
+import { fetchGuildChannels, fetchGuildReminders } from "../../api";
 import { EditReminder } from "../Reminder/EditReminder";
 import { CreateReminder } from "../Reminder/CreateReminder";
+import { useState } from "preact/hooks";
+
+enum Sort {
+    Time = "time",
+    Name = "name",
+    Channel = "channel",
+}
 
 export const GuildReminders = () => {
     const { guild } = useParams();
 
     const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
+    const { data: channels } = useQuery(fetchGuildChannels(guild));
+
+    const [collapsed, setCollapsed] = useState(false);
+    const [sort, setSort] = useState(Sort.Time);
+
+    let prevReminder = null;
 
     return (
         <div style={{ margin: "0 12px 12px 12px" }}>
@@ -24,12 +37,21 @@ export const GuildReminders = () => {
                     <div class={"column is-narrow"}>
                         <div class="control has-icons-left">
                             <div class="select is-small">
-                                <select id="orderBy">
+                                <select
-                                    <option value="time" selected>
+                                    id="orderBy"
+                                    onInput={(ev) => {
+                                        setSort(ev.currentTarget.value as Sort);
+                                    }}
+                                >
+                                    <option value={Sort.Time} selected={sort == Sort.Time}>
                                         Time
                                     </option>
-                                    <option value="name">Name</option>
+                                    <option value={Sort.Name} selected={sort == Sort.Name}>
-                                    <option value="channel">Channel</option>
+                                        Name
+                                    </option>
+                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
+                                        Channel
+                                    </option>
                                 </select>
                             </div>
                             <div class="icon is-small is-left">
@@ -40,7 +62,16 @@ export const GuildReminders = () => {
                     <div class={"column is-narrow"}>
                         <div class="control has-icons-left">
                             <div class="select is-small">
-                                <select id="expandAll">
+                                <select
+                                    id="expandAll"
+                                    onInput={(ev) => {
+                                        if (ev.currentTarget.value === "expand") {
+                                            setCollapsed(false);
+                                        } else if (ev.currentTarget.value === "collapse") {
+                                            setCollapsed(true);
+                                        }
+                                    }}
+                                >
                                     <option value="" selected></option>
                                     <option value="expand">Expand All</option>
                                     <option value="collapse">Collapse All</option>
@@ -56,9 +87,43 @@ export const GuildReminders = () => {
 
             <div id={"guildReminders"}>
                 {isSuccess &&
-                    guildReminders.map((reminder) => (
+                    guildReminders
-                        <EditReminder reminder={reminder}></EditReminder>
+                        .sort((r1, r2) => {
-                    ))}
+                            if (sort === Sort.Time) {
+                                return r1.utc_time > r2.utc_time ? 1 : -1;
+                            } else if (sort === Sort.Name) {
+                                return r1.name > r2.name ? 1 : -1;
+                            } else {
+                                return r1.channel > r2.channel ? 1 : -1;
+                            }
+                        })
+                        .map((reminder) => {
+                            let breaker = <></>;
+                            if (sort === Sort.Channel && channels) {
+                                if (
+                                    prevReminder === null ||
+                                    prevReminder.channel !== reminder.channel
+                                ) {
+                                    const channel = channels.find(
+                                        (ch) => ch.id === reminder.channel,
+                                    );
+                                    breaker = <div class={"channel-tag"}>#{channel.name}</div>;
+                                }
+                            }
+
+                            prevReminder = reminder;
+
+                            return (
+                                <>
+                                    {breaker}
+                                    <EditReminder
+                                        key={reminder.uid}
+                                        reminder={reminder}
+                                        globalCollapse={collapsed}
+                                    />
+                                </>
+                            );
+                        })}
             </div>
         </div>
     );

src/components/Reminder/ButtonRow/EditButtonRow.tsx

@@ -16,24 +16,33 @@ export const EditButtonRow = () => {
 
     const iconFlashTimeout = useRef(0);
 
-    console.log(reminder.enabled);
+    const flash = useFlash();
-    console.log(reminder.content);
-
     const mutation = useMutation({
         ...patchGuildReminder(guild),
-        onSuccess: () => {
+        onSuccess: (response) => {
             queryClient.invalidateQueries({
                 queryKey: ["GUILD_REMINDERS", guild],
             });
-            setRecentlySaved(true);
 
             if (iconFlashTimeout.current !== null) {
                 clearTimeout(iconFlashTimeout.current);
             }
 
-            iconFlashTimeout.current = setTimeout(() => {
+            if (response.data.errors.length > 0) {
                 setRecentlySaved(false);
-            }, ICON_FLASH_TIME);
+
+                for (const error of response.data.errors) {
+                    flash({ message: error, type: "error" });
+                }
+            } else {
+                setRecentlySaved(true);
+
+                iconFlashTimeout.current = setTimeout(() => {
+                    setRecentlySaved(false);
+                }, ICON_FLASH_TIME);
+
+                setReminder(response.data.reminder);
+            }
         },
     });
 
@@ -64,10 +73,6 @@ export const EditButtonRow = () => {
             <button
                 class="button is-warning"
                 onClick={() => {
-                    setReminder((r) => ({
-                        ...r,
-                        enabled: !r.enabled,
-                    }));
                     mutation.mutate({
                         ...reminder,
                         enabled: !reminder.enabled,

src/components/Reminder/EditReminder.tsx

@@ -1,5 +1,5 @@
 import { Reminder } from "../../api";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { EditButtonRow } from "./ButtonRow/EditButtonRow";
 import { Message } from "./Message";
 import { Settings } from "./Settings";
@@ -8,13 +8,24 @@ import { TopBar } from "./TopBar";
 
 type Props = {
     reminder: Reminder;
+    globalCollapse: boolean;
 };
 
-export const EditReminder = ({ reminder: initialReminder }: Props) => {
+export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
+    const [propReminder, setPropReminder] = useState(initialReminder);
     const [reminder, setReminder] = useState(initialReminder);
-
     const [collapsed, setCollapsed] = useState(false);
 
+    useEffect(() => {
+        setCollapsed(globalCollapse);
+    }, [globalCollapse]);
+
+    // Reminder updated from web response
+    if (propReminder !== initialReminder) {
+        setReminder(initialReminder);
+        setPropReminder(initialReminder);
+    }
+
     return (
         <ReminderContext.Provider value={[reminder, setReminder]}>
             <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>