Merge pull request #43 from ZickZenni/direct-messages

feat: direct messages

src/discord/core/client.ts

@@ -77,6 +77,13 @@ export class Client extends TypedEmitter<ClientEvents> {
           this.users.cache.set(userData.id, new MainUser(userData));
         });
 
+        data.private_channels.forEach((channelData) => {
+          this.channels.cache.set(
+            channelData.id,
+            new MainChannel(this, channelData),
+          );
+        });
+
         this.relationships = data.relationships;
 
         this.users.clientUser = new MainUser(data.user);

src/discord/managers/ChannelManager.ts

@@ -1,6 +1,6 @@
 import { Client } from '../core/client';
 import { debug, error } from '../core/logger';
-import { IChannelData } from '../structures/channel/BaseChannel';
+import { ChannelType, IChannelData } from '../structures/channel/BaseChannel';
 import MainChannel from '../structures/channel/MainChannel';
 import { Snowflake } from '../structures/Snowflake';
 import Collection from '../util/collection';
@@ -27,6 +27,19 @@ export class ChannelManager {
     return this.cache.values().filter((v) => v.guildId === guildId);
   }
 
+  /**
+   * Returns all private channels (direct messages, groups) where the user is in
+   */
+  public listPrivate(): MainChannel[] {
+    return this.cache
+      .values()
+      .filter(
+        (v) =>
+          v.type === ChannelType.DirectMessage ||
+          v.type === ChannelType.GroupDM,
+      );
+  }
+
   public async fetch(
     options: SingleChannelFetchOptions | GuildChannelFetchOptions,
   ): Promise<MainChannel | MainChannel[] | null> {

src/discord/structures/channel/BaseChannel.ts

@@ -52,6 +52,8 @@ export interface IChannelData {
   permissions?: string;
   flags?: number;
   total_message_sent?: number;
+  recipient_ids?: Snowflake[];
+  is_spam?: boolean;
 }
 
 export interface CreateMessageOptions {
@@ -78,6 +80,12 @@ export default abstract class BaseChannel {
 
   public messages: Message[];
 
+  public recipientIds: Snowflake[];
+
+  public lastMessageId: Snowflake | null;
+
+  public icon: Snowflake | null;
+
   constructor(data: IChannelData, messages?: Message[]) {
     this.id = data.id;
     this.type = data.type;
@@ -86,6 +94,9 @@ export default abstract class BaseChannel {
     this.name = data.name ?? '';
     this.parentId = data.parent_id ?? null;
     this.messages = messages ?? [];
+    this.recipientIds = data.recipient_ids ?? [];
+    this.lastMessageId = data.last_message_id ?? null;
+    this.icon = data.icon ?? null;
 
     this.patch(data);
   }
@@ -99,6 +110,9 @@ export default abstract class BaseChannel {
       this.position = data.position ?? 0;
       this.name = data.name ?? '';
       this.parentId = data.parent_id ?? null;
+      this.recipientIds = data.recipient_ids || [];
+      this.lastMessageId = data.last_message_id ?? null;
+      this.icon = data.icon ?? null;
     }
   }
 
@@ -127,6 +141,9 @@ export default abstract class BaseChannel {
       position: this.position,
       name: this.name,
       parent_id: this.parentId,
+      recipient_ids: this.recipientIds,
+      last_message_id: this.lastMessageId,
+      icon: this.icon,
     };
   }
 }

src/discord/structures/channel/MainChannel.ts

@@ -7,7 +7,12 @@ import BaseChannel, {
   IChannelData,
 } from './BaseChannel';
 
-const supportedTypes = [ChannelType.GuildText, ChannelType.GuildAnnouncement];
+const supportedTypes = [
+  ChannelType.GuildText,
+  ChannelType.GuildAnnouncement,
+  ChannelType.GroupDM,
+  ChannelType.DirectMessage,
+];
 
 export default class MainChannel extends BaseChannel {
   private readonly client: Client;
@@ -67,7 +72,7 @@ export default class MainChannel extends BaseChannel {
   /* --------------------------- */
 
   private async fetchMessagesApi(): Promise<Message[]> {
-    if (this.type !== ChannelType.GuildText || this.client === null) return [];
+    if (!supportedTypes.includes(this.type) || this.client === null) return [];
 
     try {
       const json = await this.client.restGet(

src/discord/structures/channel/RendererChannel.ts

@@ -1,5 +1,5 @@
 import { Message } from '../Message';
-import BaseChannel, { CreateMessageOptions } from './BaseChannel';
+import BaseChannel, { ChannelType, CreateMessageOptions } from './BaseChannel';
 
 export default class RendererChannel extends BaseChannel {
   public async fetchMessages(): Promise<Message[]> {
@@ -18,4 +18,10 @@ export default class RendererChannel extends BaseChannel {
       options,
     );
   }
+
+  public getChannelIcon(): string | null {
+    if (this.type !== ChannelType.GroupDM || this.icon === null) return null;
+
+    return `https://cdn.discordapp.com/channel-icons/${this.id}/${this.icon}.webp?size=32`;
+  }
 }

src/discord/ws/types.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 
+import { IChannelData } from '../structures/channel/BaseChannel';
 import { IGuildData } from '../structures/guild/BaseGuild';
 import { Relationship } from '../structures/Relationship';
 import { IUserData } from '../structures/user/BaseUser';
@@ -139,4 +140,9 @@ export interface GatewayReadyDispatchData {
    * Your relationships with other users
    */
   relationships: Relationship[];
+
+  /**
+   * All private channels the user is in
+   */
+  private_channels: IChannelData[];
 }

src/main/app.ts

@@ -2,6 +2,7 @@
 import { app, BrowserWindow, Menu, shell, Tray } from 'electron';
 import fs from 'fs';
 import path from 'path';
+import { Snowflake } from '@/discord/structures/Snowflake';
 import logger, { Logger } from '../common/log/logger';
 import { Client } from '../discord/core/client';
 import { GatewayDispatchEvents, GatewaySocketEvent } from '../discord/ws/types';
@@ -206,7 +207,14 @@ export default class WaveCordApp {
     registerHandler('discord:user', (userId: string | undefined) => {
       if (userId === undefined) return this.discord.users.clientUser?.toRaw();
 
-      return null;
+      return this.discord.users.cache.get(userId) ?? null;
+    });
+
+    registerHandler('discord:users', (userIds: Snowflake[]) => {
+      return this.discord.users.cache
+        .values()
+        .filter((v) => userIds.includes(v.id))
+        .map((v) => v.toRaw());
     });
 
     registerHandler('discord:guilds', () => {
@@ -244,6 +252,10 @@ export default class WaveCordApp {
       },
     );
 
+    registerHandler('discord:private-channels', () => {
+      return this.discord.channels.listPrivate().map((v) => v.toRaw());
+    });
+
     registerHandler('tenor:fetch-gif', async (url: string) => {
       const result = await this.tenor.fetchGif(url);
       return result;

src/main/ipc.ts

@@ -16,11 +16,13 @@ export type IpcChannels =
   | 'discord:fetch-messages'
   | 'discord:fetch-guild'
   | 'discord:user'
+  | 'discord:users'
   | 'discord:get-last-visited-channel'
   | 'discord:set-last-visited-channel'
   | 'discord:create-message'
   | 'discord:gateway:message-create'
   | 'discord:relationships'
+  | 'discord:private-channels'
   | 'tenor:fetch-gif';
 
 export function registerHandler(

src/renderer/App.tsx

@@ -12,8 +12,12 @@ import '@/styles/channel/ChannelList.css';
 import '@/styles/channel/Message.css';
 import '@/styles/channel/MessageAttachment.css';
 
+import '@/styles/directmessage/DirectMessageButton.css';
+import '@/styles/directmessage/DirectMessageList.css';
+
 import '@/styles/page/GuildChannelPage.css';
 import '@/styles/page/GuildPage.css';
+import '@/styles/page/HomePage.css';
 import '@/styles/page/PageLayout.css';
 import '@/styles/page/PageSideBar.css';
 
@@ -33,6 +37,7 @@ import SideBar from '@/components/app/SideBar';
 import HomePage from '@/pages/HomePage/HomePage';
 import GuildPage from '@/pages/GuildPage/GuildPage';
 import GuildChannelPage from './pages/GuildPage/GuildChannelPage';
+import HomeChannelPage from './pages/HomePage/HomeChannelPage';
 
 export default function App() {
   return (
@@ -42,7 +47,9 @@ export default function App() {
         <SideBar />
         <UserPanel />
         <Routes>
-          <Route path="/" element={<HomePage />} />
+          <Route path="/" element={<HomePage />}>
+            <Route path="channel/:channelId" element={<HomeChannelPage />} />
+          </Route>
           <Route path="/guild/:guildId" element={<GuildPage />}>
             <Route path="channel/:channelId" element={<GuildChannelPage />} />
           </Route>

src/renderer/components/channel/Message.tsx

@@ -34,6 +34,7 @@ export default function Message({ message }: MessageProps) {
 
         {gif !== null ? (
           <img
+            className="Message--gif-img"
             src={gif.media_formats.find((v) => v.type === 'gif')?.url}
             alt="Gif"
           />

src/renderer/components/channel/MessageAttachment.tsx

@@ -10,6 +10,7 @@ function ImageAttachment({ attachment }: MessageAttachmentProps) {
       <img
         className="MessageAttachment--image"
         src={attachment.url}
+        loading="lazy"
         alt={`Attachment:${attachment.filename}`}
       />
     </div>

src/renderer/components/directmessage/DirectMessageButton.tsx

@@ -0,0 +1,71 @@
+import { ChannelType } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import useUser from '@/hooks/useUser';
+import useUsers from '@/hooks/useUsers';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+type DirectMessageButtonProps = {
+  channel: RendererChannel;
+};
+
+export default function DirectMessageButton({
+  channel,
+}: DirectMessageButtonProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const user = useUser(undefined);
+  const members = useUsers(channel.recipientIds ?? []);
+
+  if (user === null) return null;
+
+  const onClick = () => {
+    navigate(`/channel/${channel.id}`);
+  };
+
+  const getName = () => {
+    if (channel.type === ChannelType.GroupDM) {
+      if (channel.name.length > 0) return channel.name;
+
+      const membs = [user, ...members];
+      return membs
+        .map((v) => (v.globalName ? v.globalName : v.username))
+        .join(', ');
+    }
+
+    if (members.length === 0) return '';
+
+    const member = members[0];
+
+    if (member.globalName === null || member.globalName.length === 0)
+      return member.username;
+
+    return member.globalName;
+  };
+
+  const getIcon = () => {
+    if (members.length === 0) return '';
+
+    if (channel.type === ChannelType.GroupDM)
+      return channel.getChannelIcon() ?? members[0].getAvatarUrl();
+
+    return members[0].getAvatarUrl();
+  };
+
+  const isSelected = location.pathname.includes(`/channel/${channel.id}`);
+
+  return (
+    <div
+      className={`DirectMessage ${isSelected && 'DirectMessage--selected'}`}
+      role="presentation"
+      onClick={() => onClick()}
+    >
+      <img
+        className="DirectMessage--icon-img"
+        src={getIcon()}
+        alt="Direct Message Icon"
+      />
+      <p className="DirectMessage--name">{getName()}</p>
+    </div>
+  );
+}

src/renderer/components/directmessage/DirectMessageList.tsx

@@ -0,0 +1,31 @@
+import usePrivateChannels from '@/hooks/usePrivateChannels';
+import DirectMessageButton from './DirectMessageButton';
+
+export default function DirectMessageList() {
+  const channels = usePrivateChannels();
+
+  return (
+    <div className="DirectMessageList hidden-scrollbar">
+      {
+        /* Sort private channels by their last message id */
+        channels
+          .sort((a, b) => {
+            if (a.lastMessageId === null) return -1;
+
+            if (b.lastMessageId === null) return 1;
+
+            return Number(a.lastMessageId) - Number(b.lastMessageId);
+          })
+          .reverse()
+          .map((channel) => {
+            return (
+              <DirectMessageButton
+                key={`Channel:home:${channel.id}`}
+                channel={channel}
+              />
+            );
+          })
+      }
+    </div>
+  );
+}

src/renderer/hooks/useChannels.ts

@@ -16,7 +16,7 @@ export default function useChannels(guildId: string) {
         return true;
       })
       .catch((err) => console.error(err));
-  });
+  }, [guildId]);
 
   return channels;
 }

src/renderer/hooks/useGif.ts

@@ -10,7 +10,7 @@ export default function useGif(url: string): TenorGif | null {
     try {
       const uri = new URL(url);
 
-      if (allowedHosts.includes(uri.host.toLowerCase())) {
+      if (!allowedHosts.includes(uri.host.toLowerCase())) {
         setGif(null);
         return;
       }

src/renderer/hooks/usePrivateChannels.ts

@@ -0,0 +1,22 @@
+import { IChannelData } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { useEffect, useState } from 'react';
+
+/**
+ * Fetches all private channels from the user
+ */
+export default function usePrivateChannels() {
+  const [channels, setChannels] = useState<RendererChannel[]>([]);
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke('discord:private-channels')
+      .then((data: IChannelData[]) => {
+        setChannels(data.map((v) => new RendererChannel(v)));
+        return true;
+      })
+      .catch((err) => console.error(err));
+  }, []);
+
+  return channels;
+}