Frontend: Emit Voice Channel Join

frontend/src/components/navigation/sidebar/channel-tabs.tsx

@@ -5,6 +5,7 @@ import { ContextMenuTrigger } from 'react-contextmenu';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import usePerms from '../../../hooks/use-perms';
+import { joinVoiceChannel } from '../../../store/channels';
 import { getGuildChannels } from '../../../store/guilds';
 import { actions as ui } from '../../../store/ui';
 import ChannelMenu from '../../ctx-menus/channel-menu';
@@ -21,9 +22,16 @@ const ChannelTabs: React.FunctionComponent = () => {
     const link = (channel.type === 'VOICE') ? '#' : `/channels/${activeGuild!.id}/${channel.id}`;
     const icon = { 'TEXT': faHashtag, 'VOICE': faVolumeUp }[channel.type];
 
+    const onClick = () => {
+      if (channel.type !== 'VOICE') return;
+      
+      dispatch(joinVoiceChannel(channel.id));
+    };
+
     return (
       <ContextMenuTrigger key={channel.id} id={channel.id}>
         <Link
+          onClick={onClick}
           to={link}
           className={classNames(
             `cursor-pointer flex items-center rounded h-8 p-2 pl-3`,

frontend/src/components/navigation/sidebar/sidebar-content.tsx

@@ -2,9 +2,9 @@ import SidebarFooter from './sidebar-footer';
 import { useDispatch } from 'react-redux';
 import { actions as ui } from '../../../store/ui';
 import GuildDropdown from '../../dropdowns/guild-dropdown';
+import ChannelTabs from './channel-tabs';
 
 import './sidebar-content.scoped.css';
-import ChannelTabs from './channel-tabs';
 
 const SidebarContent: React.FunctionComponent = () => {  
   const dispatch = useDispatch();

frontend/src/store/api.ts

@@ -21,5 +21,5 @@ export interface APIArgs {
 }
 export interface WSArgs {
   data?: object;
-  event: keyof WS.From;
+  event: keyof WS.To;
 }

frontend/src/store/channels.ts

@@ -48,6 +48,16 @@ export const updateChannel = (channelId: string, payload: Partial<Entity.Channel
   }));
 }
 
+export const joinVoiceChannel = (channelId: string) => (dispatch) => {
+  dispatch(api.wsCallBegan({
+    event: 'CHANNEL_JOIN',
+    data: { channelId } as WS.Params.ChannelJoin,
+  }));
+}
+export const leaveVoiceChannel = () => (dispatch) => {
+  dispatch(api.wsCallBegan({ event: 'CHANNEL_LEAVE' }));
+}
+
 export const getChannel = (id: string) =>
   createSelector<Store.AppState, Entity.Channel[], Entity.Channel | undefined>(
     state => state.entities.channels,

types/ws.d.ts

@@ -6,6 +6,10 @@ declare namespace WS {
     'CHANNEL_DELETE': WS.Params.ChannelDelete;
     /** Update a channel in a guild. */
     'CHANNEL_UPDATE': WS.Params.ChannelUpdate;
+    /** Join a voice channel and receive voice events. */
+    'CHANNEL_JOIN': WS.Params.ChannelJoin;
+    /** Leave the voice channel that the client is in. */
+    'CHANNEL_LEAVE': WS.Params.ChannelLeave;
     /** Create a guild. */
     'GUILD_CREATE': WS.Params.GuildCreate;
     /** Delete a guild. */
@@ -128,6 +132,11 @@ declare namespace WS {
       name?: string;
       overrides?: ChannelTypes.Override[];
     }
+    export interface ChannelJoin {
+      /** ID of the channel to join. */
+      channelId: string;
+    }
+    export interface ChannelLeave {}
     export interface GuildCreate {
       /** Name of the guild. */
       name: string;