diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index 67e0d499..61929399 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 }> - + { !hideInfo && - + } {children} ); diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 6fef2bf7..b9b0e6b4 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; + } - 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(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 ( @@ -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 ( - - {message.attachments && message.attachments.length > 0 && ( - - )} - {message.author === SYSTEM_USER_ID ? ( - - ) : ( - - )} + { user?.relationship === Users.Relationship.Blocked ? + <>Blocked User : + <> + {message.author === SYSTEM_USER_ID ? ( + + ) : <> + +
{ + 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 && ( + + )} + +
+ } + + }
); }