Remove useChannel

src/components/common/AgeGate.tsx

@@ -1,10 +1,11 @@
+import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { Channel } from "revolt.js";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
+import { Channel } from "../../mobx";
 import { dispatch, getState } from "../../redux";
 
 import Button from "../ui/Button";
@@ -46,7 +47,7 @@ type Props = {
     channel: Channel;
 };
 
-export default function AgeGate(props: Props) {
+export default observer((props: Props) => {
     const history = useHistory();
     const [consent, setConsent] = useState(
         getState().sectionToggle["nsfw"] ?? false,
@@ -105,4 +106,4 @@ export default function AgeGate(props: Props) {
             </div>
         </Base>
     );
-}
+});

src/components/common/AutoComplete.tsx

@@ -5,7 +5,7 @@ import styled, { css } from "styled-components";
 
 import { StateUpdater, useState } from "preact/hooks";
 
-import { User } from "../../mobx";
+import { Channel, User } from "../../mobx";
 import { useData } from "../../mobx/State";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
@@ -28,7 +28,7 @@ export type AutoCompleteState =
             }
           | {
                 type: "channel";
-                matches: Channels.TextChannel[];
+                matches: Channel[];
             }
       ));
 
@@ -197,15 +197,13 @@ export function useAutoComplete(
             if (type === "channel" && searchClues?.channels) {
                 const channels = client.servers
                     .get(searchClues.channels.server)
-                    ?.channels.map((x) => client.channels.get(x))
-                    .filter(
-                        (x) => typeof x !== "undefined",
-                    ) as Channels.TextChannel[];
+                    ?.channels.map((x) => store.channels.get(x))
+                    .filter((x) => typeof x !== "undefined") as Channel[];
 
                 const matches = (
                     search.length > 0
                         ? channels.filter((channel) =>
-                              channel.name.toLowerCase().match(regex),
+                              channel.name!.toLowerCase().match(regex),
                           )
                         : channels
                 )

src/components/common/ChannelIcon.tsx

@@ -1,65 +1,67 @@
 import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { Channels } from "revolt.js/dist/api/objects";
 
 import { useContext } from "preact/hooks";
 
+import { Channel } from "../../mobx";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
 import { ImageIconBase, IconBaseProps } from "./IconBase";
 import fallback from "./assets/group.png";
 
-interface Props
-    extends IconBaseProps<
-        Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel
-    > {
+interface Props extends IconBaseProps<Channel> {
     isServerChannel?: boolean;
 }
 
-export default function ChannelIcon(
-    props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
-) {
-    const client = useContext(AppContext);
+export default observer(
+    (
+        props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
+    ) => {
+        const client = useContext(AppContext);
 
-    const {
-        size,
-        target,
-        attachment,
-        isServerChannel: server,
-        animate,
-        children,
-        as,
-        ...imgProps
-    } = props;
-    const iconURL = client.generateFileURL(
-        target?.icon ?? attachment,
-        { max_side: 256 },
-        animate,
-    );
-    const isServerChannel =
-        server ||
-        (target &&
-            (target.channel_type === "TextChannel" ||
-                target.channel_type === "VoiceChannel"));
+        const {
+            size,
+            target,
+            attachment,
+            isServerChannel: server,
+            animate,
+            children,
+            as,
+            ...imgProps
+        } = props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
+        const isServerChannel =
+            server ||
+            (target &&
+                (target.channel_type === "TextChannel" ||
+                    target.channel_type === "VoiceChannel"));
 
-    if (typeof iconURL === "undefined") {
-        if (isServerChannel) {
-            if (target?.channel_type === "VoiceChannel") {
-                return <VolumeFull size={size} />;
+        if (typeof iconURL === "undefined") {
+            if (isServerChannel) {
+                if (target?.channel_type === "VoiceChannel") {
+                    return <VolumeFull size={size} />;
+                }
+                return <Hash size={size} />;
             }
-            return <Hash size={size} />;
         }
-    }
 
-    return (
-        // ! fixme: replace fallback with <picture /> + <source />
-        <ImageIconBase
-            {...imgProps}
-            width={size}
-            height={size}
-            loading="lazy"
-            aria-hidden="true"
-            square={isServerChannel}
-            src={iconURL ?? fallback}
-        />
-    );
-}
+        return (
+            // ! fixme: replace fallback with <picture /> + <source />
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                loading="lazy"
+                aria-hidden="true"
+                square={isServerChannel}
+                src={iconURL ?? fallback}
+            />
+        );
+    },
+);

src/components/common/messaging/MessageBox.tsx

@@ -1,7 +1,6 @@
 import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid";
 import { Styleshare } from "@styled-icons/simple-icons";
 import Axios, { CancelTokenSource } from "axios";
-import { Channel } from "revolt.js";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
 import styled from "styled-components";
 import { ulid } from "ulid";
@@ -20,6 +19,7 @@ import {
     SMOOTH_SCROLL_ON_RECEIVE,
 } from "../../../lib/renderer/Singleton";
 
+import { Channel } from "../../../mobx";
 import { dispatch, getState } from "../../../redux";
 import { Reply } from "../../../redux/reducers/queue";
 
@@ -360,7 +360,7 @@ export default function MessageBox({ channel }: Props) {
         users: { type: "channel", id: channel._id },
         channels:
             channel.channel_type === "TextChannel"
-                ? { server: channel.server }
+                ? { server: channel.server! }
                 : undefined,
     });
 

src/components/navigation/items/ButtonItem.tsx

@@ -10,7 +10,7 @@ import { Localizer, Text } from "preact-i18n";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { stopPropagation } from "../../../lib/stopPropagation";
 
-import { User } from "../../../mobx";
+import { Channel, User } from "../../../mobx";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
@@ -34,8 +34,8 @@ type CommonProps = Omit<
 
 type UserProps = CommonProps & {
     user: User;
-    context?: Channels.Channel;
-    channel?: Channels.DirectMessageChannel;
+    context?: Channel;
+    channel?: Channel;
 };
 
 export const UserButton = observer((props: UserProps) => {
@@ -73,7 +73,7 @@ export const UserButton = observer((props: UserProps) => {
                 {
                     <div className={styles.subText}>
                         {channel?.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <UserStatus user={user} />
                         )}
@@ -115,12 +115,12 @@ export const UserButton = observer((props: UserProps) => {
 });
 
 type ChannelProps = CommonProps & {
-    channel: Channels.Channel & { unread?: string };
+    channel: Channel & { unread?: string };
     user?: User;
     compact?: boolean;
 };
 
-export function ChannelButton(props: ChannelProps) {
+export const ChannelButton = observer((props: ChannelProps) => {
     const { active, alert, alertCount, channel, user, compact, ...divProps } =
         props;
 
@@ -153,12 +153,12 @@ export function ChannelButton(props: ChannelProps) {
                 {channel.channel_type === "Group" && (
                     <div className={styles.subText}>
                         {channel.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <Text
                                 id="quantities.members"
-                                plural={channel.recipients.length}
-                                fields={{ count: channel.recipients.length }}
+                                plural={channel.recipients!.length}
+                                fields={{ count: channel.recipients!.length }}
                             />
                         )}
                     </div>
@@ -186,7 +186,7 @@ export function ChannelButton(props: ChannelProps) {
             </div>
         </div>
     );
-}
+});
 
 type ButtonProps = CommonProps & {
     onClick?: () => void;

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,

src/components/navigation/right/MemberSidebar.tsx

@@ -8,6 +8,7 @@ import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Channel } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 import { getState } from "../../../redux";
 
@@ -17,11 +18,7 @@ import {
     ClientStatus,
     StatusContext,
 } from "../../../context/revoltjs/RevoltClient";
-import {
-    HookContext,
-    useChannel,
-    useForceUpdate,
-} from "../../../context/revoltjs/hooks";
+import { HookContext } from "../../../context/revoltjs/hooks";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import Button from "../../ui/Button";
@@ -34,27 +31,19 @@ import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { UserButton } from "../items/ButtonItem";
 import { ChannelDebugInfo } from "./ChannelDebugInfo";
 
-interface Props {
-    ctx: HookContext;
-}
-
-export default function MemberSidebar(props: { channel?: Channels.Channel }) {
-    const ctx = useForceUpdate();
-    const { channel: cid } = useParams<{ channel: string }>();
-    const channel = props.channel ?? useChannel(cid, ctx);
-
+export default function MemberSidebar({ channel }: { channel?: Channel }) {
     switch (channel?.channel_type) {
         case "Group":
-            return <GroupMemberSidebar channel={channel} ctx={ctx} />;
+            return <GroupMemberSidebar channel={channel} />;
         case "TextChannel":
-            return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+            return <ServerMemberSidebar channel={channel} />;
         default:
             return null;
     }
 }
 
 export const GroupMemberSidebar = observer(
-    ({ channel }: Props & { channel: Channels.GroupChannel }) => {
+    ({ channel }: { channel: Channel }) => {
         const { openScreen } = useIntermediate();
 
         const store = useData();
@@ -77,7 +66,7 @@ export const GroupMemberSidebar = observer(
         voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
     }*/
 
-        members.sort((a, b) => {
+        members?.sort((a, b) => {
             // ! FIXME: should probably rewrite all this code
             const l =
                 +(
@@ -141,21 +130,21 @@ export const GroupMemberSidebar = observer(
                                 text={
                                     <span>
                                         <Text id="app.main.categories.members" />{" "}
-                                        — {channel.recipients.length}
+                                        — {channel.recipients?.length ?? 0}
                                     </span>
                                 }
                             />
                         }>
-                        {members.length === 0 && (
+                        {members?.length === 0 && (
                             <img src={placeholderSVG} loading="eager" />
                         )}
-                        {members.map(
+                        {members?.map(
                             (user) =>
                                 user && (
                                     <UserButton
                                         key={user._id}
                                         user={user}
-                                        context={channel}
+                                        context={channel!}
                                         onClick={() =>
                                             openScreen({
                                                 id: "profile",
@@ -173,7 +162,7 @@ export const GroupMemberSidebar = observer(
 );
 
 export const ServerMemberSidebar = observer(
-    ({ channel }: Props & { channel: Channels.TextChannel }) => {
+    ({ channel }: { channel: Channel }) => {
         const [members, setMembers] = useState<Servers.Member[] | undefined>(
             undefined,
         );
@@ -193,7 +182,7 @@ export const ServerMemberSidebar = observer(
                 typeof members === "undefined"
             ) {
                 client.members
-                    .fetchMembers(channel.server)
+                    .fetchMembers(channel.server!)
                     .then((members) => setMembers(members));
             }
         }, [status]);