Start migration to revolt.js@5.0.0.

200 error milestone

src/pages/settings/server/Bans.tsx

@@ -1,14 +1,12 @@
 import { XCircle } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Servers, Users } from "revolt.js/dist/api/objects";
 import { Route } from "revolt.js/dist/api/routes";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Server } from "../../../mobx";
-
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -27,7 +25,7 @@ export const Bans = observer(({ server }: Props) => {
     >(undefined);
 
     useEffect(() => {
-        client.servers.fetchBans(server._id).then(setData as any);
+        server.fetchBans().then(setData as any);
     }, []);
 
     return (
@@ -64,10 +62,7 @@ export const Bans = observer(({ server }: Props) => {
                             onClick={async () => {
                                 setDelete([...deleting, x._id.user]);
 
-                                await client.servers.unbanUser(
-                                    server._id,
-                                    x._id.user,
-                                );
+                                await server.unbanUser(x._id.user);
 
                                 setData({
                                     ...data,

src/pages/settings/server/Categories.tsx

@@ -1,16 +1,10 @@
-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 { Category } from "revolt-api/types/Servers";
+import { Server } from "revolt.js/dist/maps/Servers";
 import { ulid } from "ulid";
 
-import styles from "./Panes.module.scss";
-import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
-
-import { Server } from "../../../mobx";
-import { useData } from "../../../mobx/State";
+import { useContext, useState } from "preact/hooks";
 
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
@@ -30,15 +24,9 @@ interface Props {
 // ! FIXME: really bad code
 export const Categories = observer(({ server }: Props) => {
     const client = useContext(AppContext);
-    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 ?? [],
-    );
+    const channels = server.channels.filter((x) => typeof x !== "undefined");
 
+    const [cats, setCats] = useState<Category[]>(server.categories ?? []);
     const [name, setName] = useState("");
 
     return (
@@ -48,9 +36,7 @@ export const Categories = observer(({ server }: Props) => {
                 <Button
                     contrast
                     disabled={isEqual(server.categories ?? [], cats)}
-                    onClick={() =>
-                        client.servers.edit(server._id, { categories: cats })
-                    }>
+                    onClick={() => server.edit({ categories: cats })}>
                     save categories
                 </Button>
             </p>
@@ -116,13 +102,13 @@ export const Categories = observer(({ server }: Props) => {
                         }}>
                         <div style={{ flexShrink: 0 }}>
                             <ChannelIcon target={channel} size={24} />{" "}
-                            <span>{channel.name}</span>
+                            <span>{channel!.name}</span>
                         </div>
                         <ComboBox
                             style={{ flexGrow: 1 }}
                             value={
                                 cats.find((x) =>
-                                    x.channels.includes(channel._id),
+                                    x.channels.includes(channel!._id),
                                 )?.id ?? "none"
                             }
                             onChange={(e) =>
@@ -132,11 +118,11 @@ export const Categories = observer(({ server }: Props) => {
                                             ...x,
                                             channels: [
                                                 ...x.channels.filter(
-                                                    (y) => y !== channel._id,
+                                                    (y) => y !== channel!._id,
                                                 ),
                                                 ...(e.currentTarget.value ===
                                                 x.id
-                                                    ? [channel._id]
+                                                    ? [channel!._id]
                                                     : []),
                                             ],
                                         };

src/pages/settings/server/Invites.tsx

@@ -1,14 +1,12 @@
 import { XCircle } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
+import { ServerInvite } from "revolt-api/types/Invites";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Server } from "../../../mobx";
-import { useData } from "../../../mobx/State";
-
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
 
@@ -22,21 +20,18 @@ interface Props {
 
 export const Invites = observer(({ server }: Props) => {
     const [deleting, setDelete] = useState<string[]>([]);
-    const [invites, setInvites] = useState<
-        InvitesNS.ServerInvite[] | undefined
-    >(undefined);
+    const [invites, setInvites] = useState<ServerInvite[] | undefined>(
+        undefined,
+    );
 
-    const store = useData();
     const client = useClient();
-    const users = invites?.map((invite) => store.users.get(invite.creator));
+    const users = invites?.map((invite) => client.users.get(invite.creator));
     const channels = invites?.map((invite) =>
-        store.channels.get(invite.channel),
+        client.channels.get(invite.channel),
     );
 
     useEffect(() => {
-        client.servers
-            .fetchInvites(server._id)
-            .then((invites) => setInvites(invites));
+        server.fetchInvites().then(setInvites);
     }, []);
 
     return (
@@ -73,7 +68,7 @@ export const Invites = observer(({ server }: Props) => {
                         </span>
                         <span>
                             {channel && creator
-                                ? getChannelName(client, channel, true)
+                                ? getChannelName(channel, true)
                                 : "#??"}
                         </span>
                         <IconButton

src/pages/settings/server/Members.tsx

@@ -1,15 +1,14 @@
 import { ChevronDown } from "@styled-icons/boxicons-regular";
 import { isEqual } from "lodash";
 import { observer } from "mobx-react-lite";
-import { Servers } from "revolt.js/dist/api/objects";
+import { Member } from "revolt.js/dist/maps/Members";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Server } from "../../../mobx";
-import { useData } from "../../../mobx/State";
-
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -24,25 +23,21 @@ interface Props {
 
 export const Members = observer(({ server }: Props) => {
     const [selected, setSelected] = useState<undefined | string>();
-    const [members, setMembers] = useState<Servers.Member[] | undefined>(
-        undefined,
-    );
+    const [data, setData] = useState<
+        { members: Member[]; users: User[] } | undefined
+    >(undefined);
 
-    const store = useData();
     const client = useClient();
-    const users = members?.map((member) => store.users.get(member._id.user));
 
     useEffect(() => {
-        client.members
-            .fetchMembers(server._id)
-            .then((members) => setMembers(members));
+        server.fetchMembers().then(setData);
     }, []);
 
     const [roles, setRoles] = useState<string[]>([]);
     useEffect(() => {
         if (selected) {
             setRoles(
-                members!.find((x) => x._id.user === selected)?.roles ?? [],
+                data!.members.find((x) => x._id.user === selected)?.roles ?? [],
             );
         }
     }, [selected]);
@@ -50,15 +45,15 @@ export const Members = observer(({ server }: Props) => {
     return (
         <div className={styles.userList}>
             <div className={styles.subtitle}>
-                {members?.length ?? 0} Members
+                {data?.members.length ?? 0} Members
             </div>
-            {members &&
-                members.length > 0 &&
-                members
+            {data &&
+                data.members.length > 0 &&
+                data.members
                     .map((member, index) => {
                         return {
                             member,
-                            user: users![index],
+                            user: data.users[index],
                         };
                     })
                     .map(({ member, user }) => (
@@ -130,27 +125,11 @@ export const Members = observer(({ server }: Props) => {
                                             member.roles ?? [],
                                             roles,
                                         )}
-                                        onClick={async () => {
-                                            await client.members.editMember(
-                                                server._id,
-                                                member._id.user,
-                                                {
-                                                    roles,
-                                                },
-                                            );
-
-                                            setMembers(
-                                                members.map((x) =>
-                                                    x._id.user ===
-                                                    member._id.user
-                                                        ? {
-                                                              ...x,
-                                                              roles,
-                                                          }
-                                                        : x,
-                                                ),
-                                            );
-                                        }}>
+                                        onClick={() =>
+                                            member.edit({
+                                                roles,
+                                            })
+                                        }>
                                         <Text id="app.special.modals.actions.save" />
                                     </Button>
                                 </div>

src/pages/settings/server/Overview.tsx

@@ -1,6 +1,6 @@
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
-import { Servers } from "revolt.js/dist/api/objects";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
@@ -8,11 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
-import { Server } from "../../../mobx";
-import { useData } from "../../../mobx/State";
-
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
 
 import Button from "../../../components/ui/Button";
@@ -24,8 +21,7 @@ interface Props {
 }
 
 export const Overview = observer(({ server }: Props) => {
-    const client = useContext(AppContext);
-    const store = useData();
+    const client = useClient();
 
     const [name, setName] = useState(server.name);
     const [description, setDescription] = useState(server.description ?? "");
@@ -45,16 +41,14 @@ export const Overview = observer(({ server }: Props) => {
 
     const [changed, setChanged] = useState(false);
     function save() {
-        const changes: Partial<
-            Pick<Servers.Server, "name" | "description" | "system_messages">
-        > = {};
+        const changes: Record<string, any> = {};
         if (name !== server.name) changes.name = name;
         if (description !== server.description)
             changes.description = description;
         if (!isEqual(systemMessages, server.system_messages))
             changes.system_messages = systemMessages ?? undefined;
 
-        client.servers.edit(server._id, changes);
+        server.edit(changes);
         setChanged(false);
     }
 
@@ -68,17 +62,9 @@ export const Overview = observer(({ server }: Props) => {
                     fileType="icons"
                     behaviour="upload"
                     maxFileSize={2_500_000}
-                    onUpload={(icon) =>
-                        client.servers.edit(server._id, { icon })
-                    }
-                    previewURL={client.servers.getIconURL(
-                        server._id,
-                        { max_side: 256 },
-                        true,
-                    )}
-                    remove={() =>
-                        client.servers.edit(server._id, { remove: "Icon" })
-                    }
+                    onUpload={(icon) => server.edit({ icon })}
+                    previewURL={server.generateIconURL({ max_side: 256 }, true)}
+                    remove={() => server.edit({ remove: "Icon" })}
                 />
                 <div className={styles.name}>
                     <h3>
@@ -120,17 +106,9 @@ export const Overview = observer(({ server }: Props) => {
                 fileType="banners"
                 behaviour="upload"
                 maxFileSize={6_000_000}
-                onUpload={(banner) =>
-                    client.servers.edit(server._id, { banner })
-                }
-                previewURL={client.servers.getBannerURL(
-                    server._id,
-                    { width: 1000 },
-                    true,
-                )}
-                remove={() =>
-                    client.servers.edit(server._id, { remove: "Banner" })
-                }
+                onUpload={(banner) => server.edit({ banner })}
+                previewURL={server.generateBannerURL({ width: 1000 }, true)}
+                remove={() => server.edit({ remove: "Banner" })}
             />
 
             <h3>
@@ -176,11 +154,10 @@ export const Overview = observer(({ server }: Props) => {
                             <Text id="general.disabled" />
                         </option>
                         {server.channels
-                            .map((id) => store.channels.get(id)!)
                             .filter((x) => typeof x !== "undefined")
                             .map((channel) => (
-                                <option value={channel._id}>
-                                    {getChannelName(client, channel, true)}
+                                <option value={channel!._id}>
+                                    {getChannelName(channel!, true)}
                                 </option>
                             ))}
                     </ComboBox>

src/pages/settings/server/Roles.tsx

@@ -1,18 +1,13 @@
 import { Plus } from "@styled-icons/boxicons-regular";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
-import { Servers } from "revolt.js/dist/api/objects";
-import {
-    ChannelPermission,
-    ServerPermission,
-} from "revolt.js/dist/api/permissions";
+import { ChannelPermission, ServerPermission } from "revolt.js";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Server } from "../../../mobx";
-
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
@@ -73,20 +68,20 @@ export const Roles = observer(({ server }: Props) => {
 
     const save = () => {
         if (!isEqual(perm, getPermissions(role))) {
-            client.servers.setPermissions(server._id, role, {
+            server.setPermissions(role, {
                 server: perm[0],
                 channel: perm[1],
             });
         }
 
         if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
-            client.servers.editRole(server._id, role, { name, colour });
+            server.editRole(role, { name, colour });
         }
     };
 
     const deleteRole = () => {
         setRole("default");
-        client.servers.deleteRole(server._id, role);
+        server.deleteRole(role);
     };
 
     return (