Auto select first guild

apps/website/package.json

@@ -83,4 +83,4 @@
     "typescript": "^5.4.5"
   },
   "prettier": "@mc/prettier-config"
-}
+}

apps/website/src/app/components/ProgressBarProvider.tsx

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
 
 const ProgressBarProvider = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -16,4 +16,4 @@ const ProgressBarProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ProgressBarProvider;
+export default ProgressBarProvider;

apps/website/src/app/dashboard/page.tsx

@@ -1,12 +1,56 @@
 "use client";
 
-import { MenuButton } from "./Menu";
+import { useEffect } from "react";
+import { useParams,   useRouter } from "next/navigation";
+import { Trans } from "react-i18next"; 
+
+import { LinkUnderlined } from "@mc/ui/LinkUnderlined";
+
+import { Routes } from "~/other/routes";
+import { api } from "~/trpc/react"; 
+import { TypographyH3 } from "@mc/ui/TypographyH3";
+import { TypographyH4 } from "@mc/ui/TypographyH4";
 
 export default function Page() {
+  const router = useRouter();
+  const selected = useParams();
+  const userGuildsQuery = api.discord.userGuilds.useQuery();
+
+  const hasAnythingSelected = Object.keys(selected).length > 0;
+
+  // Autoselect the first guild if no guild is selected yet.
+  useEffect(() => {
+    console.log(userGuildsQuery.data);
+
+    if (!userGuildsQuery.data) return;
+    if (!userGuildsQuery.data.userGuilds.size) return;
+    if (hasAnythingSelected) return;
+
+    const firstGuildId = [...userGuildsQuery.data.userGuilds.keys()][0];
+
+    router.replace(Routes.DashboardServers(firstGuildId));
+  }, [hasAnythingSelected, router, userGuildsQuery.data]);
+
   return (
-    <div className="flex flex-col p-1">
-      <MenuButton />
-      {"// TODO auto select first guild"}
+    <div className="flex flex-col p-1 grow justify-center items-center  h-full "> 
+      {!userGuildsQuery.isLoading && !userGuildsQuery.data?.userGuilds.size && (
+        <>
+          <TypographyH3>
+            <Trans i18nKey="pages.dashboard.noServers.heading" />
+          </TypographyH3>
+          <TypographyH4>
+            <Trans
+              i18nKey="pages.dashboard.noServers.subheading"
+              components={{
+                CreateServerLink: (
+                  <LinkUnderlined href={Routes.CreateDiscordServer} />
+                ),
+                JoinSupportServerLink: <LinkUnderlined href={Routes.Support} />,
+              }}
+            />
+          </TypographyH4>
+        </ >
+      )}
     </div>
   );
 }

apps/website/src/app/dashboard/servers/[guildId]/[channelId]/page.tsx

@@ -16,6 +16,7 @@ import { UserPermissionsContext } from "../UserPermissionsContext";
 import { EditTemplate } from "./sections/EditTemplate";
 import { EnableTemplate } from "./sections/EnableTemplate";
 import { TemplateError } from "./sections/TemplateError";
+
 // TODO fix: enable status is being set to its initial state when template content is changed
 export default function Page() {
   const { t } = useTranslation();

apps/website/src/app/layout.tsx

@@ -30,9 +30,7 @@ export default function RootLayout({
         <I18nProvider>
           <TRPCReactProvider>
             <NavBar />
-            <ProgressBarProvider>
-              {children}
-            </ProgressBarProvider>
+            <ProgressBarProvider>{children}</ProgressBarProvider>
           </TRPCReactProvider>
         </I18nProvider>
       </body>

apps/website/src/i18n/locales/en-US/main.json

@@ -86,6 +86,10 @@
       }
     },
     "dashboard": {
+      "noServers": {
+        "heading": "You aren't in any server. ",
+        "subheading": "Why you don't start by creating a <CreateServerLink>new one</CreateServerLink> or by <JoinSupportServerLink>joining us</JoinSupportServerLink>?"
+      },
       "servers": {
         "suggestedTopics": {
           "quickSetup": {
@@ -751,4 +755,4 @@
       }
     }
   }
-}
+}

apps/website/src/server/auth.ts

@@ -28,11 +28,11 @@ export function getOAuth2Url() {
 export async function exchangeTokens(
   exchangeMethod:
     | {
-      code: string;
-    }
+        code: string;
+      }
     | {
-      refreshToken: string;
-    },
+        refreshToken: string;
+      },
 ): Promise<Session> {
   let body = {};
   if ("code" in exchangeMethod) {

packages/common/src/Routes.ts

@@ -45,4 +45,5 @@ export const Routes = (baseUrl: string) => ({
     "/dashboard/servers" +
     (guildId ? `/${guildId}` : "") +
     (channelId ? `/${channelId}` : ""),
+  CreateDiscordServer: "https://discord.com/channels/@me",
 });

packages/validators/src/DiscordOAuth2TokenExchangeResponse.ts

@@ -18,4 +18,5 @@ export const DiscordOAuth2TokenExchangeResponseSchema = z.union([
         expiresAt: Date.now() + expires_in * 1000,
         scope: scope,
       }),
-    )]);
+    ),
+]);