Remove useChannel

src/pages/channels/Channel.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { useParams, useHistory } from "react-router-dom";
 import { Channels } from "revolt.js/dist/api/objects";
 import styled from "styled-components";
@@ -6,10 +7,10 @@ import { useState } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
+import { Channel as MobXChannel } from "../../mobx";
+import { useData } from "../../mobx/State";
 import { dispatch, getState } from "../../redux";
 
-import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
-
 import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
@@ -36,19 +37,19 @@ const ChannelContent = styled.div`
 `;
 
 export function Channel({ id }: { id: string }) {
-    const ctx = useForceUpdate();
-    const channel = useChannel(id, ctx);
-
+    const store = useData();
+    const channel = store.channels.get(id);
     if (!channel) return null;
 
     if (channel.channel_type === "VoiceChannel") {
         return <VoiceChannel channel={channel} />;
     }
+
     return <TextChannel channel={channel} />;
 }
 
 const MEMBERS_SIDEBAR_KEY = "sidebar_members";
-function TextChannel({ channel }: { channel: Channels.Channel }) {
+const TextChannel = observer(({ channel }: { channel: MobXChannel }) => {
     const [showMembers, setMembers] = useState(
         getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
     );
@@ -61,7 +62,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
             gated={
                 (channel.channel_type === "TextChannel" ||
                     channel.channel_type === "Group") &&
-                channel.name.includes("nsfw")
+                channel.name?.includes("nsfw")
+                    ? true
+                    : false
             }>
             <ChannelHeader
                 channel={channel}
@@ -96,9 +99,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
             </ChannelMain>
         </AgeGate>
     );
-}
+});
 
-function VoiceChannel({ channel }: { channel: Channels.Channel }) {
+function VoiceChannel({ channel }: { channel: MobXChannel }) {
     return (
         <>
             <ChannelHeader channel={channel} />

src/pages/channels/ChannelHeader.tsx

@@ -2,14 +2,13 @@ import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observable } from "mobx";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
 import styled from "styled-components";
 
 import { useContext } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
-import { User } from "../../mobx";
+import { Channel, User } from "../../mobx";
 import { useData } from "../../mobx/State";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
@@ -131,7 +130,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
                                 onClick={() =>
                                     openScreen({
                                         id: "channel_info",
-                                        channel_id: channel._id,
+                                        channel,
                                     })
                                 }>
                                 <Markdown

src/pages/channels/actions/HeaderActions.tsx

@@ -41,7 +41,7 @@ export default function HeaderActions({
                         onClick={() =>
                             openScreen({
                                 id: "user_picker",
-                                omit: channel.recipients,
+                                omit: channel.recipients!,
                                 callback: async (users) => {
                                     for (const user of users) {
                                         await client.channels.addMember(

src/pages/channels/messaging/ConversationStart.tsx

@@ -1,8 +1,11 @@
+import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { useChannel, useForceUpdate } from "../../../context/revoltjs/hooks";
+import { useData } from "../../../mobx/State";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
 
 const StartBase = styled.div`
@@ -24,17 +27,18 @@ interface Props {
     id: string;
 }
 
-export default function ConversationStart({ id }: Props) {
-    const ctx = useForceUpdate();
-    const channel = useChannel(id, ctx);
+export default observer(({ id }: Props) => {
+    const store = useData();
+    const client = useClient();
+    const channel = store.channels.get(id);
     if (!channel) return null;
 
     return (
         <StartBase>
-            <h1>{getChannelName(ctx.client, channel, true)}</h1>
+            <h1>{getChannelName(client, channel, true)}</h1>
             <h4>
                 <Text id="app.main.channel.start.group" />
             </h4>
         </StartBase>
     );
-}
+});