Zero error milestone.

src/components/navigation/BottomNavigation.tsx

@@ -1,12 +1,10 @@
-import { Search } from "@styled-icons/boxicons-regular";
-import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
+import { Message, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components";
 
 import ConditionalLink from "../../lib/ConditionalLink";
 
-import { useData } from "../../mobx/State";
 import { connectState } from "../../redux/connector";
 import { LastOpened } from "../../redux/reducers/last_opened";
 
@@ -55,8 +53,7 @@ interface Props {
 
 export const BottomNavigation = observer(({ lastOpened }: Props) => {
     const client = useClient();
-    const store = useData();
-    const user = store.users.get(client.user!._id);
+    const user = client.users.get(client.user!._id);
 
     const history = useHistory();
     const path = useLocation().pathname;

src/components/navigation/items/ButtonItem.tsx

@@ -1,6 +1,8 @@
 import { X, Crown } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Channels, Users } from "revolt.js/dist/api/objects";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
@@ -10,8 +12,6 @@ import { Localizer, Text } from "preact-i18n";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { stopPropagation } from "../../../lib/stopPropagation";
 
-import { Channel, User } from "../../../mobx";
-
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import ChannelIcon from "../../common/ChannelIcon";
@@ -51,8 +51,7 @@ export const UserButton = observer((props: UserProps) => {
             data-alert={typeof alert === "string"}
             data-online={
                 typeof channel !== "undefined" ||
-                (user.online &&
-                    user.status?.presence !== Users.Presence.Invisible)
+                (user.online && user.status?.presence !== Presence.Invisible)
             }
             onContextMenu={attachContextMenu("Menu", {
                 user: user._id,
@@ -82,7 +81,7 @@ export const UserButton = observer((props: UserProps) => {
             </div>
             <div className={styles.button}>
                 {context?.channel_type === "Group" &&
-                    context.owner === user._id && (
+                    context.owner_id === user._id && (
                         <Localizer>
                             <Tooltip
                                 content={<Text id="app.main.groups.owner" />}>

src/components/navigation/left/HomeSidebar.tsx

@@ -6,8 +6,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { Channels } from "revolt.js/dist/api/objects";
-import { Users as UsersNS } from "revolt.js/dist/api/objects";
+import { RelationshipStatus } from "revolt-api/types/Users";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
@@ -16,7 +15,6 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { useData } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -42,8 +40,7 @@ const HomeSidebar = observer((props: Props) => {
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
-    const store = useData();
-    const channels = [...store.channels.values()]
+    const channels = [...client.channels.values()]
         .filter(
             (x) =>
                 x.channel_type === "DirectMessage" ||
@@ -51,7 +48,7 @@ const HomeSidebar = observer((props: Props) => {
         )
         .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const obj = store.channels.get(channel);
+    const obj = client.channels.get(channel);
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
@@ -87,10 +84,10 @@ const HomeSidebar = observer((props: Props) => {
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof [...store.users.values()].find(
+                                    typeof [...client.users.values()].find(
                                         (user) =>
                                             user?.relationship ===
-                                            UsersNS.Relationship.Incoming,
+                                            RelationshipStatus.Incoming,
                                     ) !== "undefined"
                                         ? "unread"
                                         : undefined
@@ -139,11 +136,7 @@ const HomeSidebar = observer((props: Props) => {
                     let user;
                     if (x.channel.channel_type === "DirectMessage") {
                         if (!x.channel.active) return null;
-
-                        const recipient = client.channels.getRecipient(
-                            x.channel._id,
-                        );
-                        user = store.users.get(recipient);
+                        user = x.channel.recipient;
 
                         if (!user) {
                             console.warn(

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,7 +1,7 @@
 import { Plus } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { useLocation, useParams } from "react-router-dom";
-import { Channel, Servers, Users } from "revolt.js/dist/api/objects";
+import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
 import { attachContextMenu, openContextMenu } from "preact-context-menu";
@@ -10,7 +10,6 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { useData } from "../../../mobx/State";
 import { connectState } from "../../../redux/connector";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -175,14 +174,12 @@ interface Props {
 }
 
 export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
-    const store = useData();
     const client = useClient();
-    const self = store.users.get(client.user!._id);
 
     const { server: server_id } = useParams<{ server?: string }>();
-    const server = server_id ? store.servers.get(server_id) : undefined;
-    const activeServers = [...store.servers.values()];
-    const channels = [...store.channels.values()].map((x) =>
+    const server = server_id ? client.servers.get(server_id) : undefined;
+    const activeServers = [...client.servers.values()];
+    const channels = [...client.channels.values()].map((x) =>
         mapChannelWithUnread(x, unreads),
     );
 
@@ -192,7 +189,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 
     const servers = activeServers.map((server) => {
         let alertCount = 0;
-        for (const id of server.channels) {
+        for (const id of server.channel_ids) {
             const channel = channels.find((x) => x.channel?._id === id);
             if (channel?.alertCount) {
                 alertCount += channel.alertCount;
@@ -201,7 +198,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 
         return {
             server,
-            unread: (typeof server.channels.find((x) =>
+            unread: (typeof server.channel_ids.find((x) =>
                 unreadChannels.includes(x),
             ) !== "undefined"
                 ? alertCount > 0
@@ -230,8 +227,8 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     }
 
     if (
-        [...store.users.values()].find(
-            (x) => x.relationship === Users.Relationship.Incoming,
+        [...client.users.values()].find(
+            (x) => x.relationship === RelationshipStatus.Incoming,
         )
     ) {
         alertCount++;
@@ -254,9 +251,13 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                             onClick={() =>
                                 homeActive && openContextMenu("Status")
                             }>
-                            <UserHover user={self}>
+                            <UserHover user={client.user}>
                                 <Icon size={42} unread={homeUnread}>
-                                    <UserIcon target={self} size={32} status />
+                                    <UserIcon
+                                        target={client.user}
+                                        size={32}
+                                        status
+                                    />
                                 </Icon>
                             </UserHover>
                         </div>

src/components/navigation/left/ServerSidebar.tsx

@@ -1,6 +1,5 @@
 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";
 
 import { attachContextMenu } from "preact-context-menu";
@@ -9,11 +8,12 @@ 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";
 
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
 import Category from "../../ui/Category";
@@ -50,14 +50,14 @@ const ServerList = styled.div`
 `;
 
 const ServerSidebar = observer((props: Props) => {
-    const store = useData();
+    const client = useClient();
     const { server: server_id, channel: channel_id } =
         useParams<{ server: string; channel?: string }>();
 
-    const server = store.servers.get(server_id);
+    const server = client.servers.get(server_id);
     if (!server) return <Redirect to="/" />;
 
-    const channel = channel_id ? store.channels.get(channel_id) : undefined;
+    const channel = channel_id ? client.channels.get(channel_id) : undefined;
     if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
     if (channel) useUnreads({ ...props, channel });
 
@@ -71,11 +71,11 @@ const ServerSidebar = observer((props: Props) => {
         });
     }, [channel_id]);
 
-    const uncategorised = new Set(server.channels);
+    const uncategorised = new Set(server.channel_ids);
     const elements = [];
 
     function addChannel(id: string) {
-        const entry = store.channels.get(id);
+        const entry = client.channels.get(id);
         if (!entry) return;
 
         const active = channel?._id === entry._id;

src/components/navigation/left/common.ts

@@ -1,11 +1,12 @@
+import { autorun } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { useLayoutEffect } from "preact/hooks";
 
-import { Channel } from "../../../mobx";
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
-import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
 type UnreadProps = {
     channel: Channel;
@@ -16,7 +17,10 @@ export function useUnreads({ channel, unreads }: UnreadProps) {
     const client = useClient();
 
     useLayoutEffect(() => {
-        function checkUnread(target?: Channel) {
+        function checkUnread(
+            target: Channel,
+            last_message: Channel["last_message"],
+        ) {
             if (!target) return;
             if (target._id !== channel._id) return;
             if (
@@ -46,10 +50,7 @@ export function useUnreads({ channel, unreads }: UnreadProps) {
             }
         }
 
-        checkUnread(channel);
-
-        client.channels.addListener("mutation", checkUnread);
-        return () => client.channels.removeListener("mutation", checkUnread);
+        return autorun(() => checkUnread(channel!, channel!.last_message));
     }, [channel, unreads]);
 }
 

src/components/navigation/right/MemberSidebar.tsx

@@ -1,15 +1,15 @@
 import { observer } from "mobx-react-lite";
-import { useParams } from "react-router";
 import { Link } from "react-router-dom";
-import { User } from "revolt.js";
-import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import Members, { Member } from "revolt.js/dist/maps/Members";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { User } from "revolt.js/dist/maps/Users";
 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";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -17,8 +17,8 @@ import {
     AppContext,
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../../context/revoltjs/RevoltClient";
-import { HookContext } from "../../../context/revoltjs/hooks";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import Button from "../../ui/Button";
@@ -46,10 +46,10 @@ export const GroupMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
         const { openScreen } = useIntermediate();
 
-        const store = useData();
-        const members = channel.recipients
-            ?.map((member) => store.users.get(member)!)
-            .filter((x) => typeof x !== "undefined");
+        const client = useClient();
+        const members = channel.recipients?.filter(
+            (x) => typeof x !== "undefined",
+        );
 
         /*const voice = useContext(VoiceContext);
     const voiceActive = voice.roomId === channel._id;
@@ -70,14 +70,12 @@ export const GroupMemberSidebar = observer(
             // ! FIXME: should probably rewrite all this code
             const l =
                 +(
-                    (a.online &&
-                        a.status?.presence !== Users.Presence.Invisible) ??
+                    (a!.online && a!.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
             const r =
                 +(
-                    (b.online &&
-                        b.status?.presence !== Users.Presence.Invisible) ??
+                    (b!.online && b!.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
 
@@ -86,14 +84,14 @@ export const GroupMemberSidebar = observer(
                 return n;
             }
 
-            return a.username.localeCompare(b.username);
+            return a!.username.localeCompare(b!.username);
         });
 
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
                     <ChannelDebugInfo id={channel._id} />
-                    <Search channel={channel._id} />
+                    <Search channel={channel} />
 
                     {/*voiceActive && voiceParticipants.length !== 0 && (
                     <Fragment>
@@ -163,71 +161,32 @@ export const GroupMemberSidebar = observer(
 
 export const ServerMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
-        const [members, setMembers] = useState<Servers.Member[] | undefined>(
-            undefined,
-        );
-
-        const store = useData();
-        const users = members
-            ?.map((member) => store.users.get(member._id.user)!)
-            .filter((x) => typeof x !== "undefined");
-
+        const client = useClient();
         const { openScreen } = useIntermediate();
         const status = useContext(StatusContext);
-        const client = useContext(AppContext);
 
         useEffect(() => {
-            if (
-                status === ClientStatus.ONLINE &&
-                typeof members === "undefined"
-            ) {
-                store
-                    .fetchMembers(channel.server!)
-                    .then((members) => setMembers(members));
+            if (status === ClientStatus.ONLINE) {
+                channel.server!.fetchMembers();
             }
         }, [status]);
 
-        // ! FIXME: temporary code
-        useEffect(() => {
-            function onPacket(packet: ClientboundNotification) {
-                if (!members) return;
-                if (packet.type === "ServerMemberJoin") {
-                    if (packet.id !== channel.server) return;
-                    setMembers([
-                        ...members,
-                        { _id: { server: packet.id, user: packet.user } },
-                    ]);
-                } else if (packet.type === "ServerMemberLeave") {
-                    if (packet.id !== channel.server) return;
-                    setMembers(
-                        members.filter(
-                            (x) =>
-                                !(
-                                    x._id.user === packet.user &&
-                                    x._id.server === packet.id
-                                ),
-                        ),
-                    );
-                }
-            }
-
-            client.addListener("packet", onPacket);
-            return () => client.removeListener("packet", onPacket);
-        }, [members]);
+        let users = [...client.members.keys()]
+            .filter((x) => x.server === channel.server_id)
+            .map((y) => client.users.get(y.user)!)
+            .filter((z) => typeof z !== "undefined");
 
         // copy paste from above
-        users?.sort((a, b) => {
+        users.sort((a, b) => {
             // ! FIXME: should probably rewrite all this code
             const l =
                 +(
-                    (a.online &&
-                        a.status?.presence !== Users.Presence.Invisible) ??
+                    (a.online && a.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
             const r =
                 +(
-                    (b.online &&
-                        b.status?.presence !== Users.Presence.Invisible) ??
+                    (b.online && b.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
 
@@ -243,9 +202,9 @@ export const ServerMemberSidebar = observer(
             <GenericSidebarBase>
                 <GenericSidebarList>
                     <ChannelDebugInfo id={channel._id} />
-                    <Search channel={channel._id} />
-                    <div>{!members && <Preloader type="ring" />}</div>
-                    {members && (
+                    <Search channel={channel} />
+                    <div>{users.length === 0 && <Preloader type="ring" />}</div>
+                    {users.length > 0 && (
                         <CollapsibleSection
                             //sticky //will re-add later, need to fix css
                             id="members"
@@ -256,10 +215,7 @@ export const ServerMemberSidebar = observer(
                                     {users?.length ?? 0}
                                 </span>
                             }>
-                            {(users?.length ?? 0) === 0 && (
-                                <img src={placeholderSVG} loading="eager" />
-                            )}
-                            {users?.map(
+                            {users.map(
                                 (user) =>
                                     user && (
                                         <UserButton
@@ -283,7 +239,7 @@ export const ServerMemberSidebar = observer(
     },
 );
 
-function Search({ channel }: { channel: string }) {
+function Search({ channel }: { channel: Channel }) {
     if (!getState().experiments.enabled?.includes("search")) return null;
 
     const client = useContext(AppContext);
@@ -294,11 +250,7 @@ function Search({ channel }: { channel: string }) {
     const [results, setResults] = useState<Message[]>([]);
 
     async function search() {
-        const data = await client.channels.searchWithUsers(
-            channel,
-            { query, sort },
-            true,
-        );
+        const data = await channel.searchWithUsers({ query, sort });
         setResults(data.messages);
     }
 
@@ -340,7 +292,6 @@ function Search({ channel }: { channel: string }) {
                 }}>
                 {results.map((message) => {
                     let href = "";
-                    const channel = client.channels.get(message.channel);
                     if (channel?.channel_type === "TextChannel") {
                         href += `/server/${channel.server}`;
                     }
@@ -355,10 +306,7 @@ function Search({ channel }: { channel: string }) {
                                     padding: "6px",
                                     background: "var(--primary-background)",
                                 }}>
-                                <b>
-                                    @
-                                    {client.users.get(message.author)?.username}
-                                </b>
+                                <b>@{message.author?.username}</b>
                                 <br />
                                 {message.content}
                             </div>