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,
     });