Add mentioning for channels

reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx

@@ -0,0 +1,67 @@
+import { useGuild } from "../../App/useGuild";
+import { useReminder } from "../ReminderContext";
+import { useQuery } from "react-query";
+import { fetchGuildChannels, Reminder } from "../../../api";
+import { useCallback } from "preact/hooks";
+import { DateTime } from "luxon";
+import { Name } from "../Name";
+
+export const Guild = ({ toggleCollapsed }) => {
+    const guild = useGuild();
+    const [reminder] = useReminder();
+
+    const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
+
+    const channelName = useCallback(
+        (reminder: Reminder) => {
+            const channel = guildChannels.find((c) => c.id === reminder.channel);
+            return channel === undefined ? "" : channel.name;
+        },
+        [guildChannels],
+    );
+
+    let days, hours, minutes, seconds;
+    seconds = Math.floor(
+        DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
+    );
+    [days, seconds] = [Math.floor(seconds / 86400), seconds % 86400];
+    [hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600];
+    [minutes, seconds] = [Math.floor(seconds / 60), seconds % 60];
+
+    let string;
+    if (days !== 0) {
+        if (hours !== 0) {
+            string = `${days} days, ${hours} hours`;
+        } else {
+            string = `${days} days`;
+        }
+    } else if (hours !== 0) {
+        if (minutes !== 0) {
+            string = `${hours} hours, ${minutes} minutes`;
+        } else {
+            string = `${hours} hours`;
+        }
+    } else if (minutes !== 0) {
+        if (seconds !== 0) {
+            string = `${minutes} minutes, ${seconds} seconds`;
+        } else {
+            string = `${minutes} minutes`;
+        }
+    } else {
+        string = `${seconds} seconds`;
+    }
+
+    return (
+        <div class="columns is-mobile column reminder-topbar">
+            {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
+            <Name />
+            <div class="invert-collapses time-bar">in {string}</div>
+            <div class="hide-button-bar">
+                <button class="button hide-box" onClick={toggleCollapsed}>
+                    <span class="is-sr-only">Hide reminder</span>
+                    <i class="fas fa-chevron-down"></i>
+                </button>
+            </div>
+        </div>
+    );
+};

reminder-dashboard/src/components/Reminder/TopBar/User.tsx

@@ -0,0 +1,51 @@
+import { Name } from "../Name";
+import { DateTime } from "luxon";
+import { useReminder } from "../ReminderContext";
+
+export const User = ({ toggleCollapsed }) => {
+    const [reminder] = useReminder();
+
+    let days, hours, minutes, seconds;
+    seconds = Math.floor(
+        DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
+    );
+    [days, seconds] = [Math.floor(seconds / 86400), seconds % 86400];
+    [hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600];
+    [minutes, seconds] = [Math.floor(seconds / 60), seconds % 60];
+
+    let string;
+    if (days !== 0) {
+        if (hours !== 0) {
+            string = `${days} days, ${hours} hours`;
+        } else {
+            string = `${days} days`;
+        }
+    } else if (hours !== 0) {
+        if (minutes !== 0) {
+            string = `${hours} hours, ${minutes} minutes`;
+        } else {
+            string = `${hours} hours`;
+        }
+    } else if (minutes !== 0) {
+        if (seconds !== 0) {
+            string = `${minutes} minutes, ${seconds} seconds`;
+        } else {
+            string = `${minutes} minutes`;
+        }
+    } else {
+        string = `${seconds} seconds`;
+    }
+
+    return (
+        <div class="columns is-mobile column reminder-topbar">
+            <Name />
+            <div class="invert-collapses time-bar">in {string}</div>
+            <div class="hide-button-bar">
+                <button class="button hide-box" onClick={toggleCollapsed}>
+                    <span class="is-sr-only">Hide reminder</span>
+                    <i class="fas fa-chevron-down"></i>
+                </button>
+            </div>
+        </div>
+    );
+};

reminder-dashboard/src/components/Reminder/TopBar/index.tsx

@@ -0,0 +1,13 @@
+import { useGuild } from "../../App/useGuild";
+import { Guild } from "./Guild";
+import { User } from "./User";
+
+export const TopBar = ({ toggleCollapsed }) => {
+    const guild = useGuild();
+
+    if (guild) {
+        return <Guild toggleCollapsed={toggleCollapsed} />;
+    } else {
+        return <User toggleCollapsed={toggleCollapsed} />;
+    }
+};