Add dashboard to build

reminder-dashboard/src/components/Guild/GuildReminders.tsx

@@ -0,0 +1,130 @@
+import { useParams } from "wouter";
+import { useQuery } from "react-query";
+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" }}>
+            <strong>Create Reminder</strong>
+            <div id={"reminderCreator"}>
+                <CreateReminder />
+            </div>
+            <br></br>
+            <div class={"field"}>
+                <div class={"columns is-mobile"}>
+                    <div class={"column"}>
+                        <strong>Reminders</strong>
+                    </div>
+                    <div class={"column is-narrow"}>
+                        <div class="control has-icons-left">
+                            <div class="select is-small">
+                                <select
+                                    id="orderBy"
+                                    onInput={(ev) => {
+                                        setSort(ev.currentTarget.value as Sort);
+                                    }}
+                                >
+                                    <option value={Sort.Time} selected={sort == Sort.Time}>
+                                        Time
+                                    </option>
+                                    <option value={Sort.Name} selected={sort == Sort.Name}>
+                                        Name
+                                    </option>
+                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
+                                        Channel
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="icon is-small is-left">
+                                <i class="fas fa-sort-amount-down"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class={"column is-narrow"}>
+                        <div class="control has-icons-left">
+                            <div class="select is-small">
+                                <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>
+                                </select>
+                            </div>
+                            <div class="icon is-small is-left">
+                                <i class="fas fa-expand-arrows"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id={"guildReminders"}>
+                {isSuccess &&
+                    guildReminders
+                        .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>
+    );
+};