mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-25 16:40:58 -05:00
Add links to message replies and load older messages.
This commit is contained in:
parent
7a5ace2def
commit
3075fc8e32
2 changed files with 67 additions and 23 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue