Refactored and fixed api endpoints

ui/src/api/guilds.ts

@@ -1,14 +1,16 @@
-import { get, post } from '.';
+import { APIResponse, get, post } from '.';
 import { GuildChannel, GuildInfo } from './guilds.types';
 
 export async function getGuilds(): Promise<GuildInfo[]> {
   const response = await get('guilds');
-  return response?.json() || { data: [] };
+  const guilds: APIResponse<GuildInfo[]> = await response?.json();
+  return guilds.data || [];
 }
 
 export async function getTextChannels(guildId: number): Promise<GuildChannel[]> {
   const response = await get(`guilds/${guildId}/text`);
-  return response?.json() || { data: [] };
+  const channels: APIResponse<GuildChannel[]> = await response?.json();
+  return channels.data || [];
 }
 
 export async function sendMessage(guildId: number, channelId: number, message: string): Promise<void> {
@@ -17,7 +19,8 @@ export async function sendMessage(guildId: number, channelId: number, message: s
 
 export async function getVoiceChannels(guildId: number): Promise<GuildChannel[]> {
   const response = await get(`guilds/${guildId}/voice`);
-  return response?.json() || { data: [] };
+  const channels: APIResponse<GuildChannel[]> = await response?.json();
+  return channels.data || [];
 }
 
 export async function playTrack(guildId: number, channelId: number, track: string): Promise<void> {

ui/src/api/index.ts

@@ -41,6 +41,11 @@ export async function post(endpoint: string, body: any, options?: PostOptions):
   return response;
 }
 
+export interface APIResponse<T> {
+  data: T;
+  metadata: Metadata;
+}
+
 export interface Metadata {
   limit: number;
   page: number;

ui/src/app/admin/page.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import {
+  getGuilds,
+  getTextChannels,
+  getVoiceChannels,
+  getVolume,
+  pauseTrack,
+  playTrack,
+  resumeTrack,
+  sendMessage,
+  setVolume,
+  skipTrack,
+  stopTrack
+} from '@/api/guilds';
+import { GuildChannel, GuildInfo } from '@/api/guilds.types';
+import { Button, Card, Grid, Select, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import React, { useEffect, useState } from 'react';
+
+export default function Page() {
+  const [guilds, setGuilds] = useState<GuildInfo[]>([]);
+  const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
+  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
+  const [guildVolume, setGuildVolume] = useState<number>(50.0);
+
+  useEffect(() => {
+    getGuilds().then((g) => {
+      setGuilds(g);
+      if (g.length > 0) {
+        setActiveGuild(g[0]);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (activeGuild) {
+      getVoiceChannels(activeGuild.id).then((c) => setVoiceChannels(c));
+      getVolume(activeGuild.id).then((v) => setGuildVolume(v));
+    }
+  }, [activeGuild]);
+
+  return (
+    <Tabs orientation='vertical' defaultValue={activeGuild?.name}>
+      <Tabs.List>
+        {guilds && guilds.map((guild) => (
+          <Tabs.Tab key={`guild-tab-${guild.id}`} value={guild.name} onClick={() => setActiveGuild(guild)}>
+            {guild.name}
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+      {guilds && guilds.map((guild) => (
+        <Tabs.Panel key={`guild-${guild.id}`} value={guild.name}>
+          <h1>{guild.name}</h1>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextChannelCard guild={activeGuild} />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <VoiceChannelsCard guild={activeGuild} />
+            </Grid.Col>
+          </Grid>
+        </Tabs.Panel>
+      ))}
+    </Tabs>
+  );
+}
+
+function TextChannelCard({ guild }: { guild: GuildInfo | null }) {
+  const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
+  const [activeChannel, setActiveChannel] = useState<GuildChannel | null>(null);
+
+  const form = useForm({
+    initialValues: {
+      message: ''
+    }
+  });
+
+  useEffect(() => {
+    if (guild) {
+      getTextChannels(guild.id).then((c) => setTextChannels(c));
+    }
+  }, [guild]);
+
+  return (
+    <Card shadow='sm' style={{ margin: '1em' }}>
+      <Card.Section>
+        <h2>Text Channels</h2>
+        <Select
+          placeholder='Select channel...'
+          data={textChannels.map((channel, index) => {
+            return {
+              value: `${index}`,
+              label: channel.name
+            };
+          })}
+          onChange={(e) => {
+            if (e) {
+              setActiveChannel(textChannels[parseInt(e)]);
+            }
+          }}
+        />
+        {activeChannel && (
+          <form
+            style={{ margin: '1em' }}
+            onSubmit={form.onSubmit((values) => {
+              sendMessage(guild!.id, activeChannel.id, values.message);
+            })}
+          >
+            <Textarea placeholder='Message...' {...form.getInputProps('message')} />
+            <Button type='submit'>Send Message</Button>
+          </form>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}
+
+function VoiceChannelsCard({ guild }: { guild: GuildInfo | null }) {
+  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
+  const [guildVolume, setGuildVolume] = useState<number>(50.0);
+  const [activeChannel, setActiveChannel] = useState<GuildChannel | null>(null);
+
+  useEffect(() => {
+    if (guild) {
+      getVoiceChannels(guild.id).then((c) => setVoiceChannels(c));
+      getVolume(guild.id).then((v) => setGuildVolume(v));
+    }
+  }, [guild]);
+
+  const form = useForm({
+    initialValues: {
+      trackUrl: '',
+      volume: 50.0
+    }
+  });
+
+  return (
+    <Card shadow='sm' style={{ margin: '1em' }}>
+      <Card.Section>
+        <h2>Voice Channels</h2>
+        <Select
+          placeholder='Select channel...'
+          data={voiceChannels.map((channel, index) => {
+            return {
+              value: `${index}`,
+              label: channel.name
+            };
+          })}
+          onChange={(e) => {
+            if (e) {
+              setActiveChannel(voiceChannels[parseInt(e)]);
+            }
+          }}
+        />
+        {activeChannel && (
+          <>
+            <form
+              style={{ margin: '1em' }}
+              onSubmit={form.onSubmit((values) => setVolume(guild!.id, values.volume))}
+            >
+              <Slider
+                defaultValue={guildVolume}
+                {...form.getInputProps('volume')}
+                marks={[
+                  { value: 25, label: '25%' },
+                  { value: 50, label: '50%' },
+                  { value: 75, label: '75%' }
+                ]}
+              />
+              <Button type='submit'>Set Volume</Button>
+            </form>
+            <form
+            style={{ margin: '1em' }}
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <TextInput placeholder='Youtube URL...' />
+            <Button type='submit'>Play Track</Button>
+          </form>
+          <div style={{ margin: '1em' }}>
+                  <Button style={{ marginRight: '1em' }} onClick={() => skipTrack(guild!.id)}>
+                    Skip Track
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => stopTrack(guild!.id)}>
+                    Stop
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => pauseTrack(guild!.id)}>
+                    Pause
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => resumeTrack(guild!.id)}>
+                    Resume
+                  </Button>
+                </div>
+          </>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}

ui/src/app/management/page.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-import {
-  getGuilds,
-  getTextChannels,
-  getVoiceChannels,
-  getVolume,
-  pauseTrack,
-  playTrack,
-  resumeTrack,
-  sendMessage,
-  setVolume,
-  skipTrack,
-  stopTrack
-} from '@/api/guilds';
-import { GuildChannel, GuildInfo } from '@/api/guilds.types';
-import { Button, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import React, { useEffect, useState } from 'react';
-
-export default function Page() {
-  const [guilds, setGuilds] = useState<GuildInfo[]>([]);
-  const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
-  const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
-  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
-  const [guildVolume, setGuildVolume] = useState<number>(50.0);
-
-  useEffect(() => {
-    getGuilds().then((g) => {
-      setGuilds(g);
-      if (g.length > 0) {
-        setActiveGuild(g[0]);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (activeGuild) {
-      getTextChannels(activeGuild.id).then((c) => setTextChannels(c));
-      getVoiceChannels(activeGuild.id).then((c) => setVoiceChannels(c));
-      getVolume(activeGuild.id).then((v) => setGuildVolume(v));
-    }
-  }, [activeGuild]);
-
-  const playForm = useForm({
-    initialValues: {
-      message: '',
-      trackUrl: '',
-      volume: 50.0
-    }
-  });
-
-  return (
-    <Tabs orientation='vertical' defaultValue={activeGuild?.name}>
-      <Tabs.List>
-        {guilds.map((guild) => (
-          <Tabs.Tab key={`guild-tab-${guild.id}`} value={guild.name} onClick={() => setActiveGuild(guild)}>
-            {guild.name}
-          </Tabs.Tab>
-        ))}
-      </Tabs.List>
-      {guilds.map((guild) => (
-        <Tabs.Panel key={`guild-${guild.id}`} value={guild.name}>
-          <h1>{guild.name}</h1>
-          <h2>Text Channels</h2>
-          <Tabs orientation='horizontal' defaultValue={textChannels[0]?.name}>
-            <Tabs.List>
-              {textChannels.map((channel) => (
-                <Tabs.Tab key={`text-channel-tab-${channel.id}`} value={channel.name}>
-                  {channel.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-            {textChannels.map((channel) => (
-              <Tabs.Panel key={`text-channel-${channel.id}`} value={channel.name}>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => sendMessage(activeGuild!.id, channel.id, values.message))}
-                >
-                  <Textarea placeholder='Message...' {...playForm.getInputProps('message')} />
-                  <Button type='submit'>Send Message</Button>
-                </form>
-              </Tabs.Panel>
-            ))}
-          </Tabs>
-          <h2>Voice Channels</h2>
-          <Tabs orientation='horizontal' defaultValue={voiceChannels[0]?.name}>
-            <Tabs.List>
-              {voiceChannels.map((channel) => (
-                <Tabs.Tab key={`voice-channel-tab-${channel.id}`} value={channel.name}>
-                  {channel.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-            {voiceChannels.map((channel) => (
-              <Tabs.Panel key={`voice-channel-${channel.id}`} value={channel.name}>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => {
-                    playTrack(activeGuild!.id, channel.id, values.trackUrl);
-                  })}
-                >
-                  <TextInput placeholder='Youtube URL...' {...playForm.getInputProps('trackUrl')} />
-                  <Button type='submit'>Play Track</Button>
-                  <Button onClick={() => skipTrack(activeGuild!.id)}>Skip Track</Button>
-                </form>
-                <div style={{ margin: '1em' }}>
-                  <Button style={{ marginRight: '1em' }} onClick={() => stopTrack(activeGuild!.id)}>
-                    Stop
-                  </Button>
-                  <Button style={{ marginRight: '1em' }} onClick={() => pauseTrack(activeGuild!.id)}>
-                    Pause
-                  </Button>
-                  <Button style={{ marginRight: '1em' }} onClick={() => resumeTrack(activeGuild!.id)}>
-                    Resume
-                  </Button>
-                </div>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => setVolume(activeGuild!.id, values.volume))}
-                >
-                  <Slider
-                    defaultValue={guildVolume}
-                    {...playForm.getInputProps('volume')}
-                    marks={[
-                      { value: 25, label: '25%' },
-                      { value: 50, label: '50%' },
-                      { value: 75, label: '75%' }
-                    ]}
-                  />
-                  <Button type='submit'>Set Volume</Button>
-                </form>
-              </Tabs.Panel>
-            ))}
-          </Tabs>
-        </Tabs.Panel>
-      ))}
-    </Tabs>
-  );
-}

ui/src/components/Header/index.tsx

@@ -170,9 +170,9 @@ export default function Header() {
                     </Grid.Col>
                     {user.role == 'admin' && (
                       <Grid.Col span={12}>
-                        <Link href='/management'>
+                        <Link href='/admin'>
                           <Button fullWidth radius='md' size='xs' variant='default'>
-                            Management
+                            Administration
                           </Button>
                         </Link>
                       </Grid.Col>