Add server emoji picker

reminder-dashboard/src/api.ts

@@ -59,6 +59,11 @@ type RoleInfo = {
     name: string;
 };
 
+type EmojiInfo = {
+    fmt: string;
+    name: string;
+};
+
 type Template = {
     id: number;
     name: string;
@@ -125,6 +130,15 @@ export const fetchGuildRoles = (guild: string) => ({
     staleTime: GUILD_INFO_STALE_TIME,
 });
 
+export const fetchGuildEmojis = (guild: string) => ({
+    queryKey: ["GUILD_EMOJIS", guild],
+    queryFn: () =>
+        axios.get(`/dashboard/api/guild/${guild}/emojis`).then((resp) => resp.data) as Promise<
+            EmojiInfo[]
+        >,
+    staleTime: GUILD_INFO_STALE_TIME,
+});
+
 export const fetchGuildReminders = (guild: string) => ({
     queryKey: ["GUILD_REMINDERS", guild],
     queryFn: () =>

reminder-dashboard/src/components/App/Mentions.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "preact/hooks";
 import { useQuery } from "react-query";
-import { fetchGuildChannels, fetchGuildRoles } from "../../api";
+import { fetchGuildChannels, fetchGuildRoles, fetchGuildEmojis } from "../../api";
 import Tribute from "tributejs";
 import { useGuild } from "./useGuild";
 
@@ -9,6 +9,7 @@ export const Mentions = ({ input }) => {
 
     const { data: roles } = useQuery(fetchGuildRoles(guild));
     const { data: channels } = useQuery(fetchGuildChannels(guild));
+    const { data: emojis } = useQuery(fetchGuildEmojis(guild));
 
     const tribute = useMemo(() => {
         return new Tribute({
@@ -27,9 +28,16 @@ export const Mentions = ({ input }) => {
                     selectTemplate: (item) => `<#${item.original.value}>`,
                     menuItemTemplate: (item) => `#${item.original.key}`,
                 },
+                {
+                    trigger: ":",
+                    values: (emojis || []).map(({ fmt, name }) => ({ key: name, value: fmt })),
+                    allowSpaces: true,
+                    selectTemplate: (item) => item.original.value,
+                    menuItemTemplate: (item) => `:${item.original.key}:`,
+                },
             ],
         });
-    }, [roles, channels]);
+    }, [roles, channels, emojis]);
 
     useEffect(() => {
         tribute.detach(input.current);

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

@@ -8,6 +8,7 @@ export const GuildError = () => {
                         The bot may have just been restarted, in which case please try again in a
                         few minutes.
                         <br />
+                        <br />
                         Otherwise, please check Reminder Bot is in the server, and has correct
                         permissions.
                     </p>