Finish migrating user state over to MobX.

src/components/common/AutoComplete.tsx

@@ -1,9 +1,13 @@
-import { SYSTEM_USER_ID, User } from "revolt.js";
+import { useStore } from "react-redux";
+import { SYSTEM_USER_ID } from "revolt.js";
 import { Channels } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";
 
 import { StateUpdater, useState } from "preact/hooks";
 
+import { User } from "../../mobx";
+import { useData } from "../../mobx/State";
+
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import { emojiDictionary } from "../../assets/emojis";
@@ -53,6 +57,7 @@ export function useAutoComplete(
     const [state, setState] = useState<AutoCompleteState>({ type: "none" });
     const [focused, setFocused] = useState(false);
     const client = useClient();
+    const store = useData();
 
     function findSearchString(
         el: HTMLTextAreaElement,
@@ -127,7 +132,7 @@ export function useAutoComplete(
                 let users: User[] = [];
                 switch (searchClues.users.type) {
                     case "all":
-                        users = client.users.toArray();
+                        users = [...store.users.values()];
                         break;
                     case "channel": {
                         const channel = client.channels.get(
@@ -136,8 +141,8 @@ export function useAutoComplete(
                         switch (channel?.channel_type) {
                             case "Group":
                             case "DirectMessage":
-                                users = client.users
+                                users = channel.recipients
-                                    .mapKeys(channel.recipients)
+                                    .map((x) => store.users.get(x))
                                     .filter(
                                         (x) => typeof x !== "undefined",
                                     ) as User[];
@@ -150,7 +155,7 @@ export function useAutoComplete(
                                         (x) => x._id.substr(0, 26) === server,
                                     )
                                     .map((x) =>
-                                        client.users.get(x._id.substr(26)),
+                                        store.users.get(x._id.substr(26)),
                                     )
                                     .filter(
                                         (x) => typeof x !== "undefined",

src/components/common/messaging/Message.tsx

@@ -1,7 +1,10 @@
+import { observer } from "mobx-react-lite";
+
 import { attachContextMenu } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useContext, useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
 import { QueuedMessage } from "../../../redux/reducers/queue";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -34,109 +37,117 @@ interface Props {
     head?: boolean;
 }
 
-function Message({
+const Message = observer(
-    highlight,
+    ({
-    attachContext,
+        highlight,
-    message,
+        attachContext,
-    contrast,
+        message,
-    content: replacement,
+        contrast,
-    head: preferHead,
+        content: replacement,
-    queued,
+        head: preferHead,
-}: Props) {
+        queued,
-    // TODO: Can improve re-renders here by providing a list
+    }: Props) => {
-    // TODO: of dependencies. We only need to update on u/avatar.
+        const store = useData();
-    const user = useUser(message.author);
+        const user = store.users.get(message.author);
-    const client = useContext(AppContext);
-    const { openScreen } = useIntermediate();
 
-    const content = message.content as string;
+        const client = useContext(AppContext);
-    const head = preferHead || (message.replies && message.replies.length > 0);
+        const { openScreen } = useIntermediate();
 
-    // ! FIXME: tell fatal to make this type generic
+        const content = message.content as string;
-    // bree: Fatal please...
+        const head =
-    const userContext = attachContext
+            preferHead || (message.replies && message.replies.length > 0);
-        ? (attachContextMenu("Menu", {
-              user: message.author,
-              contextualChannel: message.channel,
-          }) as any)
-        : undefined;
 
-    const openProfile = () =>
+        // ! FIXME: tell fatal to make this type generic
-        openScreen({ id: "profile", user_id: message.author });
+        // bree: Fatal please...
+        const userContext = attachContext
+            ? (attachContextMenu("Menu", {
+                  user: message.author,
+                  contextualChannel: message.channel,
+              }) as any)
+            : undefined;
 
-    // ! FIXME: animate on hover
+        const openProfile = () =>
-    const [animate, setAnimate] = useState(false);
+            openScreen({ id: "profile", user_id: message.author });
 
-    return (
+        // ! FIXME: animate on hover
-        <div id={message._id}>
+        const [animate, setAnimate] = useState(false);
-            {message.replies?.map((message_id, index) => (
+
-                <MessageReply
+        return (
-                    index={index}
+            <div id={message._id}>
-                    id={message_id}
+                {message.replies?.map((message_id, index) => (
-                    channel={message.channel}
+                    <MessageReply
-                />
+                        index={index}
-            ))}
+                        id={message_id}
-            <MessageBase
+                        channel={message.channel}
-                highlight={highlight}
+                    />
-                head={head && !(message.replies && message.replies.length > 0)}
+                ))}
-                contrast={contrast}
+                <MessageBase
-                sending={typeof queued !== "undefined"}
+                    highlight={highlight}
-                mention={message.mentions?.includes(client.user!._id)}
+                    head={
-                failed={typeof queued?.error !== "undefined"}
+                        head && !(message.replies && message.replies.length > 0)
-                onContextMenu={
+                    }
-                    attachContext
+                    contrast={contrast}
-                        ? attachContextMenu("Menu", {
+                    sending={typeof queued !== "undefined"}
-                              message,
+                    mention={message.mentions?.includes(client.user!._id)}
-                              contextualChannel: message.channel,
+                    failed={typeof queued?.error !== "undefined"}
-                              queued,
+                    onContextMenu={
-                          })
+                        attachContext
-                        : undefined
+                            ? attachContextMenu("Menu", {
-                }
+                                  message,
-                onMouseEnter={() => setAnimate(true)}
+                                  contextualChannel: message.channel,
-                onMouseLeave={() => setAnimate(false)}>
+                                  queued,
-                <MessageInfo>
+                              })
-                    {head ? (
+                            : undefined
-                        <UserIcon
+                    }
-                            target={user}
+                    onMouseEnter={() => setAnimate(true)}
-                            size={36}
+                    onMouseLeave={() => setAnimate(false)}>
-                            onContextMenu={userContext}
+                    <MessageInfo>
-                            onClick={openProfile}
+                        {head ? (
-                            animate={animate}
+                            <UserIcon
-                        />
+                                target={user}
-                    ) : (
+                                size={36}
-                        <MessageDetail message={message} position="left" />
-                    )}
-                </MessageInfo>
-                <MessageContent>
-                    {head && (
-                        <span className="detail">
-                            <Username
-                                className="author"
-                                user={user}
                                 onContextMenu={userContext}
                                 onClick={openProfile}
+                                animate={animate}
                             />
-                            <MessageDetail message={message} position="top" />
+                        ) : (
-                        </span>
+                            <MessageDetail message={message} position="left" />
-                    )}
+                        )}
-                    {replacement ?? <Markdown content={content} />}
+                    </MessageInfo>
-                    {queued?.error && (
+                    <MessageContent>
-                        <Overline type="error" error={queued.error} />
+                        {head && (
-                    )}
+                            <span className="detail">
-                    {message.attachments?.map((attachment, index) => (
+                                <Username
-                        <Attachment
+                                    className="author"
-                            key={index}
+                                    user={user}
-                            attachment={attachment}
+                                    onContextMenu={userContext}
-                            hasContent={index > 0 || content.length > 0}
+                                    onClick={openProfile}
-                        />
+                                />
-                    ))}
+                                <MessageDetail
-                    {message.embeds?.map((embed, index) => (
+                                    message={message}
-                        <Embed key={index} embed={embed} />
+                                    position="top"
-                    ))}
+                                />
-                </MessageContent>
+                            </span>
-            </MessageBase>
+                        )}
-        </div>
+                        {replacement ?? <Markdown content={content} />}
-    );
+                        {queued?.error && (
-}
+                            <Overline type="error" error={queued.error} />
+                        )}
+                        {message.attachments?.map((attachment, index) => (
+                            <Attachment
+                                key={index}
+                                attachment={attachment}
+                                hasContent={index > 0 || content.length > 0}
+                            />
+                        ))}
+                        {message.embeds?.map((embed, index) => (
+                            <Embed key={index} embed={embed} />
+                        ))}
+                    </MessageContent>
+                </MessageBase>
+            </div>
+        );
+    },
+);
 
 export default memo(Message);

src/components/common/messaging/SystemMessage.tsx

@@ -1,10 +1,13 @@
-import { User } from "revolt.js";
+import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
 
 import { TextReact } from "../../../lib/i18n";
 
+import { User } from "../../../mobx";
+import { useData } from "../../../mobx/State";
+
 import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
 import { MessageObject } from "../../../context/revoltjs/util";
 
@@ -39,132 +42,131 @@ interface Props {
     hideInfo?: boolean;
 }
 
-export function SystemMessage({
+export const SystemMessage = observer(
-    attachContext,
+    ({ attachContext, message, highlight, hideInfo }: Props) => {
-    message,
+        const store = useData();
-    highlight,
-    hideInfo,
-}: Props) {
-    const ctx = useForceUpdate();
 
-    let data: SystemMessageParsed;
+        let data: SystemMessageParsed;
-    const content = message.content;
+        const content = message.content;
-    if (typeof content === "object") {
+        if (typeof content === "object") {
-        switch (content.type) {
+            switch (content.type) {
+                case "text":
+                    data = content;
+                    break;
+                case "user_added":
+                case "user_remove":
+                    data = {
+                        type: content.type,
+                        user: store.users.get(content.id)!,
+                        by: store.users.get(content.by)!,
+                    };
+                    break;
+                case "user_joined":
+                case "user_left":
+                case "user_kicked":
+                case "user_banned":
+                    data = {
+                        type: content.type,
+                        user: store.users.get(content.id)!,
+                    };
+                    break;
+                case "channel_renamed":
+                    data = {
+                        type: "channel_renamed",
+                        name: content.name,
+                        by: store.users.get(content.by)!,
+                    };
+                    break;
+                case "channel_description_changed":
+                case "channel_icon_changed":
+                    data = {
+                        type: content.type,
+                        by: store.users.get(content.by)!,
+                    };
+                    break;
+                default:
+                    data = { type: "text", content: JSON.stringify(content) };
+            }
+        } else {
+            data = { type: "text", content };
+        }
+
+        let children;
+        switch (data.type) {
             case "text":
-                data = content;
+                children = <span>{data.content}</span>;
                 break;
             case "user_added":
             case "user_remove":
-                data = {
+                children = (
-                    type: content.type,
+                    <TextReact
-                    user: useUser(content.id, ctx) as User,
+                        id={`app.main.channel.system.${
-                    by: useUser(content.by, ctx) as User,
+                            data.type === "user_added"
-                };
+                                ? "added_by"
+                                : "removed_by"
+                        }`}
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                            other_user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
                 break;
             case "user_joined":
             case "user_left":
             case "user_kicked":
             case "user_banned":
-                data = {
+                children = (
-                    type: content.type,
+                    <TextReact
-                    user: useUser(content.id, ctx) as User,
+                        id={`app.main.channel.system.${data.type}`}
-                };
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                        }}
+                    />
+                );
                 break;
             case "channel_renamed":
-                data = {
+                children = (
-                    type: "channel_renamed",
+                    <TextReact
-                    name: content.name,
+                        id={`app.main.channel.system.channel_renamed`}
-                    by: useUser(content.by, ctx) as User,
+                        fields={{
-                };
+                            user: <UserShort user={data.by} />,
+                            name: <b>{data.name}</b>,
+                        }}
+                    />
+                );
                 break;
             case "channel_description_changed":
             case "channel_icon_changed":
-                data = {
+                children = (
-                    type: content.type,
+                    <TextReact
-                    by: useUser(content.by, ctx) as User,
+                        id={`app.main.channel.system.${data.type}`}
-                };
+                        fields={{
+                            user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
                 break;
-            default:
-                data = { type: "text", content: JSON.stringify(content) };
         }
-    } else {
-        data = { type: "text", content };
-    }
 
-    let children;
+        return (
-    switch (data.type) {
+            <MessageBase
-        case "text":
+                highlight={highlight}
-            children = <span>{data.content}</span>;
+                onContextMenu={
-            break;
+                    attachContext
-        case "user_added":
+                        ? attachContextMenu("Menu", {
-        case "user_remove":
+                              message,
-            children = (
+                              contextualChannel: message.channel,
-                <TextReact
+                          })
-                    id={`app.main.channel.system.${
+                        : undefined
-                        data.type === "user_added" ? "added_by" : "removed_by"
+                }>
-                    }`}
+                {!hideInfo && (
-                    fields={{
+                    <MessageInfo>
-                        user: <UserShort user={data.user} />,
+                        <MessageDetail message={message} position="left" />
-                        other_user: <UserShort user={data.by} />,
+                    </MessageInfo>
-                    }}
+                )}
-                />
+                <SystemContent>{children}</SystemContent>
-            );
+            </MessageBase>
-            break;
+        );
-        case "user_joined":
+    },
-        case "user_left":
+);
-        case "user_kicked":
-        case "user_banned":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.${data.type}`}
-                    fields={{
-                        user: <UserShort user={data.user} />,
-                    }}
-                />
-            );
-            break;
-        case "channel_renamed":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.channel_renamed`}
-                    fields={{
-                        user: <UserShort user={data.by} />,
-                        name: <b>{data.name}</b>,
-                    }}
-                />
-            );
-            break;
-        case "channel_description_changed":
-        case "channel_icon_changed":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.${data.type}`}
-                    fields={{
-                        user: <UserShort user={data.by} />,
-                    }}
-                />
-            );
-            break;
-    }
-
-    return (
-        <MessageBase
-            highlight={highlight}
-            onContextMenu={
-                attachContext
-                    ? attachContextMenu("Menu", {
-                          message,
-                          contextualChannel: message.channel,
-                      })
-                    : undefined
-            }>
-            {!hideInfo && (
-                <MessageInfo>
-                    <MessageDetail message={message} position="left" />
-                </MessageInfo>
-            )}
-            <SystemContent>{children}</SystemContent>
-        </MessageBase>
-    );
-}

src/components/common/messaging/attachments/MessageReply.tsx

@@ -1,5 +1,6 @@
 import { Reply } from "@styled-icons/boxicons-regular";
 import { File } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { SYSTEM_USER_ID } from "revolt.js";
 import { Users } from "revolt.js/dist/api/objects";
@@ -10,6 +11,8 @@ import { useLayoutEffect, useState } from "preact/hooks";
 
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
+import { useData } from "../../../../mobx/State";
+
 import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
 import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
 
@@ -120,7 +123,7 @@ export const ReplyBase = styled.div<{
         `}
 `;
 
-export function MessageReply({ index, channel, id }: Props) {
+export const MessageReply = observer(({ index, channel, id }: Props) => {
     const ctx = useForceUpdate();
     const view = useRenderState(channel);
     if (view?.type !== "RENDER") return null;
@@ -152,7 +155,8 @@ export function MessageReply({ index, channel, id }: Props) {
         );
     }
 
-    const user = useUser(message.author, ctx);
+    const store = useData();
+    const user = store.users.get(message.author);
     const history = useHistory();
 
     return (
@@ -203,4 +207,4 @@ export function MessageReply({ index, channel, id }: Props) {
             )}
         </ReplyBase>
     );
-}
+});

src/components/common/messaging/bars/ReplyBar.tsx

@@ -4,6 +4,7 @@ import {
     File,
     XCircle,
 } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { SYSTEM_USER_ID } from "revolt.js";
 import styled from "styled-components";
 
@@ -13,6 +14,7 @@ import { StateUpdater, useEffect } from "preact/hooks";
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
+import { useData } from "../../../../mobx/State";
 import { Reply } from "../../../../redux/reducers/queue";
 
 import { useUsers } from "../../../../context/revoltjs/hooks";
@@ -56,7 +58,7 @@ const Base = styled.div`
 
 // ! FIXME: Move to global config
 const MAX_REPLIES = 5;
-export default function ReplyBar({ channel, replies, setReplies }: Props) {
+export default observer(({ channel, replies, setReplies }: Props) => {
     useEffect(() => {
         return internalSubscribe(
             "ReplyBar",
@@ -73,7 +75,9 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
 
     const ids = replies.map((x) => x.id);
     const messages = view.messages.filter((x) => ids.includes(x._id));
-    const users = useUsers(messages.map((x) => x.author));
+
+    const store = useData();
+    const users = messages.map((x) => store.users.get(x.author));
 
     return (
         <div>
@@ -90,9 +94,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                         </span>
                     );
 
-                const user = users.find((x) => message!.author === x?._id);
+                const user = users[index];
-                if (!user) return;
-
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
@@ -143,4 +145,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
             })}
         </div>
     );
-}
+});

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { User } from "revolt.js";
 import styled from "styled-components";
 
@@ -6,10 +7,14 @@ import { useContext } from "preact/hooks";
 
 import { TextReact } from "../../../../lib/i18n";
 
+import { useData } from "../../../../mobx/State";
 import { connectState } from "../../../../redux/connector";
 import { TypingUser } from "../../../../redux/reducers/typing";
 
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import {
+    AppContext,
+    useClient,
+} from "../../../../context/revoltjs/RevoltClient";
 import { useUsers } from "../../../../context/revoltjs/hooks";
 
 import { Username } from "../../user/UserShort";
@@ -61,12 +66,13 @@ const Base = styled.div`
     }
 `;
 
-export function TypingIndicator({ typing }: Props) {
+export const TypingIndicator = observer(({ typing }: Props) => {
     if (typing && typing.length > 0) {
-        const client = useContext(AppContext);
+        const client = useClient();
-        const users = useUsers(typing.map((x) => x.id)).filter(
+        const store = useData();
-            (x) => typeof x !== "undefined",
+        const users = typing
-        ) as User[];
+            .map((x) => store.users.get(x.id)!)
+            .filter((x) => typeof x !== "undefined");
 
         users.sort((a, b) =>
             a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
@@ -123,7 +129,7 @@ export function TypingIndicator({ typing }: Props) {
     }
 
     return null;
-}
+});
 
 export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
     return {

src/components/common/user/UserCheckbox.tsx

@@ -1,8 +1,9 @@
-import { User } from "revolt.js";
+import { User } from "../../../mobx";
 
 import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
 import UserIcon from "./UserIcon";
+import { Username } from "./UserShort";
 
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
@@ -10,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
         <Checkbox {...props}>
             <UserIcon target={user} size={32} />
-            {user.username}
+            <Username user={user} />
         </Checkbox>
     );
 }

src/components/common/user/UserHeader.tsx

@@ -1,6 +1,6 @@
 import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { User } from "revolt.js";
 import styled from "styled-components";
 
 import { openContextMenu } from "preact-context-menu";
@@ -9,6 +9,8 @@ import { Localizer } from "preact-i18n";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { User } from "../../../mobx";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import Header from "../../ui/Header";
@@ -49,7 +51,7 @@ interface Props {
     user: User;
 }
 
-export default function UserHeader({ user }: Props) {
+export default observer(({ user }: Props) => {
     const { writeClipboard } = useIntermediate();
 
     return (
@@ -81,4 +83,4 @@ export default function UserHeader({ user }: Props) {
             )}
         </Header>
     );
-}
+});

src/components/common/user/UserShort.tsx

@@ -21,7 +21,7 @@ export const Username = observer(
         let username = user?.username;
         let color;
 
-        // ! FIXME: this must be really bad for perf.
+        /* // ! FIXME: this must be really bad for perf.
         if (user) {
             let { server } = useParams<{ server?: string }>();
             if (server) {
@@ -44,7 +44,7 @@ export const Username = observer(
                     }
                 }
             }
-        }
+        } */
 
         return (
             <span {...otherProps} style={{ color }}>

src/components/navigation/BottomNavigation.tsx

@@ -1,14 +1,16 @@
 import { Search } from "@styled-icons/boxicons-regular";
 import { Message, Group, Inbox } 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";
 
-import { useSelf } from "../../context/revoltjs/hooks";
+import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../common/user/UserIcon";
 import IconButton from "../ui/IconButton";
@@ -51,8 +53,11 @@ interface Props {
     lastOpened: LastOpened;
 }
 
-export function BottomNavigation({ lastOpened }: Props) {
+export const BottomNavigation = observer(({ lastOpened }: Props) => {
-    const user = useSelf();
+    const client = useClient();
+    const store = useData();
+    const user = store.users.get(client.user!._id);
+
     const history = useHistory();
     const path = useLocation().pathname;
 
@@ -114,7 +119,7 @@ export function BottomNavigation({ lastOpened }: Props) {
             </Navbar>
         </Base>
     );
-}
+});
 
 export default connectState(BottomNavigation, (state) => {
     return {

src/context/intermediate/popovers/UserPicker.tsx

@@ -1,14 +1,14 @@
-import { User, Users } from "revolt.js/dist/api/objects";
+import { Users } from "revolt.js/dist/api/objects";
 
 import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
+
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
 import Modal from "../../../components/ui/Modal";
 
-import { useUsers } from "../../revoltjs/hooks";
-
 interface Props {
     omit?: string[];
     onClose: () => void;
@@ -19,7 +19,7 @@ export function UserPicker(props: Props) {
     const [selected, setSelected] = useState<string[]>([]);
     const omit = [...(props.omit || []), "00000000000000000000000000"];
 
-    const users = useUsers();
+    const store = useData();
 
     return (
         <Modal
@@ -33,24 +33,17 @@ export function UserPicker(props: Props) {
                 },
             ]}>
             <div className={styles.list}>
-                {(
+                {[...store.users.values()]
-                    users.filter(
+                    .filter(
                         (x) =>
                             x &&
                             x.relationship === Users.Relationship.Friend &&
                             !omit.includes(x._id),
-                    ) as User[]
+                    )
-                )
-                    .map((x) => {
-                        return {
-                            ...x,
-                            selected: selected.includes(x._id),
-                        };
-                    })
                     .map((x) => (
                         <UserCheckbox
                             user={x}
-                            checked={x.selected}
+                            checked={selected.includes(x._id)}
                             onChange={(v) => {
                                 if (v) {
                                     setSelected([...selected, x._id]);