revite/src/components/common/messaging/attachments/MessageReply.tsx

180 lines
4.9 KiB
TypeScript
Raw Normal View History

2021-06-27 06:17:59 -04:00
import { Reply, File } from "@styled-icons/boxicons-regular";
2021-07-06 14:29:27 -04:00
import { SYSTEM_USER_ID } from "revolt.js";
2021-07-05 06:23:23 -04:00
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
2021-06-23 13:26:41 -04:00
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
2021-07-05 06:23:23 -04:00
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";
2021-07-05 06:23:23 -04:00
2021-06-23 13:26:41 -04:00
interface Props {
2021-07-05 06:25:20 -04:00
channel: string;
index: number;
id: string;
2021-06-23 13:26:41 -04:00
}
2021-07-05 06:23:23 -04:00
export const ReplyBase = styled.div<{
2021-07-05 06:25:20 -04:00
head?: boolean;
fail?: boolean;
preview?: boolean;
2021-07-05 06:23:23 -04:00
}>`
2021-07-05 06:25:20 -04:00
gap: 4px;
display: flex;
2021-07-09 15:46:35 -04:00
margin-inline-start: 30px;
margin-inline-end: 12px;
margin-bottom: 4px;
2021-07-05 06:25:20 -04:00
font-size: 0.8em;
user-select: none;
align-items: center;
color: var(--secondary-foreground);
2021-06-23 13:26:41 -04:00
* {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2021-07-09 15:46:35 -04:00
.user {
display: flex;
gap: 4px;
flex-shrink: 0;
font-weight: 600;
align-items: center;
2021-07-09 15:56:09 -04:00
span {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
2021-07-09 15:46:35 -04:00
/*&::before {
position:relative;
width: 50px;
height: 2px;
background: red;
}*/
}
.content {
gap: 4px;
display: flex;
cursor: pointer;
align-items: center;
flex-direction: row;
2021-07-09 15:56:09 -04:00
transition: filter 1s ease-in-out;
transition: transform ease-in-out .1s;
filter: brightness(1);
&:hover {
filter: brightness(2);
}
&:active {
transform: translateY(1px);
}
> * {
pointer-events: none;
}
}
> svg:first-child {
2021-07-05 06:25:20 -04:00
flex-shrink: 0;
transform: scaleX(-1);
color: var(--tertiary-foreground);
}
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
${(props) =>
props.fail &&
css`
color: var(--tertiary-foreground);
`}
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
2021-06-23 13:26:41 -04:00
2021-07-05 06:23:23 -04:00
${(props) =>
2021-07-05 06:25:20 -04:00
props.preview &&
css`
margin-left: 0;
`}
2021-06-23 13:26:41 -04:00
`;
export function MessageReply({ index, channel, id }: Props) {
const ctx = useForceUpdate();
2021-07-05 06:25:20 -04:00
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
2021-06-23 13:26:41 -04:00
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 ]);
2021-07-05 06:25:20 -04:00
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
</ReplyBase>
);
}
2021-06-23 13:26:41 -04:00
const user = useUser(message.author, ctx);
const history = useHistory();
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
2021-07-09 15:46:35 -04:00
<div className="user"><UserShort user={user} size={16} /></div>
<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>
</>}
</>
}
2021-07-05 06:25:20 -04:00
</ReplyBase>
);
2021-06-23 13:26:41 -04:00
}