Add links to message replies and load older messages.

This commit is contained in:
Paul 2021-07-09 10:10:36 +01:00
parent 7a5ace2def
commit 3075fc8e32
2 changed files with 67 additions and 23 deletions

View file

@ -36,9 +36,10 @@ interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: MessageObject;
highlight?: boolean; highlight?: boolean;
hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message, highlight }: Props) { export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
let data: SystemMessageParsed; let data: SystemMessageParsed;
@ -153,9 +154,9 @@ export function SystemMessage({ attachContext, message, highlight }: Props) {
}) })
: undefined : undefined
}> }>
<MessageInfo> { !hideInfo && <MessageInfo>
<MessageDetail message={message} position="left" /> <MessageDetail message={message} position="left" />
</MessageInfo> </MessageInfo> }
<SystemContent>{children}</SystemContent> <SystemContent>{children}</SystemContent>
</MessageBase> </MessageBase>
); );

View file

@ -6,11 +6,15 @@ import { Text } from "preact-i18n";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useUser } from "../../../../context/revoltjs/hooks"; import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage"; import { SystemMessage } from "../SystemMessage";
import { Users } from "revolt.js/dist/api/objects";
import { useHistory } from "react-router-dom";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
interface Props { interface Props {
channel: string; channel: string;
@ -25,18 +29,29 @@ export const ReplyBase = styled.div<{
}>` }>`
gap: 4px; gap: 4px;
display: flex; display: flex;
margin: 0 30px;
font-size: 0.8em; font-size: 0.8em;
margin-left: 30px;
user-select: none; user-select: none;
margin-bottom: 4px; margin-bottom: 4px;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
* {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
}
svg:first-child { .content {
gap: 4px;
display: flex;
align-items: center;
flex-direction: row;
cursor: pointer;
}
> svg:first-child {
flex-shrink: 0; flex-shrink: 0;
transform: scaleX(-1); transform: scaleX(-1);
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
@ -62,10 +77,23 @@ export const ReplyBase = styled.div<{
`; `;
export function MessageReply({ index, channel, id }: Props) { export function MessageReply({ index, channel, id }: Props) {
const ctx = useForceUpdate();
const view = useRenderState(channel); const view = useRenderState(channel);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const message = view.messages.find((x) => x._id === id); const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
useLayoutEffect(() => {
// ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
const m = view.messages.find((x) => x._id === id);
if (m) {
setMessage(m);
} else {
ctx.client.channels.fetchMessage(channel, id)
.then(m => setMessage(mapMessage(m)));
}
}, [ view.messages ]);
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
@ -77,23 +105,38 @@ export function MessageReply({ index, channel, id }: Props) {
); );
} }
const user = useUser(message.author); const user = useUser(message.author, ctx);
const history = useHistory();
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} /> <Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
<div className="content" onClick={() => {
let obj = ctx.client.channels.get(channel);
if (obj?.channel_type === 'TextChannel') {
history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
} else {
history.push(`/channel/${channel}/${message._id}`);
}
}}>
{message.attachments && message.attachments.length > 0 && ( {message.attachments && message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")} content={(message.content as string).replace(/\n/g, " ")}
/> />
)} </div>
</>}
</>
}
</ReplyBase> </ReplyBase>
); );
} }