Make Embed Generator stateless and rely on Stateway

embedg-app/package.json

@@ -15,6 +15,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@formkit/auto-animate": "^1.0.0-beta.6",
     "@heroicons/react": "^2.0.17",
+    "@openpanel/web": "^1.3.0",
     "@types/debounce": "^1.2.1",
     "@types/react-twemoji": "^0.4.1",
     "@uiw/codemirror-theme-github": "^4.19.11",

embedg-app/src/components/AnalyticsProvider.tsx

@@ -0,0 +1,27 @@
+import { OpenPanel } from "@openpanel/web";
+import { useEffect } from "react";
+import { useUserQuery } from "../api/queries";
+
+export const op = new OpenPanel({
+  clientId: "f4dd2f20-2d9f-4ff5-9486-6d88b5326fc7",
+  apiUrl: "https://analytics.vaven.io/api",
+  trackScreenViews: true,
+  trackOutgoingLinks: true,
+});
+
+export default function AnalyticsProvider() {
+  const { data } = useUserQuery();
+
+  const user = data?.success ? data.data : null;
+
+  useEffect(() => {
+    if (user?.id) {
+      op.identify({
+        profileId: user.id,
+        firstName: user.name,
+      });
+    }
+  }, [user?.id, op.identify]);
+
+  return null;
+}

embedg-app/src/components/ChannelSelect.tsx

@@ -1,11 +1,13 @@
 import {
+  ArrowPathIcon,
   ChatBubbleLeftRightIcon,
   ChevronDownIcon,
 } from "@heroicons/react/24/outline";
 import clsx from "clsx";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useGuildChannelsQuery } from "../api/queries";
 import ClickOutsideHandler from "./ClickOutsideHandler";
+import { useToasts } from "../util/toasts";
 
 interface Props {
   guildId: string | null;
@@ -27,6 +29,7 @@ function canSelectChannelType(type: number) {
 
 export function ChannelSelect({ guildId, channelId, onChange }: Props) {
   const { data } = useGuildChannelsQuery(guildId);
+  const toast = useToasts((state) => state.create);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -48,6 +51,16 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
     setOpen(false);
   }
 
+  useEffect(() => {
+    if (data?.success === false) {
+      toast({
+        title: "Failed to load channels",
+        message: data.error.message,
+        type: "error",
+      });
+    }
+  }, [data]);
+
   const channels = useMemo(() => {
     const rawChannels = data?.success ? data.data : [];
 
@@ -56,6 +69,7 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
       a.position === b.position && a.type === 4 ? 1 : a.position - b.position
     );
 
+    const added = new Set<string>();
     const res = [];
 
     // This is really inefficient but it should be fine because there are never more than 500 channels
@@ -70,6 +84,7 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
         rootChannel.type === 15
       ) {
         // text, category, announcement, stage, forum
+        added.add(rootChannel.id);
         res.push({
           ...rootChannel,
           level: 0,
@@ -93,6 +108,7 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
           childChannel.type === 15
         ) {
           // text, announcement, announcement thread, text thread, stage, forum
+          added.add(childChannel.id);
           res.push({
             ...childChannel,
             level: 1,
@@ -112,6 +128,7 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
             childThread.type === 12
           ) {
             // announcement thread, text thread
+            added.add(childThread.id);
             res.push({
               ...childThread,
               level: 2,
@@ -125,6 +142,18 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
       }
     }
 
+    for (const channel of rawChannels) {
+      if (added.has(channel.id)) continue;
+      res.push({
+        ...channel,
+        level: 2,
+        canSelect:
+          channel.user_access &&
+          channel.bot_access &&
+          canSelectChannelType(channel.type),
+      });
+    }
+
     return res;
   }, [data]);
 
@@ -159,7 +188,12 @@ export function ChannelSelect({ guildId, channelId, onChange }: Props) {
             )}
           />
           <div className={open ? "md:hidden" : ""}>
-            {channel ? (
+            {!data ? (
+              <div className="flex items-center space-x-2">
+                <ArrowPathIcon className="h-5 w-5 text-gray-300 animate-spin" />
+                <div className="text-gray-400">Loading...</div>
+              </div>
+            ) : channel ? (
               <div className="flex items-center space-x-2 cursor-pointer w-full">
                 {channel.type === 15 ? (
                   <ChatBubbleLeftRightIcon className="h-5 w-5 text-gray-300" />

embedg-app/src/components/GuildSelect.tsx

@@ -4,6 +4,8 @@ import { useEffect, useMemo, useState } from "react";
 import { useGuildsQuery } from "../api/queries";
 import { guildIconUrl } from "../discord/cdn";
 import ClickOutsideHandler from "./ClickOutsideHandler";
+import { useToasts } from "../util/toasts";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 
 interface Props {
   guildId: string | null;
@@ -12,6 +14,17 @@ interface Props {
 
 export default function GuildSelect({ guildId, onChange }: Props) {
   const { data: guilds, isLoading } = useGuildsQuery();
+  const toast = useToasts((state) => state.create);
+
+  useEffect(() => {
+    if (guilds?.success === false) {
+      toast({
+        title: "Failed to load guilds",
+        message: guilds.error.message,
+        type: "error",
+      });
+    }
+  }, [guilds]);
 
   const guild = useMemo(
     () => guilds?.success && guilds.data.find((g) => g.id === guildId),
@@ -56,7 +69,12 @@ export default function GuildSelect({ guildId, onChange }: Props) {
           role="button"
           className="flex-auto"
         >
-          {guild ? (
+          {!guilds ? (
+            <div className="flex items-center space-x-2">
+              <ArrowPathIcon className="h-5 w-5 text-gray-300 animate-spin" />
+              <div className="text-gray-400">Loading...</div>
+            </div>
+          ) : guild ? (
             <div className="flex items-center space-x-2 cursor-pointer w-full">
               <img
                 src={guildIconUrl(guild)}

embedg-app/src/main.tsx

@@ -6,12 +6,14 @@ import { QueryClientProvider } from "react-query";
 import queryClient from "./api/client";
 import { BrowserRouter } from "react-router-dom";
 import { baseUrl } from "./util/url";
+import AnalyticsProvider from "./components/AnalyticsProvider";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <BrowserRouter basename={baseUrl}>
         <App />
+        <AnalyticsProvider />
       </BrowserRouter>
     </QueryClientProvider>
   </React.StrictMode>