Refactored and fixed api endpoints

2023-12-02 13:52:01 -05:00
parent 046bf51697
commit dc2ff172b0
11 changed files with 238 additions and 182 deletions
--- a/ui/src/app/admin/page.tsx
+++ b/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>
+  );
+}