Remove useChannel

src/components/navigation/left/HomeSidebar.tsx

@@ -43,10 +43,16 @@ const HomeSidebar = observer((props: Props) => {
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
-    const ctx = useForceUpdate();
-    const channels = useDMs(ctx);
+    const store = useData();
+    const channels = [...store.channels.values()]
+        .filter(
+            (x) =>
+                x.channel_type === "DirectMessage" ||
+                x.channel_type === "Group",
+        )
+        .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const obj = channels.find((x) => x?._id === channel);
+    const obj = store.channels.get(channel);
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
@@ -60,12 +66,7 @@ const HomeSidebar = observer((props: Props) => {
         });
     }, [channel]);
 
-    const channelsArr = channels
-        .filter((x) => x.channel_type !== "SavedMessages")
-        .map((x) => mapChannelWithUnread(x, props.unreads));
-
-    const store = useData();
-    channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
+    channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
         <GenericSidebarBase padding>
@@ -132,20 +133,22 @@ const HomeSidebar = observer((props: Props) => {
                         })
                     }
                 />
-                {channelsArr.length === 0 && (
+                {channels.length === 0 && (
                     <img src={placeholderSVG} loading="eager" />
                 )}
-                {channelsArr.map((x) => {
+                {channels.map((x) => {
                     let user;
-                    if (x.channel_type === "DirectMessage") {
-                        if (!x.active) return null;
+                    if (x.channel.channel_type === "DirectMessage") {
+                        if (!x.channel.active) return null;
 
-                        const recipient = client.channels.getRecipient(x._id);
+                        const recipient = client.channels.getRecipient(
+                            x.channel._id,
+                        );
                         user = store.users.get(recipient);
 
                         if (!user) {
                             console.warn(
-                                `Skipped DM ${x._id} because user was missing.`,
+                                `Skipped DM ${x.channel._id} because user was missing.`,
                             );
                             return null;
                         }
@@ -153,14 +156,14 @@ const HomeSidebar = observer((props: Props) => {
 
                     return (
                         <ConditionalLink
-                            active={x._id === channel}
-                            to={`/channel/${x._id}`}>
+                            active={x.channel._id === channel}
+                            to={`/channel/${x.channel._id}`}>
                             <ChannelButton
                                 user={user}
-                                channel={x}
+                                channel={x.channel}
                                 alert={x.unread}
                                 alertCount={x.alertCount}
-                                active={x._id === channel}
+                                active={x.channel._id === channel}
                             />
                         </ConditionalLink>
                     );

src/components/navigation/left/ServerListSidebar.tsx

@@ -186,16 +186,18 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 
     const ctx = useForceUpdate();
     const activeServers = useServers(undefined, ctx) as Servers.Server[];
-    const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
+    const channels = [...store.channels.values()].map((x) =>
         mapChannelWithUnread(x, unreads),
     );
 
-    const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
+    const unreadChannels = channels
+        .filter((x) => x.unread)
+        .map((x) => x.channel?._id);
 
     const servers = activeServers.map((server) => {
         let alertCount = 0;
         for (const id of server.channels) {
-            const channel = channels.find((x) => x._id === id);
+            const channel = channels.find((x) => x.channel?._id === id);
             if (channel?.alertCount) {
                 alertCount += channel.alertCount;
             }
@@ -224,8 +226,9 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     let alertCount = 0;
     for (const x of channels) {
         if (
-            ((x.channel_type === "DirectMessage" && x.active) ||
-                x.channel_type === "Group") &&
+            (x.channel?.channel_type === "DirectMessage"
+                ? x.channel?.active
+                : true) &&
             x.unread
         ) {
             homeUnread = "unread";

src/components/navigation/left/ServerSidebar.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
 import { Channels } from "revolt.js/dist/api/objects";
 import styled from "styled-components";
@@ -8,6 +9,7 @@ import { useEffect } from "preact/hooks";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 
+import { useData } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -53,7 +55,7 @@ const ServerList = styled.div`
     }
 `;
 
-function ServerSidebar(props: Props) {
+const ServerSidebar = observer((props: Props) => {
     const { server: server_id, channel: channel_id } =
         useParams<{ server?: string; channel?: string }>();
     const ctx = useForceUpdate();
@@ -61,13 +63,9 @@ function ServerSidebar(props: Props) {
     const server = useServer(server_id, ctx);
     if (!server) return <Redirect to="/" />;
 
-    const channels = (
-        useChannels(server.channels, ctx).filter(
-            (entry) => typeof entry !== "undefined",
-        ) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
-    ).map((x) => mapChannelWithUnread(x, props.unreads));
+    const store = useData();
 
-    const channel = channels.find((x) => x?._id === channel_id);
+    const channel = channel_id ? store.channels.get(channel_id) : undefined;
     if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
     if (channel) useUnreads({ ...props, channel }, ctx);
 
@@ -85,7 +83,7 @@ function ServerSidebar(props: Props) {
     const elements = [];
 
     function addChannel(id: string) {
-        const entry = channels.find((x) => x._id === id);
+        const entry = store.channels.get(id);
         if (!entry) return;
 
         const active = channel?._id === entry._id;
@@ -98,7 +96,8 @@ function ServerSidebar(props: Props) {
                 <ChannelButton
                     channel={entry}
                     active={active}
-                    alert={entry.unread}
+                    // ! FIXME: pull it out directly
+                    alert={mapChannelWithUnread(entry, props.unreads).unread}
                     compact
                 />
             </ConditionalLink>
@@ -141,7 +140,7 @@ function ServerSidebar(props: Props) {
             <PaintCounter small />
         </ServerBase>
     );
-}
+});
 
 export default connectState(ServerSidebar, (state) => {
     return {

src/components/navigation/left/common.ts

@@ -1,7 +1,6 @@
-import { Channel } from "revolt.js";
-
 import { useLayoutEffect } from "preact/hooks";
 
+import { Channel } from "../../../mobx";
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
@@ -63,12 +62,12 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
         channel.channel_type === "DirectMessage" ||
         channel.channel_type === "Group"
     ) {
-        last_message_id = channel.last_message?._id;
+        last_message_id = (channel.last_message as { _id: string })?._id;
     } else if (channel.channel_type === "TextChannel") {
-        last_message_id = channel.last_message;
+        last_message_id = channel.last_message as string;
     } else {
         return {
-            ...channel,
+            channel,
             unread: undefined,
             alertCount: undefined,
             timestamp: channel._id,
@@ -85,7 +84,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
                 unread = "mention";
             } else if (
                 u.last_id &&
-                last_message_id.localeCompare(u.last_id) > 0
+                (last_message_id as string).localeCompare(u.last_id) > 0
             ) {
                 unread = "unread";
             }
@@ -95,7 +94,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
     }
 
     return {
-        ...channel,
+        channel,
         timestamp: last_message_id ?? channel._id,
         unread,
         alertCount,