cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-23 22:22:07 -05:00
Code Issues Projects Releases Packages Wiki Activity

Finish migrating user state over to MobX.

Browse source
This commit is contained in:
Paul 2021-07-29 15:51:19 +01:00
parent 4dffaad6c1
commit f8611ddea5
11 changed files with 286 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/common/AutoComplete.tsx
View file

@ -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
.mapKeys(channel.recipients)
users = 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",

203
src/components/common/messaging/Message.tsx
View file

@ -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({
highlight,
attachContext,
message,
contrast,
content: replacement,
head: preferHead,
queued,
}: Props) {
// TODO: Can improve re-renders here by providing a list
// TODO: of dependencies. We only need to update on u/avatar.
const user = useUser(message.author);
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const Message = observer(
({
highlight,
attachContext,
message,
contrast,
content: replacement,
head: preferHead,
queued,
}: Props) => {
const store = useData();
const user = store.users.get(message.author);
const content = message.content as string;
const head = preferHead || (message.replies && message.replies.length > 0);
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
// ! FIXME: tell fatal to make this type generic
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author,
contextualChannel: message.channel,
}) as any)
: undefined;
const content = message.content as string;
const head =
preferHead || (message.replies && message.replies.length > 0);
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author });
// ! FIXME: tell fatal to make this type generic
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author,
contextualChannel: message.channel,
}) as any)
: undefined;
// ! FIXME: animate on hover
const [animate, setAnimate] = useState(false);
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author });
return (
<div id={message._id}>
{message.replies?.map((message_id, index) => (
<MessageReply
index={index}
id={message_id}
channel={message.channel}
/>
))}
<MessageBase
highlight={highlight}
head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast}
sending={typeof queued !== "undefined"}
mention={message.mentions?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
queued,
})
: undefined
}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo>
{head ? (
<UserIcon
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
animate={animate}
/>
) : (
<MessageDetail message={message} position="left" />
)}
</MessageInfo>
<MessageContent>
{head && (
<span className="detail">
<Username
className="author"
user={user}
// ! FIXME: animate on hover
const [animate, setAnimate] = useState(false);
return (
<div id={message._id}>
{message.replies?.map((message_id, index) => (
<MessageReply
index={index}
id={message_id}
channel={message.channel}
/>
))}
<MessageBase
highlight={highlight}
head={
head && !(message.replies && message.replies.length > 0)
}
contrast={contrast}
sending={typeof queued !== "undefined"}
mention={message.mentions?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
queued,
})
: undefined
}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo>
{head ? (
<UserIcon
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
animate={animate}
/>
<MessageDetail message={message} position="top" />
</span>
)}
{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>
);
}
) : (
<MessageDetail message={message} position="left" />
)}
</MessageInfo>
<MessageContent>
{head && (
<span className="detail">
<Username
className="author"
user={user}
onContextMenu={userContext}
onClick={openProfile}
/>
<MessageDetail
message={message}
position="top"
/>
</span>
)}
{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);

226
src/components/common/messaging/SystemMessage.tsx
View file

@ -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({
attachContext,
message,
highlight,
hideInfo,
}: Props) {
const ctx = useForceUpdate();
export const SystemMessage = observer(
({ attachContext, message, highlight, hideInfo }: Props) => {
const store = useData();
let data: SystemMessageParsed;
const content = message.content;
if (typeof content === "object") {
switch (content.type) {
let data: SystemMessageParsed;
const content = message.content;
if (typeof content === "object") {
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 = {
type: content.type,
user: useUser(content.id, ctx) as User,
by: useUser(content.by, ctx) as User,
};
children = (
<TextReact
id={`app.main.channel.system.${
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 = {
type: content.type,
user: useUser(content.id, ctx) as User,
};
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break;
case "channel_renamed":
data = {
type: "channel_renamed",
name: content.name,
by: useUser(content.by, ctx) as User,
};
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":
data = {
type: content.type,
by: useUser(content.by, ctx) as User,
};
children = (
<TextReact
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;
switch (data.type) {
case "text":
children = <span>{data.content}</span>;
break;
case "user_added":
case "user_remove":
children = (
<TextReact
id={`app.main.channel.system.${
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":
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>
);
}
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>
);
},
);

10
src/components/common/messaging/attachments/MessageReply.tsx
View file

@ -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>
);
}
});

14
src/components/common/messaging/bars/ReplyBar.tsx
View file

@ -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);
if (!user) return;
const user = users[index];
return (
<Base key={reply.id}>
<ReplyBase preview>
@ -143,4 +145,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
})}
</div>
);
}
});

20
src/components/common/messaging/bars/TypingIndicator.tsx
View file

@ -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 users = useUsers(typing.map((x) => x.id)).filter(
(x) => typeof x !== "undefined",
) as User[];
const client = useClient();
const store = useData();
const users = typing
.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 {

5
src/components/common/user/UserCheckbox.tsx
View file

@ -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>
);
}

8
src/components/common/user/UserHeader.tsx
View file

@ -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>
);
}
});

4
src/components/common/user/UserShort.tsx
View file

@ -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 }}>

13
src/components/navigation/BottomNavigation.tsx
View file

@ -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) {
const user = useSelf();
export const BottomNavigation = observer(({ lastOpened }: Props) => {
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 {

23
src/context/intermediate/popovers/UserPicker.tsx
View file

@ -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}>
{(
users.filter(
{[...store.users.values()]
.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]);