cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Include @ symbol when reply is a mention.

Browse source
This commit is contained in:
Paul 2021-08-16 18:08:44 +01:00
parent b4f16f0d00
commit 1f2e58b10e
3 changed files with 95 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/common/messaging/Message.tsx
View file

@ -81,6 +81,7 @@ const Message = observer(
index={index}
id={message_id}
channel={message.channel!}
parent_mentions={message.mention_ids ?? []}
/>
))}
<MessageBase

169
src/components/common/messaging/attachments/MessageReply.tsx
View file

@ -18,6 +18,7 @@ import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
interface Props {
parent_mentions: string[];
channel: Channel;
index: number;
id: string;
@ -33,7 +34,6 @@ export const ReplyBase = styled.div<{
display: flex;
margin-inline-start: 30px;
margin-inline-end: 12px;
/*margin-bottom: 4px;*/
font-size: 0.8em;
user-select: none;
align-items: center;
@ -137,91 +137,98 @@ export const ReplyBase = styled.div<{
`}
`;
export const MessageReply = observer(({ index, channel, id }: Props) => {
const view = getRenderer(channel);
if (view.state !== "RENDER") return null;
export const MessageReply = observer(
({ index, channel, id, parent_mentions }: Props) => {
const view = getRenderer(channel);
if (view.state !== "RENDER") return null;
const [message, setMessage] = useState<Message | undefined>(undefined);
const [message, setMessage] = useState<Message | undefined>(undefined);
useLayoutEffect(() => {
const message = channel.client.messages.get(id);
if (message) {
setMessage(message);
} else {
channel.fetchMessage(id).then(setMessage);
useLayoutEffect(() => {
const message = channel.client.messages.get(id);
if (message) {
setMessage(message);
} else {
channel.fetchMessage(id).then(setMessage);
}
}, [id, channel, view.messages]);
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
</ReplyBase>
);
}
}, [id, channel, view.messages]);
if (!message) {
const history = useHistory();
return (
<ReplyBase head={index === 0} fail>
<ReplyBase head={index === 0}>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<>
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : (
<>
<div className="user">
<UserShort
user={message.author}
size={16}
showServerIdentity
prefixAt={parent_mentions.includes(
message.author_id,
)}
/>
</div>
<div
className="content"
onClick={() => {
const channel = message.channel!;
if (
channel.channel_type ===
"TextChannel"
) {
history.push(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel._id}/${message._id}`,
);
}
}}>
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length >
1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
)}
</ReplyBase>
);
}
const history = useHistory();
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<>
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : (
<>
<div className="user">
<UserShort
user={message.author}
size={16}
showServerIdentity
/>
</div>
<div
className="content"
onClick={() => {
const channel = message.channel!;
if (
channel.channel_type === "TextChannel"
) {
history.push(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel._id}/${message._id}`,
);
}
}}>
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
)}
</ReplyBase>
);
});
},
);

6
src/components/common/user/UserShort.tsx
View file

@ -28,10 +28,12 @@ const BotBadge = styled.div`
export const Username = observer(
({
user,
prefixAt,
showServerIdentity,
...otherProps
}: {
user?: User;
prefixAt?: boolean;
showServerIdentity?: boolean;
} & JSX.HTMLAttributes<HTMLElement>) => {
let username = user?.username;
@ -84,6 +86,7 @@ export const Username = observer(
return (
<span {...otherProps} style={{ color }}>
{prefixAt ? "@" : undefined}
{username ?? <Text id="app.main.channel.unknown_user" />}
</span>
);
@ -93,10 +96,12 @@ export const Username = observer(
export default function UserShort({
user,
size,
prefixAt,
showServerIdentity,
}: {
user?: User;
size?: number;
prefixAt?: boolean;
showServerIdentity?: boolean;
}) {
const { openScreen } = useIntermediate();
@ -115,6 +120,7 @@ export default function UserShort({
user={user}
showServerIdentity={showServerIdentity}
onClick={openProfile}
prefixAt={prefixAt}
/>
</>
);