diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index 67e0d49965b469f35389ea04bc53f488819d3197..6192939932be82fc75de224c05536f365aaa3017 100644 --- a/src/components/common/messaging/SystemMessage.tsx +++ b/src/components/common/messaging/SystemMessage.tsx @@ -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> ); diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 6fef2bf7429c44668fe9fe488255e392b54b8cc8..b9b0e6b4c0852c15ef5d3290de4635c7bafef858 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -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; + * { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .content { + gap: 4px; + display: flex; + align-items: center; + flex-direction: row; + + cursor: pointer; + } - svg:first-child { + > 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} /> - <UserShort user={user} size={16} /> - {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, " ")} - /> - )} + { 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} /> + )} + <Markdown + disallowBigEmoji + content={(message.content as string).replace(/\n/g, " ")} + /> + </div> + </>} + </> + } </ReplyBase> ); }