Add Ping Indicators

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

@@ -5,6 +5,8 @@ import { faCog, faPhoneSlash, faSignal } from '@fortawesome/free-solid-svg-icons
 import { actions as ui } from '../../../store/ui';
 import { getChannel, leaveVoiceChannel } from '../../../store/channels';
 import { getGuild } from '../../../store/guilds';
+import classNames from 'classnames';
+import { useEffect } from 'react';
  
 const SidebarFooter: React.FunctionComponent = () => {
   const dispatch = useDispatch();
@@ -14,14 +16,23 @@ const SidebarFooter: React.FunctionComponent = () => {
     const channelId = user.voice?.channelId;
     const channel = useSelector(getChannel(channelId ?? ''));
     const guild = useSelector(getGuild(channel?.guildId ?? ''));
+    const ping = useSelector((s: Store.AppState) => s.meta.ping);
 
     if (!channel || !guild) return null;
     
     return (
       <>
         <div className="justify-between flex items-center p-3 pr-4">
-          <div>
-            <FontAwesomeIcon icon={faSignal} className="success" />
+          <div title={ping ? `Ping ${ping}ms` : 'Pinging server...'}>
+            <FontAwesomeIcon
+              icon={faSignal}
+              className={classNames({
+                'success': ping && ping < 100,
+                'secondary': ping && ping >= 100 && ping < 200,
+                'warning': ping && ping >= 200 && ping < 300,
+                'danger': ping && ping >= 300,
+                'muted': !ping,
+              })} />
             <strong className="success ml-2">Voice Connected</strong>
             <div className="normal">{channel.name} / {guild.name}</div>
           </div>

frontend/src/store/meta.ts

@@ -7,12 +7,9 @@ const slice = createSlice({
     hasListenedToWS: false,
   } as Store.AppState['meta'],
   reducers: {
-    fetchedEntities: (meta) => {
-      meta.fetchedEntities = true;
-    },
-    listenedToWS: (meta) => {
-      meta.hasListenedToWS = true;
-    },
+    fetchedEntities: (meta) => { meta.fetchedEntities = true },
+    listenedToWS: (meta) => { meta.hasListenedToWS = true },
+    ping: (meta, { payload }) => { meta.ping = payload },
   }
 });
 export const actions = slice.actions;

types/store.d.ts

@@ -32,6 +32,7 @@ declare namespace Store {
     meta: {
       fetchedEntities: boolean;
       hasListenedToWS: boolean;
+      ping?: number;
     };
     ui: {
       openDropdown?: string;