HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Run prettier on all files.

Browse Source
This commit is contained in:
Paul
2021-07-05 11:23:23 +01:00
parent 56058c1e75
commit 7bd33d8d34
181 changed files with 18084 additions and 13521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/components/common/messaging/bars/ReplyBar.tsx
View File

@@ -1,94 +1,141 @@
import { Text } from "preact-i18n";
import {
At,
Reply as ReplyIcon,
File,
XCircle,
} from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import UserShort from "../../user/UserShort";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { ReplyBase } from "../attachments/MessageReply";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { At, Reply as ReplyIcon, File, XCircle } from "@styled-icons/boxicons-regular";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { ReplyBase } from "../attachments/MessageReply";
interface Props {
channel: string,
replies: Reply[],
setReplies: StateUpdater<Reply[]>
channel: string;
replies: Reply[];
setReplies: StateUpdater<Reply[]>;
}
const Base = styled.div`
display: flex;
padding: 0 22px;
user-select: none;
align-items: center;
background: var(--message-box);
display: flex;
padding: 0 22px;
user-select: none;
align-items: center;
background: var(--message-box);
div {
flex-grow: 1;
}
div {
flex-grow: 1;
}
.actions {
gap: 12px;
display: flex;
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
align-items: center;
}
.actions {
gap: 12px;
display: flex;
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
align-items: center;
}
`;
// ! FIXME: Move to global config
const MAX_REPLIES = 5;
export default function ReplyBar({ channel, replies, setReplies }: Props) {
useEffect(() => {
return internalSubscribe("ReplyBar", "add", id => replies.length < MAX_REPLIES && !replies.find(x => x.id === id) && setReplies([ ...replies, { id, mention: false } ]));
}, [ replies ]);
useEffect(() => {
return internalSubscribe(
"ReplyBar",
"add",
(id) =>
replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) &&
setReplies([...replies, { id, mention: false }]),
);
}, [replies]);
const view = useRenderState(channel);
if (view?.type !== 'RENDER') return null;
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
const ids = replies.map(x => x.id);
const messages = view.messages.filter(x => ids.includes(x._id));
const users = useUsers(messages.map(x => x.author));
return (
<div>
{ replies.map((reply, index) => {
let message = messages.find(x => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! render state along with relevant users
// -> which then fetches any unknown messages
if (!message) return <span><Text id="app.main.channel.misc.failed_load" /></span>;
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
const users = useUsers(messages.map((x) => x.author));
let user = users.find(x => message!.author === x?._id);
if (!user) return;
return (
<div>
{replies.map((reply, index) => {
let message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! render state along with relevant users
// -> which then fetches any unknown messages
if (!message)
return (
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
);
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<UserShort user={user} size={16} />
{ message.attachments && message.attachments.length > 0 && <File size={16} /> }
<Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
</ReplyBase>
<span class="actions">
<IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
<span class="toggle">
<At size={16} /> { reply.mention ? 'ON' : 'OFF' }
</span>
</IconButton>
<IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
)
}) }
</div>
)
let user = users.find((x) => message!.author === x?._id);
if (!user) return;
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<UserShort user={user} size={16} />
{message.attachments &&
message.attachments.length > 0 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(message.content as string).replace(
/\n/g,
" ",
)}
/>
</ReplyBase>
<span class="actions">
<IconButton
onClick={() =>
setReplies(
replies.map((_, i) =>
i === index
? { ..._, mention: !_.mention }
: _,
),
)
}>
<span class="toggle">
<At size={16} />{" "}
{reply.mention ? "ON" : "OFF"}
</span>
</IconButton>
<IconButton
onClick={() =>
setReplies(
replies.filter((_, i) => i !== index),
)
}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
);
})}
</div>
);
}