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

View file

@ -6,11 +6,15 @@ import { Text } from "preact-i18n";
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 UserShort from "../../user/UserShort";
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 {
channel: string;
@ -25,18 +29,29 @@ export const ReplyBase = styled.div<{
}>`
gap: 4px;
display: flex;
margin: 0 30px;
font-size: 0.8em;
margin-left: 30px;
user-select: none;
margin-bottom: 4px;
align-items: center;
color: var(--secondary-foreground);
* {
overflow: hidden;
white-space: nowrap;
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;
transform: scaleX(-1);
color: var(--tertiary-foreground);
@ -62,10 +77,23 @@ export const ReplyBase = styled.div<{
`;
export function MessageReply({ index, channel, id }: Props) {
const ctx = useForceUpdate();
const view = useRenderState(channel);
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) {
return (
<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 (
<ReplyBase head={index === 0}>
<Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<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 && (
<File size={16} />
)}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
)}
</div>
</>}
</>
}
</ReplyBase>
);
}