Remove useChannel

src/pages/settings/server/Categories.tsx

@@ -1,5 +1,6 @@
 import { XCircle } from "@styled-icons/boxicons-regular";
 import isEqual from "lodash.isequal";
+import { observer } from "mobx-react-lite";
 import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
 import { Route } from "revolt.js/dist/api/routes";
 import { ulid } from "ulid";
@@ -8,8 +9,9 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { useChannels } from "../../../context/revoltjs/hooks";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -25,12 +27,12 @@ interface Props {
 }
 
 // ! FIXME: really bad code
-export function Categories({ server }: Props) {
+export const Categories = observer(({ server }: Props) => {
     const client = useContext(AppContext);
-    const channels = useChannels(server.channels) as (
-        | Channels.TextChannel
-        | Channels.VoiceChannel
-    )[];
+    const store = useData();
+    const channels = server.channels
+        .map((id) => store.channels.get(id)!)
+        .filter((x) => typeof x !== "undefined");
 
     const [cats, setCats] = useState<Servers.Category[]>(
         server.categories ?? [],
@@ -150,4 +152,4 @@ export function Categories({ server }: Props) {
             })}
         </div>
     );
-}
+});

src/pages/settings/server/Invites.tsx

@@ -9,7 +9,6 @@ import { useEffect, useState } from "preact/hooks";
 import { useData } from "../../../mobx/State";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
-import { useChannels, useForceUpdate } from "../../../context/revoltjs/hooks";
 import { getChannelName } from "../../../context/revoltjs/util";
 
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -26,14 +25,15 @@ export const Invites = observer(({ server }: Props) => {
         InvitesNS.ServerInvite[] | undefined
     >(undefined);
 
-    const ctx = useForceUpdate();
-    const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
-
     const store = useData();
+    const client = useClient();
     const users = invites?.map((invite) => store.users.get(invite.creator));
+    const channels = invites?.map((invite) =>
+        store.channels.get(invite.channel),
+    );
 
     useEffect(() => {
-        ctx.client.servers
+        client.servers
             .fetchInvites(server._id)
             .then((invites) => setInvites(invites));
     }, []);
@@ -57,7 +57,7 @@ export const Invites = observer(({ server }: Props) => {
             {typeof invites === "undefined" && <Preloader type="ring" />}
             {invites?.map((invite, index) => {
                 const creator = users![index];
-                const channel = channels.find((x) => x?._id === invite.channel);
+                const channel = channels![index];
 
                 return (
                     <div
@@ -72,14 +72,14 @@ export const Invites = observer(({ server }: Props) => {
                         </span>
                         <span>
                             {channel && creator
-                                ? getChannelName(ctx.client, channel, true)
+                                ? getChannelName(client, channel, true)
                                 : "#??"}
                         </span>
                         <IconButton
                             onClick={async () => {
                                 setDelete([...deleting, invite._id]);
 
-                                await ctx.client.deleteInvite(invite._id);
+                                await client.deleteInvite(invite._id);
 
                                 setInvites(
                                     invites?.filter(

src/pages/settings/server/Overview.tsx

@@ -1,4 +1,5 @@
 import isEqual from "lodash.isequal";
+import { observer } from "mobx-react-lite";
 import { Servers, Server } from "revolt.js/dist/api/objects";
 
 import styles from "./Panes.module.scss";
@@ -7,6 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
+import { useData } from "../../../mobx/State";
+
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
@@ -19,8 +22,9 @@ interface Props {
     server: Servers.Server;
 }
 
-export function Overview({ server }: Props) {
+export const Overview = observer(({ server }: Props) => {
     const client = useContext(AppContext);
+    const store = useData();
 
     const [name, setName] = useState(server.name);
     const [description, setDescription] = useState(server.description ?? "");
@@ -170,15 +174,14 @@ export function Overview({ server }: Props) {
                         <option value="disabled">
                             <Text id="general.disabled" />
                         </option>
-                        {server.channels.map((id) => {
-                            const channel = client.channels.get(id);
-                            if (!channel) return null;
-                            return (
-                                <option value={id}>
+                        {server.channels
+                            .map((id) => store.channels.get(id)!)
+                            .filter((x) => typeof x !== "undefined")
+                            .map((channel) => (
+                                <option value={channel._id}>
                                     {getChannelName(client, channel, true)}
                                 </option>
-                            );
-                        })}
+                            ))}
                     </ComboBox>
                 </p>
             ))}
@@ -190,4 +193,4 @@ export function Overview({ server }: Props) {
             </p>
         </div>
     );
-}
+});