feat: dashboard sidebar

app/contexts/CurrentGuildContext.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import { PartialGuild } from "../types"
+
+const Context = createContext<PartialGuild | null>(null)
+
+export default function CurrentGuildContext({
+  guild,
+  children,
+}: {
+  guild: PartialGuild
+  children: React.ReactNode
+}) {
+  return <Context.Provider value={guild}>{children}</Context.Provider>
+}
+
+export function useCurrentGuild(): PartialGuild {
+  const guild = useContext(Context)
+  if (!guild) {
+    throw new Error("No GuildContext.Provider found when calling useGuild")
+  }
+  return guild
+}

app/contexts/GuildsContext.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import { PartialGuild } from "../types"
+
+interface Guilds {
+  mutualGuilds: PartialGuild[]
+  inviteGuilds: PartialGuild[]
+}
+
+const Context = createContext<Guilds | null>(null)
+
+export default async function GuildsContext({
+  mutualGuilds,
+  inviteGuilds,
+  children,
+}: Guilds & {
+  children: React.ReactNode
+}) {
+  return (
+    <Context.Provider value={{ mutualGuilds, inviteGuilds }}>
+      {children}
+    </Context.Provider>
+  )
+}
+
+export function useGuilds(): Guilds {
+  const guilds = useContext(Context)
+  if (!guilds?.mutualGuilds || !guilds.inviteGuilds) {
+    throw new Error("No GuildContext.Provider found when calling useGuild")
+  }
+  return guilds
+}

app/dashboard/[guildId]/layout.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { notFound } from "next/navigation"
+import { useGuilds } from "@/app/contexts/GuildsContext"
+import CurrentGuildContext from "@/app/contexts/CurrentGuildContext"
+import { SidebarGuildList } from "@/components/GuildList"
+import { Separator } from "@/components/ui/separator"
+import GuildSidebarSections from "@/components/GuildSidebarSections"
+
+export default async function ServerLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: { guildId: string }
+}) {
+  const { mutualGuilds } = useGuilds()
+  console.log(params.guildId)
+  const guild = mutualGuilds.find((guild) => guild.id === params.guildId)
+  if (!guild) {
+    notFound()
+  }
+
+  return (
+    <CurrentGuildContext guild={guild}>
+      <div className="flex items-start h-[calc(100vh-65px)]">
+        <SidebarGuildList />
+        <Separator orientation="vertical" />
+        <GuildSidebarSections />
+        <Separator orientation="vertical" />
+        <main>{children}</main>
+      </div>
+    </CurrentGuildContext>
+  )
+}

app/dashboard/[guildId]/page.tsx

@@ -1,28 +1,8 @@
-import { getServerSession } from "next-auth"
-import authOptions from "@/app/api/auth/options"
-import { notFound } from "next/navigation"
-import { getGuilds } from "@/lib/utils"
+"use client"
 
-export default async function Dashboard({
-  params,
-}: {
-  params: { guildId: string }
-}) {
-  const session = await getServerSession(authOptions)
-  if (!session?.user.accessToken) {
-    notFound()
-  }
+import { useCurrentGuild } from "@/app/contexts/CurrentGuildContext"
 
-  const guilds = await getGuilds(`Bearer ${session.user.accessToken}`)
-
-  const guild = guilds.find((guild) => guild.id === params.guildId)
-  if (!guild) {
-    notFound()
-  }
-
-  return (
-    <div>
-      <h1>{JSON.stringify(guild)}</h1>
-    </div>
-  )
+export default async function Dashboard() {
+  const guild = useCurrentGuild()
+  return <h1>{JSON.stringify(guild)}</h1>
 }

app/dashboard/layout.tsx

@@ -0,0 +1,37 @@
+import { getGuilds, getSession } from "@/lib/utils"
+import GuildsContext from "../contexts/GuildsContext"
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await getSession()
+
+  const userGuilds = await getGuilds(`Bearer ${session.user.accessToken}`)
+  const botGuilds = await getGuilds(`Bot ${process.env.TOKEN}`)
+
+  // Guilds where the user has admin permissions
+  const adminUserGuilds = userGuilds.filter(
+    ({ permissions }) => (parseInt(permissions) & 0x20) === 0x20
+  )
+
+  // Guilds where the user has admin permissions and the bot is in
+  const mutualGuilds = adminUserGuilds.filter((guild) =>
+    botGuilds.some((botGuild) => botGuild.id === guild.id)
+  )
+
+  // Guilds where the user has admin permissions and the bot is not in
+  const adminUserGuildsFiltered = adminUserGuilds.filter(
+    (guild) => !mutualGuilds.some((mutualGuild) => mutualGuild.id === guild.id)
+  )
+
+  return (
+    <GuildsContext
+      mutualGuilds={mutualGuilds}
+      inviteGuilds={adminUserGuildsFiltered}
+    >
+      {children}
+    </GuildsContext>
+  )
+}

app/servers/loading.tsx → app/dashboard/loading.tsx

@@ -1,4 +1,4 @@
-import { ServerListSkeleton } from "@/components/ServerList"
+import { ServerListSkeleton } from "@/components/GuildList"
 
 export default function Loading() {
   return (

app/dashboard/page.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { ChooseGuildList } from "@/components/GuildList"
+import { useGuilds } from "../contexts/GuildsContext"
+
+export default async function Dashboard() {
+  const { mutualGuilds, inviteGuilds } = useGuilds()
+
+  return (
+    <div className="flex flex-col p-6">
+      <h1 className="text-4xl font-bold text-center">
+        Choose server to manage:
+      </h1>
+      <ChooseGuildList guilds={mutualGuilds} redirectToDashboard />
+      <h1 className="text-4xl font-bold text-center">Invite bot to server:</h1>
+      <ChooseGuildList guilds={inviteGuilds} />
+    </div>
+  )
+}

app/layout.tsx

@@ -10,7 +10,10 @@ import { Separator } from "@/components/ui/separator"
 const inter = Inter({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
-  title: "Skurczybyki Dashboard",
+  title: {
+    default: "Skurczybyki Dashboard",
+    template: "%s | Skurczybyki Dashboard",
+  },
   description: "Skurczybyki Discord Bot Dashboard",
 }
 

components/Dropdown.tsx

@@ -50,7 +50,7 @@ export default function Dropdown() {
         <DropdownMenuLabel>{session.user?.name}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <Link href="/servers">
+          <Link href="/dashboard">
             <DropdownMenuItem className="flex gap-2">
               <Server />
               <Label>Servers</Label>